How I set up this website

8 Aug '21 • Filed under mystical • Tagged: Technology

A few notes on the technology behind this website:

It uses a static site generator called Hugo. Writing content offline and then generating a static site works very well for hand-written, non-dynamic content. It also means the generated website is very, very fast and eliminates many security issues. This simplicity also means it’s much easier to maintain over the long term.

As the content is just a collection of Markdown files that are generated into HTML and then uploaded to GitHub Pages, I’ll never lose my website, as it’s not owned by any third party. The Hugo code is open source, so I can use and modify it even if the maintainers abandon the project.

After I installed Hugo, I found the Cupper theme, which was refreshingly bold and simple. It felt like a good foundation to build upon and prioritises accessibility and mobile responsiveness. I then used Figma to spin up a quick logo, and exported it to SVG.

When I wanted to edit the theme, I followed this guide, which essentially says: fork the theme, add your fork as a submodule, then push changes to your fork. This retains the ability to also pull changes from the original repo.

Each time I write a new post I just run hugo new post/my-new-article.md and start writing. My current Markdown editor of choice is Typora.

When I’m ready, I commit the changes via git, just as I do when writing code. When I git push my changes to GitHub, a GitHub Action then builds the website and deploys it automatically.

The mailing list is powered by Mailchimp, which has a good free plan. Embedding the condensed form into my pages required adding a simple HTML shortcode to Hugo.

Want to know when new posts go live?
Emails are short, infrequent and packed with goodness.