Grant Anderson

sneppard.dev

This site. A static Astro portfolio on Cloudflare Pages, moved off a closed site builder so the thing itself is inspectable, git-driven, and ships no JavaScript by default.

Date
Stack
  • Astro
  • Cloudflare Pages
  • TypeScript
  • CSS
  • Static Site
A trail of linked commit markers climbing across cream ground toward a trailside signboard on posts, which carries a dark header bar, a title block, ruled lines and a red edge, under a sienna sky with a low sun.

The site you’re currently reading. Astro, served as static files from Cloudflare Pages, rebuilt on every push to main.

Why rebuild it

The first version ran on a hosted site builder. It worked well enough, but it was a closed platform. No repository, no build step, no way to version the thing or deploy it from a commit. For a portfolio meant to show how I build software, that felt like the wrong artifact. It seemed better for the site itself to be inspectable.

Astro fit because it ships zero JavaScript by default. A portfolio is almost entirely static content, and shipping a framework runtime just to render text is mostly cost. Interactivity is opt-in per component, which here amounts to a theme toggle.

Notes from the migration

Two things cost real time and are worth recording.

DNS and TLS aren’t the same problem. Getting records to resolve, getting a certificate issued, and getting the origin to serve the right content are three separate failure modes and they look almost identical in a browser. Isolating them turns an opaque failure into an obvious one, and the cheapest way to do that is to check the platform’s own subdomain before going anywhere near the custom domain.

Adapters aren’t free. Cloudflare’s auto-configuration installed an SSR adapter that relocated the build output into a nested directory, so the deploy succeeded while the site returned 404. For a fully static build, no adapter was needed at all. Removing it fixed the problem and shortened the dependency tree.

Stack

Astro with content collections and a typed schema for these project entries, plain CSS with custom properties for theming, @astrojs/sitemap for generation, and Cloudflare Pages for git-driven builds and preview deployments.

What I’d change

The covers are the weakest thing on these pages. They are generated geometric placeholders drawn in the site palette, which looks tidy and tells you nothing. A portfolio entry about a tool should show the tool. Screenshots would be better even if they were uglier.

The other is a seam I put in myself. Colour tokens flip the instant the theme attribute changes, except on the home page, where the hero scene fades its own palette across two seconds. So the page swaps and then the artwork catches up. Fixing it properly means registering the site’s six inks with @property so the whole document can interpolate rather than cut, which is a small change with a wide blast radius and I would rather do it deliberately than in passing.