The day has finally come! I have mustered up time, strenght and willpower to move from Wordpress into something more exciting. You might argue that it’s unnecessary and that I could have continued with WP but the truth is that I wanted something more involved where I could get my hands dirty figuring out stuff. You can figure stuff out in Wordpress, edit the theme etc… But I was never a Wordpress fanboy because of bloat and all the PHP. You might think of this as ditching an old boring girlfriend for a new exciting one but…. PHP - do I need any more excuses?

Anyhow, I thank Wordpress for all it has done for me but it’s time to talk about Hugo! What made it attractive for me was the following:

  • Very lightweight and bloat-free
  • It compiles into a static site which can be hosted on S3
  • It is very fast to load pages
  • It is written in Go
  • It is not written in PHP
  • Very customizable
  • You can use Go and pure HTML to do almost anything
  • It’s opensource ❤️
  • It supports emojis 💩
  • It allows for writing posts in Markdown

The last one actually closed the deal for me for because being able to use Markdown for the posts was very appealing to me, for some unknown reason.

For those of you who don’t know - Hugo is actually one of the most popular open-source static site generators (or at least it says so on their home page). I do think that the web in general is becoming more bloaty every day so I really wanted to go back to simpler times and just have a fast static site that people can access over their phones and not lose all of their data in 3 page loads. Who am I kidding, there are no people coming to the site 😅

The look and feel

Currently, I have chosen one of Hugo’s many themes to get me started but I will definitely dig into Hugo more and try to build an even lighter site contain only what it needs. I am still very green when it comes to Hugo and Go. Awesome thing is … THERE IS DARK THEME! Yeah baby, everybody knows that dark theme gives you +3 on badassness (is that even a word?). We all know that the pro developers always use the dark theme since it allows for better code, sheesh…

But how does it werk?

It’s been some time since I wanted to dig into Github Actions and this was a perfect opportunity to automate the site deployment and setup a workflow for the entire writing proces. The steps are the following.

  • Write, write, write…
  • Push changes to main branch
  • Automation magic
  • Site is deployed

Automation MVP

I have a lot of things that I want to do in the pipeline but for now, I have made it simple, just to get the 1.0 out of the door. Below is the pipeline code that is used for deploying the site to S3. In the future, it will contain more steps, like compressing assets, maybe even pushing them to Cloudinary, checking for spelling mistakes, etc…

This is how the current build looks like:

---
name: Build and Deploy
on: push
jobs:
  build:
    name: Build and Deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install Hugo
        run: |
          HUGO_DOWNLOAD=hugo_extended_${HUGO_VERSION}_Linux-64bit.tar.gz
          wget https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/${HUGO_DOWNLOAD}
          tar xvzf ${HUGO_DOWNLOAD} hugo
          mv hugo $HOME/hugo          
        env:
          HUGO_VERSION: 0.81.0
      - name: Hugo Build
        run: $HOME/hugo -v
      - name: Deploy to S3
        if: github.ref == 'refs/heads/main'
        run: $HOME/hugo -v deploy --maxDeletes -1
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

Time since I push the code to Github and time until changes are reflected on the site are under 30s and the build finishes in 17 seconds on average. I have enabled caching on Cloudflare for better UX of the site so I still have to trigger a cache purge upon deploying the site which I will cover some other time.

DNS

The site sits behind Cloudflare so I almost get no hits to the S3 bucket since most of the requests are cached. This works great for my use case. I also don’t have to worry about managing SSL since it is done on Cloudflare level and I only whitelist their IPs in my bucket policy.

Going forward

I am very happy how things have turned out for the site refactoring and hoping to get more into the nuts and bolts of Hugo in the future and see what possiblities it allows for. Heck, I will even add a comments section if I see there is some traffic on the site. For that, I might need some Google Analytics, which can be another project… So yeah, as always, plenty of things to research and experiment with :)

Thanks for reading and keep on hacking!