MicroWebGen

A minimal static site generator that creates single-page applications with client-side routing and markdown rendering.

Features

• Single HTML Output: Generates a single index.html file with all assets embedded
• Client-Side Routing: Hash-based SPA routing for fast navigation
• Markdown Support: Client-side markdown rendering with syntax highlighting
• Asset Bundling: Automatic bundling and optimization of CSS/JS dependencies
• Font Management: Downloads and serves Google Fonts locally
• Live Reload: Watch mode for development
• Flexible Templating: Support for inline content and file includes

Installation

# Clone and install locally
cd mwg
npm install
npm link

# Or install in your project
npm install ../mwg

Usage

Basic Commands

# Build the site
mwg-ts build

# Build with bundled assets
mwg-ts build --bundle

# Watch for changes
mwg-ts watch

# Bundle dependencies
mwg-ts bundle

# Bundle and clean up vendor files
mwg-ts bundle --clean

# Build and remove bundle files (when embedded in HTML)
mwg-ts build --bundle --clean-bundles

Project Structure

your-site/
├── src/
│   ├── template.html    # Main template
│   ├── css/             # Source CSS files
│   ├── js/              # Source JavaScript files
│   └── assets/          # Source assets (logos, nav, etc.)
├── static/
│   ├── bundle.css       # Bundled CSS (generated)
│   ├── bundle.js        # Bundled JS (generated)
│   ├── fonts/           # Downloaded fonts
│   └── vendor/          # Vendor files
├── posts/               # Markdown content
├── projects/            # Markdown content
├── dependencies.yaml    # Dependency configuration
└── index.html          # Generated output

Template Syntax

Templates use <include> tags to embed content:

<!-- Include a file -->
<include src="src/css/styles.css"></include>

<!-- Include with type processing -->
<include src="src/assets/logo.ascii"></include>

<!-- Inline markdown -->
<include type="md-inline">
- [Home](#/)
- [About](#/about)
</include>

Dependencies Configuration

Configure external dependencies and bundling in dependencies.yaml:

dependencies:
  marked:
    package: "marked"
    version: "^14.1.2"
    output: "vendor/marked.js"
  
  highlight:
    package: "highlight.js"
    version: "^11.10.0"
    output: "vendor/highlight.js"
    includes:
      - "javascript"
      - "python"
      - "bash"

fonts:
  google:
    - family: "Fira Code"
      weights: "300..700"
  output: "static/fonts"

bundles:
  styles:
    input:
      - "static/fonts/fonts.css"
      - "static/vendor/highlight.css"
      - "src/css/main.css"
    output: "static/bundle.css"
    minify: true
  
  scripts:
    input:
      - "static/vendor/marked.js"
      - "static/vendor/highlight.js"
      - "src/js/renderer.js"
    output: "static/bundle.js"
    minify: true

File Processors

mwg-ts automatically processes files based on their extensions:

• .css - Wrapped in <style> tags
• .js - Wrapped in <script> tags
• .md - Rendered client-side with syntax highlighting
• .ascii - Spaces converted to   for ASCII art
• .md-inline - Markdown rendered server-side (for navigation)

Client-Side Routing

The generated site uses hash-based routing:

• #/ - Home page (loads /README.md)
• #/posts/my-post/README.md - Loads a post
• #/about#section - Loads a page with anchor

Links in markdown files are automatically converted to hash-based URLs for SPA navigation.

Development

Building from Source

# Install dependencies
npm install

# Compile TypeScript
npm run build

# Watch for changes
npm run watch

Project Structure

mwg/
├── src/
│   ├── cli.ts          # CLI interface
│   ├── builder.ts      # Core builder logic
│   ├── bundler.ts      # Dependency bundler
│   ├── processors.ts   # File processors
│   └── font-bundler.ts # Font management
├── dist/               # Compiled JavaScript
└── package.json

Example Sites

mwg was created to power personal websites with a focus on simplicity and performance. It's ideal for:

• Personal blogs
• Portfolio sites
• Documentation
• Project showcases

License

MIT