A Hugo-based blog for £4 per year with full control

It’s not necessarily easy to start a blog. There are a lot of things to consider, and you may just want to go on and write. And I’ve been there. Almost certainly there are a range of blogs that I have previously started on Blogger, Wordpress, or other platforms - a small splurge of posts, a bit of site design…and then nothing. It’s not that I necessarily didn’t want to write - more that the restrictions of a platform (that may have not been well understood) chafing against the busyness of life…and over time my writing just stopped. This may also end up being like that too…

But this time I am more in control of what I’m doing. I’m going to detail what I’m currently using that has made it possible to have a blog for the at-cost domain name registration.

Platform: Hugo

Hugo provides the platform for the website. As a Static Site Generator (SSG) it will process the website file structure - including my posts in markdown - and produce the static web files and javascript.

As I’m on Windows, I followed the [Getting started installation guide)[https://gohugo.io/getting-started/installing/#chocolatey-windows]. This led to me installing Chocolatey, and then opening a command line and installing:

choco install hugo-extended -confirm

I am not sure whether I need to use the hugo-extended version or just hugo as yet…but it’s worked so far! Then type hugo help to make sure everything has installed OK.

After this I then went to the base folder in which the website was going to live (at least initially)…and it was time to create the blog:

hugo new site AliBlog

Almost immediately the website was generated, and running hugo server -D (so that draft posts also show) then brought up a basic starting point.

Version Control: Git and GitHub

I use git for version control:

cd AliBlog
git init
git add .
git commit -m "Initial revision message...or whatever text you chose to put here"

…and then push the site to GitHub. Log-on to GitHub, create the New Repository…and then use that as the reference:

git remote add origin https://github.com/AliCollins/AliBlog.git
git push -u origin main

After this, for each subsequent revision, only need to do:

git add .
git commit -m "This revision's message"
git push

Hugo Theme: Tranquilpeak

There are lots of themes for the Hugo framework that each give a great start to your website design - I chose Tranquilpeak.

WITH GIT, DON’T DO THIS

Although the theme’s own guide suggests the following, if you’re using git do the subsequent box.

Installation (assuming you already have git installed) is as simple as opening a command propmpt, going to the website folder, and running:

git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git

This copies the files into themes/hugo-tranquilpeak-theme. Again, try running hugo server -D (or, if already running, this should auto update your webpage) to see what things now look like.

WITH GIT, DO THIS

Installation of the theme as a submodule:

cd themes
git submodule add https://github.com/kakawait/hugo-tranquilpeak-theme.git
cd..

This copies the files into themes/hugo-tranquilpeak-theme, but as a git project reference. This prevents the already exists in the index error.

If you have already done the first method and later on want to add the project to git, you will get a already exists in the index error. To change it over see this StackOverflow post:

git rm -r --cached themes/hugo-tranquilpeak-theme
git submodule add https://github.com/kakawait/hugo-tranquilpeak-theme.git

Hugo will use files from the template if they don’t exist within the site file structure. Therefore, copy config.toml from \themes\hugo-tranquilpeak-theme\exampleSite\config.toml to the base directory as a suitable starting point. This file will provide a good starting point to develop your own site. Be sure to edit the suitable fields - for instance, title and [author] name.

Again, try running hugo server -D (or, if already running, this should auto update your webpage) to see what things now look like. To get the best view of what the site should look like, add a first post page

hugo new posts/first-post.md

Edit this page in a markdown editor…and you’re started! (Remember to commit the files to git too.)

Website Platform: Cloudflare Pages

It is possible to use GitHub Pages to host your own personal Hugo website directly from the GitHub directory. However, I wanted to have some more control over the output, so after looking at Netlify, I determined that Cloudflare Pages would suitably do the job for me.

Once I’d created an account, this was as simple as clicking on the “Create a project” button and following the guide. Once linked to the GitHub project, this automatically builds and outputs the project. If I was happy with the default output website (a .pages.dev address) then this could be run completely for free. However, I used the Cloudflare Registrar from the dashboard to buy the alicollins.co.uk domain, which they currently do at cost price…which for this address worked out at $5.24 per year, which is currently £4.14 per year total cost. Once bought, again through the dashboard, I could add that website to refer to my Cloudflare Pages site.

Cloudflare are also also beta-testing their email routing. I have therefore set up a number of email address for the domain to route the incoming emails to my preferred email address.

Overall

This has not been a long process to carry out. From idea to fully working website has taken less than a week, and I am well aware that I can edit this now to my heart’s content. If this is just a useful project for me then so be it…but I hope this may be of some use to those starting a similar site - please let me know if it is!

I have also added commenting via Disqus, and KaTeX for displaying formulae…but I will make that another post!