I rebuilt the blog with Cloudflare Pages and Astro.js

(updated: )

The new year started, and for the first time in a year I felt like writing a blog, so as a way to make something to write about I rebuilt the whole stack at once.

The old setup was:

I’d really just wanted a server to practice Rust. That itch was scratched, so next I wanted something easier to maintain with an SSG.

The current setup is:

(I’d quietly been paying for Heroku, so saving $7 a month was a nice bonus)

Cloudflare Pages

I got stuck on two things with Cloudflare Pages: the default GitHub integration build environment is on Node.js 12,
and when a custom domain is attached to Pages, I still don’t have a way to automate purging Cloudflare’s CDN cache at the right time.

For the Node.js version (LTS v18 doesn’t work at the moment), setting the NODE_VERSION environment variable to 16.19.0 got the build through.
I gave up on automating the CDN cache purge after deploy. I couldn’t find a hook for when a Pages deploy finishes.

Astro

At first I thought I might go with Next.js or Gatsby.js, since I write React day to day. Both felt like a lot of machinery for a personal blog, and I didn’t feel like I needed it. I looked around and found Astro.
On top of that, Astro is philosophically an MPA. SPA features on a blog felt way too much to me — running JavaScript at all felt too much — so that landed, and I went with it.

---
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

.astro files have a bit of a quirk to them, but for someone used to JSX it didn’t feel bad. (Another file extension is still a pain.)
If anything, I even kind of liked that browser code and non-browser code are kept apart.

So I changed a bunch of things, and
right now I keep thinking “microCMS is good…” which feels like it might even get me to write the next post.