Colophon

⚠ Geek content ahead! ⚠
This post is about geeky tech stuff.
If you're not into that, maybe skip this one! (What's this?)

This page gives an overview of all the tools and technologies behind this website. If you’d like to know why I built it, I wrote a blog post all about that.

It’s liberating to write blog content in Markdown.
It’s liberating to write blog content in Markdown.

Content management

This website is generated using the static site generator Hugo. This means I get to write my posts in flat files - in Markdown - and store them alongside my images. All my content is neatly organised in Git, which I store in a private Github repository (private because of my draft posts). I then run hugo and it applies my templates to the content and spits out a fully formed website. It also automatically resizes my images based on how the images are used in my content.

I absolutely love this approach. I write my posts directly in my IDE (currently Webstorm), and the simplicity of it removes all distractions. I don’t get hung up on styling or image resizing; I just write.

With this setup, I get to use the command line to build and publish, and I get to change and control absolutely every line of code that gets published. This all makes my little heart very happy.

The gallery is just another content type with its own specialised display templates. If you want all the juicy details, I wrote a blog post about how I built it.

Design & styles

Although I’m a software engineer, front-end design has never been my expertise. I enjoy it from a hobbyist perspective, rather than a professional one. Thankfully this is a personal site, so it’s my own playground, and I can make my own mistakes and transgressions. (Please forgive my design sins. I know I’ve committed a few. Atonement is on my backlog.)

There are no pre-built themes here - these are my own templates. That’s why they’re so dorky. I used native CSS, with SASS for mixins and a vague attempt at BEM for organisation, and the tiniest bit of native JavaScript here and there. The site does not use any CSS or JS frameworks, as I want it clean and bloat-free.

For the lightbox functionality, I’m using GLightbox. It’s very simple to set up and works wonderfully for my purposes. Crucially, it’s written in native JS.

Typefaces

Tooling

Want to share your thoughts?
✎ Reply to this page by sending me an email, or message me on Instagram.