Blog Redesign
This blog used to be a Jekyll site. I feel a strong need to practice and improve my writing, so I decided to leverage my programming skills plus the recent high quality LLM models to redesign my blog from the ground up.
We now have a custom static site generator built with Bun + TypeScript + Typst. The Typst part is a new feature that I am excited to use. Here’s the blog post processing pipeline.
Tech Stack
- Bun - Runtime, fast builds
- Typst 0.15.0 - Typesetting with HTML export and MathML
- TypeScript - Build scripts
- React - Page rendering
- Tailwind CSS v4 - Styling (Catppuccin theme)
- GitHub Pages - Deployment
Design choices
Using Typst 0.15, math equations are exported as MathML. This keeps equations selectable and accessible without relying on JavaScript libraries like MathJax or KaTeX.
For this blog, I am using Lete Sans Math in CSS for MathML, which pairs very nicely with Atkinson Hyperlegible for body text.
Processing Pipeline
Pre-Processing: Typst to HTML
Posts are written in Typst (.typ files) with metadata in comments:
// date: 2026-01-07
// tags: blog, techstack
// updated: 2026-01-08, 2026-01-10
// hidden: falseEach .typ file compiles to HTML using Typst’s HTML export:
typst compile --format html --features html --root .. ${typstFile} -Post-Processing: HTML to Pages
After Typst compilation:
- Extract first
<h1>as post title and strip it from HTML content - Extract SVG colors from embedded SVGs
- Collect all unique colors across all posts
- Generate CSS file with these colors
- Include in Tailwind v4 build process
- Generate HTML pages at
/blog/YEAR/MONTH/DAY/slug/