A 9-part series on building and running a Jekyll blog hosted on GitHub Pages — from automating posts with AI to adding offline search, comments, live PR previews, ads, faster CI builds, Good Core Web Vitals, and deep reader engagement analytics. Each part is a standalone deep-dive you can apply to your own site.
Level 1 — Writing & Automation
Before you optimise anything, you need a fast, frictionless way to write and publish. This post shows how to go from a prompt on your phone to a live blog post in minutes — no laptop, no manual deployments.
Write posts on your phone with GitHub Copilot and have them live in minutes without ever touching a laptop. Teaches: GitHub Copilot as editor, PRs as a publishing pipeline, GitHub Pages automation.
Set up a GitHub Actions workflow that creates an issue and assigns it to @copilot — automatically triggering the Copilot coding agent to write and PR a new blog post. Teaches: fine-grained PATs, GitHub Actions triggers, gh CLI, Copilot agent activation.
Level 2 — Reader Features
A static site doesn't have to feel static to readers. These two posts add a fully-featured comment section and instant full-text search — both running entirely in the browser with zero backend or cloud subscription required.
Replace a slow, ad-heavy comment system with GitHub Discussions — zero backend, zero cost. Teaches: giscus setup, GitHub Apps, data ownership.
Add fully offline full-text search to your static site — no server, no API, no subscription. Teaches: Orama, JSON search indexes, offline-first JavaScript.
Level 3 — Dev Workflow & Operations
The finishing touches that turn a hobby blog into a well-oiled publishing platform. Live PR previews so you can review every post before it goes live, controlled ad placement instead of Google putting ads wherever it likes, and a custom Docker image that cuts CI build times dramatically.
Get a live preview URL for every pull request so you can review posts exactly as readers will see them. Teaches: GitHub Actions, GitHub Pages environments, PR automation.
Control exactly where ads appear instead of letting Google inject them anywhere. Teaches: Google AdSense custom placement, Jekyll includes for ads, reader-friendly ad strategy.
Pre-bake your entire build toolchain into a Docker image and cut CI build times dramatically. Teaches: custom Docker base images, GitHub Container Registry, GitHub Actions optimisation.
Level 4 — Performance
A fast site is a better site — for readers, for search ranking, and for Core Web Vitals. This post covers every change that moved this blog from 'Needs improvement' to Good on LCP, CLS, and INP: responsive images, build-time diagrams, minification, and removing runtime JavaScript.
Go from 'Needs improvement' to Good on all three Core Web Vitals. Teaches: jekyll-picture-tag, Rouge vs highlight.js, Pintora at build time, build-time TOC, HTML minification, and custom AdSense placement.
Level 5 — Analytics & Engagement
Pageviews tell you someone opened a tab — they don't tell you whether anyone read a word. This post instruments every 'invisible' reader behaviour: scroll depth, code interaction, viewport entry, social shares, and search, using only GA4 custom events and vanilla JavaScript.
Track scroll depth, code copies, TOC clicks, social shares, and more — without any paid analytics tool. Teaches: GA4 custom events, IntersectionObserver, passive scroll listeners, debounced selectionchange.