index

The road to a blog

tech

This post documents my near two year journey of deciding on and off to host a personal website. The long time frame includes periods of:

  • Figuring what I wanted it to be about.
  • Deciding whether or not it would be worth doing, or if I’d even have any content worth posting.
  • Deciding how it should look.
  • Deciding what it should include.
  • Deciding how it should be hosted.
  • Testing and execution.

Initial Plans

My initial plans were to setup a blog to practice writing, and have a place to share my notes and thoughts in a more meaningful way that was under my control and not just by posting on Instagram into the ether. An added benefit would be to learn a bit more about software development, and to implement some basic CI/CD practices.

My first steps included:

  1. Setting the site up functionally.
  2. Creating a CI/CD pipeline for server updates after code changes are tested.
  3. Integrating my org-mode notes directly into the website.

For the last point, I wanted a system in which I could write something in org-mode (where I use the denote packages), and then be able to press a few keybinds to export the note or post into an appropriate format (in this case, a Markdown file), into the directory that my site is hosted. This would minimise any friction between my preferred writing environment, and the update of the blog.

Settling on the Astro Framework

After doing a bit of research on other static blogs, it seemed like the Astro framework was a good place to start. Particularly as I saw that there were some examples of others using Astro integrated with Emacs ox-hugo exports.

Some of the benefits with Astro that I noticed are that it:

  • Generates static websites, so a backend is not needed;
  • Takes Markdown files as inputs and outputs HTML;
  • Uses JavaScript, so I can take libraries from the npm ecosystem.

Steps to run Astro Website in NixOS

NixOS has been my Linux distro of choice, so I started with the below.

  1. Run nix develop with the following flake.nix to enable NodeJS.

    {
  description = "A Nix-flake-based Node.js development environment";

  inputs.nixpkgs.url = "https://flakehub.com/f/NixOS/nixpkgs/0.1.*.tar.gz";

  outputs = { self, nixpkgs }:
    let
      overlays = [
        (final: prev: rec {
          nodejs = prev.nodejs_latest;
          pnpm = prev.nodePackages.pnpm;
          yarn = (prev.yarn.override { inherit nodejs; });
        })
      ];
      supportedSystems = [ "x86_64-linux" "aarch64-linux" "x86_64-darwin" "aarch64-darwin" ];
      forEachSupportedSystem = f: nixpkgs.lib.genAttrs supportedSystems (system: f {
        pkgs = import nixpkgs { inherit overlays system; };
      });
    in
    {
      devShells = forEachSupportedSystem ({ pkgs }: {
        default = pkgs.mkShell {
          packages = with pkgs; [ node2nix nodejs pnpm yarn ];
        };
      });
    };
}

  2. Create a directory for your project and run npm create astro@latest.

  3. Enter the directory of the initialised Astro project, and run npm run dev.

Initial Thoughts with Astropaper Theme

My first test was with the Astropaper theme. I ported over some of my early tests with Markdown files with images of a few of my bonsai trees but overall the theme felt rather… heavy.

I found that the theme offered a lot of features, and lot’s of different configuration elements but I none of them felt really necessary for me. Another gripe was that converting from my org-mode files to Markdown presented a lot of friction, in that I needed to figure out a special way to generate the required header file in the Astropaper template, and finally, have to shift all of my headings down one level as Astropaper used level 1 headings for titles.

This ended up as an ~2 hour experiment, and I then moved on to trying out a Hugo website with ox-hugo, an Org to Hugo exporter.

Detour with Emacs + Org Mode + Ox-Hugo

At first, it seemed like ox-hugo in conjunction with Nix would be a nice combination to move forward based on this website example https://shom.srht.site/ .

There were various good references that I found using Hugo including:

Hugo Test

I ran some tests, and enjoyed the workflow with Hugo, but eventually lost interest as the site and theme didn’t speak to me on an aesthetic level and it also didn’t seem like a good fit for implementing photography.

  1. Install hugo, which can be done temporarily in nix with nix-shell -p hugo.

  2. Create a new Hugo site with the PaperMod theme.

    hugo new site quickstart
cd quickstart
git init
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
echo "theme = 'PaperMod'" >> hugo.toml
hugo server

  3. New content can be created using the hugo CLI command, or by simply adding files into the relevant directory.

hugo new content content/posts/my-first-post.md

By default, the front matter will have a draft value of true. By default Hugo does not publish draft content when building the site so take note of this.

Draft content can be built by running hugo server --buildDrafts or with hugo server -d.

astro-chiri

I’m not sure where I stumbled upon astro-chiri a few months ago, but recently I opened up my blog working folders with a newfound inspiration and have decided that this feels right. With a bit of help from Claude Code I sorted out minor issues I had with the theme, and have also implemented a workflow as planned from Emacs org-mode.

The current setup will be outlined in the next post.