rewriting the website from hugo to zola

2024-12-06

  1. Hugo felt too powerfull for my little blog application.
  2. sass is cool
  3. sourcehut is great to host static websites
  4. conclusion

Hey, haven’t heard from me in a bit?

Was busy with rewriting this website, living life and taking care of another website project that will probably slowly be merged into this blog.

But in the meantime I spent some time on figuring out zola and using that instead of hugo.

I’ve gotten it recommended and not really getting hugo I thought there is not too much that can go wrong with trying to figure it out, so I did. In the following are some thoughts I had along the way, not just with hugo but also hosting the site.

Hugo felt too powerfull for my little blog application.

Hugo works great, does its job fast and is reliable. But due to being great for situations in which thousands of websites are rendered it adds some complexity and other stuff that one really does not want to bother with when just writing on a little personal blog.

When e.g. in hugo you do most styling based on the name of the file and in which directory it is, in zola instead you have things in your metadata which is reasonable when you don’t have too many posts or such. Let me just show you the one of the current post:

+++
title = "rewriting the website from hugo to zola"
date = 2024-12-06
template = "blog-page.html"
+++

Here you have the usual title and date but also a template which is then configured in a template folder in the website root directory on the repository.

sass is cool

Never used it before but it’s a lot of fun and for obvious reasons that much better to write than plain css and due to in nature being the same, it is also very easily compilable into css to be used on the website.

sourcehut is great to host static websites

I’ve used github pages before to host this website but I grew tired of having to wait for slow and old azure-piplines to do their job, so let me share what is better about soucehut builds (their CI thing) and sourcehut pages.

Let us start with comparing the config files:

# Sample workflow for building and deploying a Hugo site to GitHub Pages
name: Deploy Hugo site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

# Default to bash
defaults:
  run:
    shell: bash

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.114.0
    steps:
      - name: Install Hugo CLI
        run: |
          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
      - name: Install Dart Sass
        run: sudo snap install dart-sass
      - name: Checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v3
      - name: Install Node.js dependencies
        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
      - name: Build with Hugo
        env:
          # For maximum backward compatibility with Hugo modules
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
        run: |
          hugo \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./public

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

Now the sourcehut one:

image: alpine/edge
packages:
  - hut
  - zola
oauth: pages.sr.ht/PAGES:RW
environment:
  site: d-re.xyz
sources:
  - https://git.sr.ht/~d-rens/zola
tasks:
  - build: |
      cd zola
      zola build
  - package: |
      cd zola
      tar -C public -cvz . > ../site.tar.gz
  - upload: |
      hut pages publish -d $site site.tar.gz

Now what you can see on the first look, without even reading it is that the github one is totally unreadable and unessesarily complicated.

With github pages or github workflows in general I never really understood them and always just copied them from somewhere else. With sourcehut I did the same because zola had documentation for it, but at least I can read it now and don’t get scared.

To also compare the build times, on sourcehut my zola takes around 10s to build and deploy wheras the same thing on github with hugo takes around a minute which is disappointing thinking about it now.

conclusion

Am very happy with my decisions there, will be using them for the following years and have fun with them.