Overview

The blog post is about the repo that has the templated version of my personal site here or at lawsonhart.me. It exports a public template without private code I don’t necessarily want to share because of various reasons. Also, it shares some of the technical features and things that you can do if you choose to use it!

The repo can be found at

What This Codebase Is Built For

So, this code base is obviously some kind of personal site based repo. Therefore, you can find things like blog posts (which you’re viewing now), an about page and just general personalization through out!

Content Collections For Posts And Notes

Posts and notes use Astro Content Collections which support tags, technologies, cover images, and drafts as attributes. The tags get normalized to lowercase for different features across the site. Technologies are deduped in a case-insensitive pass again for different features. Draft posts are filtered so they aren’t built/rendered in production. More about the technologies attribute field. It drives the tech icon row on post cards. It adds a way to organize posts.

MDX And Markdown Pipeline

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

Search Through Pagefind

Pagefind is what handles search. The index builds after the site build in scripts/pagefind.mjs. The search stays off in dev because it slows down local dev quite a lot. On the live site, search results match the rest of the UI instead of looking like a pasted-in widget. This is fits a blog template well because search runs on the client, so there is no search service to run.

Server-Generated OG Images

Posts get OG images from a route that renders them with Satori and Resvg, it’s a pretty small and most of the time unused feature but it adds so much if used correctly. After the route exists, every post gets a finished preview image without manual work, but a custom image can be applied if needed.

Site-Only Examples

The exclude list in the template changes as the site changes. I keep things like the Spotify widgets, GitHub routes and stats, Umami analytics proxy routes, holiday components, comments UI, and posts or project content that do not fit a generic starter.

Update Site Identity

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

Then update navigation links and socials so the header and profile areas match your site.

Add Content

Posts live under src/content/post/**. Notes live under src/content/note/**.

Follow the frontmatter shape in the repo, especially title, description, publishDate, tags, and technologies. Consistent fields keep list pages and cards working without extra tweaks.

What The Template Leaves Out

Email me if one of the non-included/private components matter for your own site. I can work something out to get the code to you.

Email: me@lawsonhart.me