Back to basics

12/17/2024

crafts

"What I cannot create, I do not understand." — Richard P. Feynman

In an age of AI-generated code and bloated web frameworks, I took inspiration from digital gardens and chose to do it the old fashioned way. Rather than reaching for the usual frameworks or libraries, I’m hand rolling it from the ground up.

Is it novel? No.

Is it theraputic? Yes.

A kind of catharsis for those of us who cut our teeth in the pre-AI, hand-crafted web era. To resist the capitalist-work-urge to only do something if its "novel" or "improves something".

I started with a landing page. Then build injection to share components. Then a blog engine..on and on. Each step added a layer of depth to the site, making it feel more interconnected. And while frameworks might have made some of these features easier, building them myself was quite satisfying 😌

The Build System

At the heart of the site is a custom build system written in Deno. It’s inspired by static site generators but keeps things simple and focused, much like the rest of the project.

Page Composition

The site’s structure is modular, using templates to assemble pages from reusable components. The build system (found in scripts/build.ts) handles tasks like:

Loading and merging HTML templates
Injecting shared elements like navigation and footers
Processing markdown files for blog posts
Copying and optimizing assets

Each page has a clean, predictable layout:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Injected head component -->
</head>
<body>
  <div class="container">
    <!-- Injected navigation -->
    <main>
      <!-- Page content -->
    </main>
    <!-- Injected footer -->
  </div>
</body>
</html>

The Blog Engine

It’s simple, but it gets the job done and has room to grow. Features include:

Frontmatter for metadata
Automatic slug generation
Date-based sorting
Relationships to related projects
Social media sharing links

Here’s an example of a markdown post with YAML frontmatter:

---
title: "My Post Title"
date: '2024-12-20'
draft: false
slug: my-post
projectSlug: related-project
socialLinks:
  twitter: https://twitter.com/...
---

The build system parses these files, converts them to HTML, and slots them into the site’s templates. Simple and satisfying.

Development Workflow

I wanted the development experience to feel frictionless. Here’s what’s included:

A watch system for automatic rebuilds during development
A CLI task to create new blog posts
Local file serving for quick testing
GitHub Actions for automated deployment

For example, creating a new blog post is as simple as:

deno task new-thought "My New Post Title"

The site is hosted on GitHub Pages with a custom GitHub Action workflow .

Browse and Explore

It’s fun to dig into the details of how things work, and this site is built with that curiosity in mind. Everything here is simple and open—a nod to the joy of creating systems from scratch. Please browse away, and enjoy exploring how it all comes together.