Working with zola on codespace

Introducing the challenge

Recently, I completely downsize my 2.500€ gaming computer for a 300€ chromebook. I stopped gaming, and wanted both the space and money back ! Rest assured, I still have a nice desk a second monitor, I'll stay healthy.

With such a limited computer, you can't do much. I knew it was bad, but rust compilation times were really bad. Then, the question arose : how to use a cloud based editor so that my terminal doesn't matter ? As long as I have internet and a navigator, I can code ! I confirmed it on my tablet and even on my phone. Some fridges might be able to do the same 🤣

I really like Zola but I feel like tutorials are lacking. Thankfully, I found a way to make it work, and I'll share my way with you.

My take on it

Setting up codespace

Important

If you don't want to read, you can skip right to each of the videos.

1

I create an empty github repository, with at least a readme.md in it. It allows easier setup on github that links codespaces to repositories. You can totally use an existing repository.

2

I create a new codespace, and remove the autodelete feature. Since we need rust and zola available, we can't afford to wait the time it takes to install both of these more than once.

3

Inside the codespace, I install rust with the standard Rustup installer.

I then open a new terminal to enjoy the newly added binaries

4

I install zola. Codespaces are limited : you don't have the full package installer. Therefore, I chose to use a failproof path : compile the sources locally. Be warned, the compilation takes a few minutes. Here are the commands :

git clone https://github.com/getzola/zola.git
cd zola
cargo install --path . --locked
zola --version

5

Once everything is installed, I open a new terminal once again and check if zola is well installed with type zola

6

Now that zola is installed, you can start creating your own static website. Here, I use Duckquill. Here are the commands (don't forget to be on the project directory) :

git clone https://codeberg.org/daudix/duckquill.git themes/duckquill
cd themes/duckquill
git checkout tags/v4.5.0

Naturally, you'll want to go to the duckquill installation section and use the latest one.

Tip

Here, I modify the .gitignore to not commit the themes/ folder. However, I leave the public folder to be commited, since it matches how I setup my CI/CD pipeline. There should be an easier way to do it, by getting the pipeline to run zola build but I'm kinda too lazy to figure that one out, and way the extra minutes it takes to have a builder process that has zola installed.

7

In the recording, I make a small mess : I come back to the project folder, and then copies pretty much everything from the theme to quickly get something working. You can and should not do that and instead build your website slowly but well from there on. The logic of zola is quite simple. It will try to find a certain file. If it fails, it will go in your theme and try to find the same file. With this logic, it's really easy to use :

8

To build, there is the zola build command.

To have an interactive development experience, you can use zola serve -u /. That -u / is really necessary since codespace is kinda confused about urls without it. Even like that, there are some problems.

However, once the website is deployed at the final location, everything should be going well.

Bonus : Setting-up the CI/CD pipeline

My CI/CD is so simple it's boring :

Tip

You are probably better of using github pages but I already had bought the domain so...

Warning

Yes, this is simple and fast, but it has a big drawback ! If you don't pay attention, you might push a corrupted /public folder. That's why I always need to run zola build before making a commit.

# This is a basic workflow that is manually triggered

name: Deplopy to LWS

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "greet"
  deploy:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:

    - name: 🚚 Get latest code
      uses: actions/checkout@v4
    
    - name: 📂 Sync files
      uses: SamKirkland/FTP-Deploy-Action@v4.3.5
      with:
        server: ${{ secrets.ftp_address }}
        username: ${{ secrets.ftp_username }}
        password: ${{ secrets.ftp_password }}
        local-dir: ./public/

You'll need to setup your secrets in the github project, naturally.

I hope you had a good read. This article is mostly written as a thanks to the zola community, and I hope it'll encourage you to use it and eventually contribute to a theme (yours?) or directly to the zola project. Have a nice day 👋

Go to Top