make this blog - part 1

Overview

I wanted to make a blog to share things I find interesting. In particular, I wanted it to be static, lightweight, and scalable.

Helpfully, this is a problem with a simple, comprehensive and documented solution (Wordpress). Less helpfully, I decided to use the opportunity to learn a little more - and if you’re reading this, you probably did too. Maybe you have a more complex use-case than wordpress can provide, maybe you’re interested in using AWS or Astro to make something beautiful. In whatever case, welcome.

Requirements

  1. The site should be fast, SEO optimized, and secure
    • Static site generation is our friend here, with pre-rendered pages.
  2. Individual blog posts should be built on top of a shared layout so that I can change the design further down the line
    • Use a web framework
  3. Delivery of an MVP should be fast, with the opportunity to ‘lift-and-shift’ to make layout and design changes downstream
    • Use a common and well-documented Web framework
  4. Delivery of the MVP should be simple and well-documented so I can focus my time doing what I want to do
    • A well used and documented Web framework
    • Markdown, which I already use extensively in my personal notes with Obsidian
  5. The blog should also play well with other tech I want to use, specifically AWS, and CloudFlare
  6. Finally, the site, themes and so on should be as cost-efficient as possible within these constraints.

After a little discovery work, there’s a lot of love for a number of Static Site Generators, including Hugo, Jekyll and Astro.

I chose Astro, because of the easy setup, active community and integrations. I took a look at blogs like this , who seemed to have already done a lot of what I wanted to do.

Building a blog

Dependencies

npm
nodejs

This resulted in some minor issues with installing the correct NodeJS version, requiring reinstallation:

sudo apt purge nodejs && \
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash && \
nvm install node

After which it’s time to get started:

npm create astro@latest
npm run astro add tailwind
npm run dev

Note: npx (Node Package Execute) is similar to npm run, but allows running packages without installing them globally, by fetching the latest package version on-demand. In comparison npm run must have the script defined in scripts section of package.json. This means npm run is useful regarding consistency and dependencies, and npx is useful where one don’t want to install additional packages, or is trying to reduce wear on that keyboard.

With those commands, a dev environment for Astro will be created on your localhost, accessed at http://localhost:4321

Once comfortable, it’s easy to start a new blog with the built in templates:

npm create astro@latest -- --template blog