This will be a short post1, I’m basically just signposting to the many great resources I used to pull this site together.

So, what have I “built”2?

  • a simple, reasonable looking site with minimal CSS/JS craziness and no real cost,
  • a custom domain name and email address to make it look a bit more “professional”3,
  • a CI/CD pipeline which updates the site every time I commit a change,

… and I’m pretty happy with that result.

Especially since the last time I built a website, I worked really hard on it and ended up with something my lecturer called “novel” and most people would call “unusable”.

So, I put off trying to build this because I was sure it would be painful (and because I was scared I’d have to use wordpress).

But, if anything, throwing this site together was too simple - I’d expected it would take a while to get off the ground, but because the skeleton of the site came together so quickly it left me with nothing to do but mess around with content4. 😅

All the code lives here on my GitHub . if you find this belpful, feel free to give me a shout. if I’ve messed something up, likewise! Or better yet, send me a PR!

Hugo Link to heading

The site is built by Hugo - the docs explain Hugo infinitely better than I can, so I won’t spend too long on it, effectively a framework that renders markdown as HTML.

There’s a great quick start page here to get you up and running with Hugo.5

The Hugo CLI is great as well, e.g. adding a new page is just hugo new content ... 🤌

And I love running the site locally with hugo server - I don’t do much frontend work in my day job, so having my content hot reloading as I edit feels vaguely magical.

There are a few things in the site which didn’t just come out of the box and were instead cobbled together from various resources.
  • the CSS for the “Experience” page is a lightly tweaked version of the ones here - I’d originally hoped to set the page up as a printable CV, but found it a bit fiddly,
  • collapsible sections on the “Experience” page (and here) are handled by a custom shortcode that wraps the content in an HTML details` tag,
  • the wee “note” elements (the small, italic text blocks) are another custom shortcode
  • having links open in new tabs is handled by a custom render-link layout ,
  • emojis in titles (because why not?) was done by copying the layouts/partials/page.html from the theme into my project and editing it to add emojify .

Themes Link to heading

The theme for this is supplied by hugo-coder , but there are lots to choose from - can you believe all these folks just giving us these awesome themes so we don’t need to fight with CSS?!

GitHub Pages Link to heading

The site is hosted on GitHub Pages - I’d planned to host this site out of an S3 bucket (as outlined here ), but Pages turned out to be much simpler.

The static pages are built using GitHub Actions whenever there’s a new commit to main.

So that’s hosting and CI/CD taken care of for the princely sum of £0. 💸

Between this pipeline and running Hugo locally, the workflow is just:

  1. new page,
  2. edit and preview locally,
  3. commit and push,
  4. see it live!

Which is pretty cool, right? Adding pages to Confluence is less straightforward.

There’s another fantastic guide about how to acheive this along with all the necessary GitHub Actions code here .

Custom Domain Link to heading

I wasn’t keen on throwing https://s-nicholson.github.io/s-nicholson out there as my URL - so I decided to see if I could do better…

Turns out it’s laughably easy to do better. You can add a custom domain name for your site in a matter of minutes.

There’s (yet another) great guide here on how to do that.

I got my domain from CloudFlare for about $4 and configured all the necessary DNS entries in about 10 minutes, despite never having touched CloudFlare before.

The hardest part was trying to figure out what went wrong when I started getting TOO_MANY_REDIRECT issues… and that was resolved by 2 minutes on StackOverflow .

Email forwarding Link to heading

I also spent a few extra minutes setting up email forwarding for the domain in the CloudFlare console - adding a routing rule to forward messages to [email protected] to my personal gmail.

And also followed this guide to allow me to send mail from my [email protected], just to keep things consistent if anyone ever emails me.

Content Link to heading

The content is just markdown, so that’s dead easy to throw together - it’s got just enough formatting to be pretty descending into CSS hell.

Hugo’s templating gives you the tools to build up just enough stuff on top of the vanilla markdown to make pages a bit nicer.

And as an added bonus, it lives in git as plaintext - not in some input box on a CMS somewhere, or Confluence, or wherever else information usually goes to die. That gives me a level of comfort that’s hard to express.

Now I just need to come up with some content worth reading…

  1. I never intended this site to be a blog but I find myself wanting to write some stuff down and this seems as good a place as any to keep my keystrokes alive . ↩︎

  2. I thought “built” was a bit cheeky considering I wrote hardly any code for this but I suppose sticking existing bits together is still building in the Lego sense, so I’m happy with it. ↩︎

  3. At least until folks read the content, I guess. ↩︎

  4. That and a misguided attempt to generate a PDF CV from my Experience page - not one of my better ideas. ↩︎

  5. I chose not to clone my theme as a submodule - instead I initialised my site as a go module and then added the theme at the top of my hugo.toml  ↩︎