This is the first project on here and it is about … this website! Creating this page was a project in itself, as I have never worked with Hugo before and only had limited experience with static site generators. At first, I was a bit confused by how hugo works, but I am happy to find out that so many Github stars could not lie and it seems to be a quite nice piece of software after all.

I am bad with doing projects, as I either do many of them at the same time (without finishing them), or move the goalpost further away and never feel like I finish. Often I do both at the same time. Therefore, to get better at projects, I want to do three things from now on:

• reduce the number of projects I do at one time
• define beforehand when I am done
• set the definition of “done” consciously low and pragmatic

This should help avoid project fatigue and result in me getting better at getting things done. Let’s see how this will go!

Getting started with Hugo

I knew a bit about static site generators, but not too much about Hugo. But I was intrigued to try it out, as many people seemed to like it. Hugo seems promising, as is it open-source, very fast, uses markdown (which is a language that many programs speak nowadays and therefore is future-proof), it is very expandable and hackable for my future needs to test out all kinds of shenanigans on here.

Getting started with Hugo was very easy, but I took a much longer time going through all the themes and deciding which one I liked. I had something in mind that was between digital minimalism and paperbook writer aestetic.

After going through basically all themes on Hugo’s website, there were only very few themes I really liked, and those I struggled to get them working (although this was also due to me not fully understanding how Hugo works). In the end, I decided to go on a little detour and create my own hugo theme: minimal-paper!

Creating a Hugo theme

With a mix of one Youtube video, a longer conversation about Hugo with a chatbot and just trying things out, starting to develop my own hugo theme was actually quite a nice process! At least for a learner like me (I see and I forget, I hear and I remember, I do and I understand), this was the best way of learning. Rather than using an overloaded theme with many features, creating my own allows me to start with a minimal working example (MWE) and slowly build ontop from there and understand every step I take. It takes a similar philosophy like Arch Linux, which I really enjoyed as well.

Luckily, when running hugo new theme, some example posts and files were generated, so I could start experimenting right away. With this, I also started to actually learn how Hugo works (here is a growing list of what I understand of Hugo).

Once I grasped the basic concepts of things like leaf and branch bundles, the templating, shortcodes, the context object ".", it was actually quite easy to modify the template files to my liking. As I set my bar for this first project intentionally low, I just did things like the following:

• Create three example lorem ipsum posts as a reference
• Minimal menu, title and footer
• Basic CSS styling
  • Set the color palette: ffcdb2, ffb4a2, e5989b, b5838d, 6d6875
  • Style headings
  • Style code pre blocks
  • better code styling
  • Style links
  • Center page horizontally
  • Remove the bullet points from the - [ ] checklists
• Edit homepage to include last 10 posts sorted
• Write the first post (this here!)
• Change the font to be nicer - Currently IBM Plex Mono

Deploy the site

Deploying this site was not too difficult for me, as I already have a lot of experience in hosting. A Hugo page is after building just static files, which makes it extra easy. For my selfhosting projects I often use docker containers, so I wanted to keep it this way for this project as well. I found this hugo container that seems to be maintained. On one of my rented servers, I just cloned the repository of this site, created the hugo container and copied the files inside.

This is the docker-compose.yml I used:

services:
  project-blog:
    image: floryn90/hugo:0.154.2
    user: "${UID}:${GID}"
    container_name: project-blog
    command: server
    volumes:
      - ".:/src"
    ports:
      - "1313:1313"

After this, I just needed to set the right DNS setting in my domain provider and forward the traffic in my reverse proxy to this container and voila, here is the website!

• Deploy on server (e.g. with this docker image)
• Think of domain -> phorical.io for now
• Add a favicon
• Create way to push new posts (maybe for the first version, a git pull is enough)

Summary

This was my first project that I captured on this blog. In summary, I would say it was … great! I had a lot of fun working on it and many hours I spent in a state of flow. I definitely did not lack motivation to work on this, rather the opposite and went straight back to it after waking up. If anything, I think I was getting a bit too deep into the project and played around with CSS and some styling too much, especially as that level of styling was not in my definition of done. Also, I am not sure if I really needed to push for a custom font so early already. When I get this focused, I tend to forget the world around me (and its responsibilities), which has its downsides as well. So next project, I could improve on this. In total, I think I spent around ~20h of work on this. Next time, I would like to count the time better and be stricter in staying with my definition of done.

What I learned

• Deeper understanding of static site generators in general and of Hugo in particular
• I would say it was a good exercise in fast prototyping and not being perfectionist (as there are still many things I would like to change)

Ideas for future improvements

Of course, while working on the site, I had numerous ideas of what I would like to do. Here are all that I managed to write down.

• Rename tags to topics
• Rename posts to projects
• Have more metadata on projects
• Counter on homepage for finished projects
• p5 support
• Host it on Raspberry Pi / ESP32

And as it might be interesting for the future, here is a screenshot of how it looked on launch:

–

But now I am done with it and this needs to be celebrated with a little GIF :)