Second Post

I’ve recreated my personal website moving from a self-hosted Ghost instance to Hugo, Github, and Cloudflare Pages.

It’s nice to no longer manage the web server myself to host this website. One less system I need to worry about updating periodically. And the Cloudflare free tier is more than enough for my needs.

I also like the convienence of simply creating Markdown files for each post, all tracked in a git repo. For a simple website like this one, having an application and database is a bit overkill.

Downsides include managing media such as images is a bit trickier. Not really a big deal though, just takes a bit more time since I had to refer to the documentation for both Hugo and the theme I’m using (currently Blowfish).

Configuration

#

I’m using a Nix Flake to manage my local Hugo environment so that I don’t have to keep Hugo and its dependencies installed.

{
  description = "my personal website";

  inputs = {
    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
    flake-utils.url = "github:numtide/flake-utils";
  };

  outputs = { self, nixpkgs, flake-utils, ... }:
    flake-utils.lib.eachDefaultSystem (system:
      let
        pkgs = import nixpkgs {
          inherit system;
        };
      in
      {
        devShell = pkgs.mkShell {
          buildInputs = [ pkgs.hugo pkgs.go ];
          shellHook = ''
            echo "Hugo environment activated."
          '';
        };
      });
}

flake.nix using numtide/flake-utils

Nix Flakes require Git, so I had to initialize a git repo in the same directory as the flake. Then, I can activate the Flake like this:

$ nix develop
warning: Git tree '/home/user/Documents/mywebsite_dev' is dirty
Hugo environment activated.

From there I followed the Hugo installation instructions.

To run it locally:

$ hugo server --buildDrafts --disableFastRender

Then I can access it locally at http://localhost:1313

Actually configuring the Cloudflare Pages part is pretty straightforward following their documentation. Essentially push the git repo to Github and configure the Cloudflare Pages integration on Github. On Cloudflare, there is a “Framework preset” for Hugo.

Once configured, when I commit to my production branch, Cloudflare automatically builds and deploys the latest version of my website.

Conclusion

#

This is a pretty convienent setup for me. I could see deploying simple static websites and dynamic “serverless” single-page applications like this in the future.