How I Built This Blog

2023-04-23

#blogging #build-log 

As I went about creating this blog, I had a few goals in mind:

The stack

Astro

The main component to this site is Astro. It is a static site generator (SSG) that ships with no client-side Javascript by default. It also works great with markdown. There are some great alternatives out there (Gatsby comes to mind), but they all seem a bit “heavier” than what I was looking for.

Writing a post is as easy as creating a markdown file with some basic frontmatter:

---
layout: ../../layouts/PostLayout.astro
title: How I Built This Blog
pubDate: 2023-04-24
description: Overview of how I built my personal blog.
tags: ["blogging", "how-to"]
---

Markdown goes here!

Unfortunately, there is a bit more manual work to set up things like a post index page, tags, etc. Fortunately, the astro docs have a great tutorial on creating a blog. I heavily relied on this to get me started.

Tasks like getting the 10 most recent posts are fairly trivial. Just put something like the code below in the frontmatter section of an .astro file:

const posts = await Astro.glob("../pages/posts/*.md").slice(-10);

Adding a RSS feed was also very straightforward: yarn add @astro/rss and some easy configuration.

And, thankfully, there is a built-in way to support the Dracula theme for all my code blocks. A simple change to astro.config.mjs was all it took:

export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: "dracula",
    },
  },
});

Sourcehut

I needed a place to host my code / content online. Ever since Microsoft acquired GitHub, I’ve been trying to migrate everything over to Sourcehut. It’s an honest alternative that doesn’t harvest user data or train AI models on private code. I have much to say about GitHub, but that’s best left for another posts.

Sourcehut also provides a clean and simple way to handle builds and deployments with builds.sr.ht. I can create a build.yml manifest file that gets run every time I push code up to my mainline branch - this is how I deploy my site. Unfortunately, I had to jump through a few hoops to get it working with Netlify (see below).

For those who are curious, you can find the repository for this site at git.sr.ht/~zstix/zstix-io.

Netlify

I didn’t want to think much about hosting the site and netlify met all of my basic criteria. I found a great article outlining how to set up a sourcehut built manifest file to deploy to netlify. I am running into an authentication issue (need to manually auth each push) but it’s been otherwise painless.

Here’s my build.yml manifest file in full:

image: archlinux #btw
packages:
  - nodejs
  - yarn
secrets:
  - 87a0276a-8292-43fb-a717-8155d4f852c5
environment:
  NETLIFY_SITE_ID: 4f46029e-6dad-4167-a011-bef5fe877629
tasks:
  - setup: |
      cd zstix-io
      yarn
  - build: |
      cd zstix-io
      yarn build
  - deploy: |
      cd zstix-io
      {
        set +x
        . ~/.buildsecrets
        set -x
      }
      export NETLIFY_ACCESS_TOKEN
      yarn deploy

Future features

I’m pretty satisfied with the setup for now. In the future, I’d really like to explore publishing content to the web and to gemini (an alternative web protocol). As a mastodon user, I’m curious about ActivityPub integration, but it seems like more work than it’s worth.

I don’t think I want to support comments on posts, but I have seen some other blogs I like offering commenting via email. Something to consider.