How to Create a Static Website with Zola

Zola is a fast static site generator written in Rust. It is easy to use and highly customizable. In this tutorial, we will walk through the steps to create a static website using Zola.

Step 1: Install Zola

First, you need to install Zola. You can download the latest version from the official Zola website.

For macOS users, you can use Homebrew:

brew install zola

For Windows users, download the executable from the releases page and add it to your PATH.

Step 2: Create a New Site

Once Zola is installed, you can create a new site by running:

zola init mysite

This command will create a new directory called mysite with the basic structure of a Zola site.

Step 3: Build and Serve the Site

Navigate to your new site directory:

cd mysite

To build the site, run:

zola build

To serve the site locally, run:

zola serve

This command will start a local server at http://127.0.0.1:1111 where you can view your site.

You can customize your site by editing the configuration file config.toml and adding content to the content directory. Zola uses Markdown for content files, making it easy to write and format your posts.

Step 5: Deploy Your Site

Once you are happy with your site, you can deploy it to any static hosting provider. The zola build command generates static files in the public directory, which you can upload to your hosting provider.

Step 6: Deploy to Hostinger

To deploy your Zola site to Hostinger, follow these steps:

Build your site: Make sure your site is built and the static files are generated in the public directory.
```
zola build
```
Log in to Hostinger: Go to Hostinger and log in to your account.
Access the File Manager: In the Hostinger control panel, navigate to the File Manager.
Upload your site: In the File Manager, navigate to the public_html directory. Upload all the files from the public directory of your Zola site to the public_html directory on Hostinger.
Verify your site: Once the upload is complete, you can visit your domain to see your Zola site live.

Checkpoint!

If you already own a domain, ensure that you set the correct base_url in your config.toml file.

Step 7: Automate Deployment with GitHub CI/CD

You can automate the deployment of your Zola site to Hostinger using GitHub Actions. Here’s how:

Snippet

https://gist.github.com/khuongdo/8739407fbf15d19648a68b45e2e6067a

Let's take a look into the workflow.

Create a new file in your repository at .github/workflows/deploy.yml with the following content:

name: Deploy Blog

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        # This step checks out the repository so the workflow can access the code.

      - name: Install Zola
        uses: taiki-e/install-action@v2
        with:
          tool: zola@0.19.1
        # This step installs Zola, specifying the version to use.

      - name: Build
        run: zola build
        # This step builds the site using Zola.

      - name: Deploy
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ vars.HOSTINGER_FTP_SERVER }}
          username: ${{ vars.HOSTINGER_FTP_USERNAME }}
          password: ${{ secrets.HOSTINGER_FTP_PASSWORD }}
          local-dir: public/
          server-dir: ${{ vars.HOSTINGER_FTP_DIR }}
        # This step deploys the built site to Hostinger using FTP.

Set Up Secrets and Variables

In your GitHub repository, go to Settings > Secrets and variables > Actions and add the following:

Secrets:
- HOSTINGER_FTP_PASSWORD: Your Hostinger FTP password.
Variables:
- HOSTINGER_FTP_SERVER: Your Hostinger FTP server address.
- HOSTINGER_FTP_USERNAME: Your Hostinger FTP username.
- HOSTINGER_FTP_DIR: The directory on the server where you want to deploy your site.

Now, every push to the main branch will trigger the deployment process, automating the deployment of your Zola site to Hostinger.

Table of Contents