
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.
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.
Gallery
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
- Turnip by David Jonathan Ross, for the main text of the site. Isn’t it great?
- True North Black by Cultivated Mind, for the logo
Tooling
- Languages: Markdown, TOML, raw HTML, raw JS, CSS with SASS, and a handful of bash scripts. Keeping it simple!
- Static site generator: Hugo.
- Webhost: Krystal. I picked them because they’re UK based and seem like good people.
- Repo: GitHub (images in LFS).
- Deployment: Currently manually triggered from the command line, using rsync via bash scripts.
- IDE: Either Webstorm or vim depending on the context.
- Analytics: GoatCounter, who are privacy-friendly.