gnat



init

updated: 2025-01-16

posted: 2025-01-10


    ┌──────────────┐        ┌──────────────┐         ┌─────────────┐
    │ Source Files │───┐    │              │░   ┌───▶│ Assets Copy │░
    └──────────────┘░  └───▶│ File Scanner │────┘    └─────────────┘░
     ░░░░░░░░░░░░░░░░       │              │░  .other ░░░░░░░░░░░░░░░
                            └──────────────┘░
    ┌──────────────┐         ░░░░░░░│░░░░░░░░       ┌──────────────┐
    │  Components  │──┐             │               │ File Watcher │░
    └──────────────┘░ │             │ .html         └──────────────┘░
     ░░░░░░░░░░░░░░░░ │             │                ░░░░░░░│░░░░░░░░
                      │             │                       │
                      │             │                       ▼
    ┌─────────────────┼─────────────▼──────────────────────────────┐
    │Build Pipeline   │   ┌───────────────────┐                    │░
    │                 └──▶│ Content Processor │░                   │░
    │                     └───────────────────┘░                   │░
    │                      ░░░░░░░░░│░░░░░░░░░░░                   │░
    │                               ▼                              │░
    │                     ┌───────────────────┐                    │░
    │                     │ Extract Metadata  │░                   │░
    │                     └───────────────────┘░                   │░
    │                      ░░░░░░░░░│░░░░░░░░░░░                   │░
    │                               ▼                              │░
    │                     ┌───────────────────┐                    │░
    │                     │  Apply Template   │░                   │░
    │                     └───────────────────┘░                   │░
    │                      ░░░░░░░░░│░░░░░░░░░░░                   │░
    │                               ▼                              │░
    │                     ┌───────────────────┐                    │░
    │                     │  Process Nested   │░                   │░
    │                     │    Components     │░                   │░
    │                     └───────────────────┘░                   │░
    │                      ░░░░░░░░░│░░░░░░░░░░░                   │░
    │                               ▼                              │░
    │                     ┌───────────────────┐                    │░
    │                     │  Generate Pages   │░                   │░
    │                     └───────────────────┘░                   │░
    │                      ░░░░░░░░░░░░░░░░░░░░░                   │░
    └──────────────────────────────────────────────────────────────┘░
     ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
                                    ▼
    ┌──────────────────────────────────────────────────────────────┐
    │                         Static Site                          │░
    └──────────────────────────────────────────────────────────────┘░
     ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
                                    ▼
    ┌──────────────────────────────────────────────────────────────┐
    │                         Live Server                          │░
    └──────────────────────────────────────────────────────────────┘░
     ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
  

It has been fun and exciting developing this new site and build system. I've tried and dabbled with countless static site generators, but none of them have been quite right. I wanted something that had the development convenience and extensibility of a modern framework yet produced something performant, simple, js free, and easy to maintain.

How It Works

The build system operates on a component-based architecture with a few key principles:

Content Files:
HTML files with metadata in comments. Each file represents a page or entry.
Components:
Reusable HTML snippets (templates, rows, footers) that get injected during build.
Build Process:
Scans content directories, processes files based on type (articles, notes, feed), generates paginated indexes.
Development Mode:
Live server + file watcher for instant rebuilds during development.

All content processing happens at build time. The result is a purely static site with no client-side JavaScript, yet it maintains dynamic features through automated rebuilds on git pushes. Navigation uses standard HTML pagination, and components allow for consistent styling across pages.