skip to content

The blog post about this blog

A tour of my lawsonhart.me Astro codebase, what ships in the public template, and what stays site-only.

3 min read
Try it live (opens in a new tab)

Overview

This post is about the repo behind the site you’re reading right now, or at lawsonhart.me if you’re seeing this somewhere else. There’s a public template version of it that leaves out the private code I’d rather not share, for various reasons, and this post covers what’s in it and some of the things you can do if you decide to use it.

The repo can be found at

What This Codebase Is Built For

So, this codebase is pretty obviously a personal site repo. You get blog posts (which you’re viewing now), an about page, and general personalization hooks throughout. Nothing exotic, just the pieces a personal site actually needs.

Content Collections For Posts And Notes

Posts and notes run on Astro Content Collections, with support for tags, technologies, cover images, and drafts as frontmatter attributes. Tags get normalized to lowercase since a few features around the site depend on that. Technologies get deduped in a case-insensitive pass, again because other features lean on them. Draft posts are filtered out so they never build or render in production.

The technologies field deserves a special mention. It drives the little tech icon row on post cards, and it’s a nice extra way to organize posts beyond tags.

MDX And Markdown Pipeline

I write in Markdown and MDX, but I still want guardrails around it. The pipeline handles directive admonitions, heading ids with linked headings, safer external links, inline image handling through a public asset prefix, and Astro Expressive Code for the code blocks.

Search Through Pagefind

Search is handled by Pagefind. The index builds after the site build in scripts/pagefind.mjs, and search stays off in dev because it slows local development down quite a lot. On the live site, the results are styled to match the rest of the UI instead of looking like a pasted-in widget.

This fits a blog template really well, honestly. Search runs entirely on the client, so there’s no search service to run or pay for.

Server-Generated OG Images

Posts get OG images from a route that renders them with Satori and Resvg. It’s a small feature that goes unnoticed most of the time, but it adds a lot when it’s used right. Once the route exists, every post gets a finished preview image with zero manual work, and you can still drop in a custom image when a post deserves one.

Site-Only Examples

The template’s exclude list shifts as the site does. Right now I keep things like the Spotify widgets, the GitHub routes and stats, the Umami analytics proxy routes, the comments UI, and any posts or project content that wouldn’t make sense in a generic starter.

Update Site Identity

Edit src/site.config.ts and set the site url, title, author, and description.

Then update the navigation links and socials so the header and profile areas actually match your site instead of mine.

Add Content

Posts live under src/content/post/** and notes live under src/content/note/**.

Follow the frontmatter shape already in the repo, especially title, description, publishDate, tags, and technologies. Keeping those fields consistent is what keeps the list pages and cards working without extra tweaks.

What The Template Leaves Out

If one of the non-included private components matters for your own site, email me. I can probably work something out to get you the code.

Email: me@lawsonhart.me