From Zero to Website: How Easy It Is to Get Started with Zola

published:

tags: [ #zola, #static site generator, #web development, #tutorial, #getting-started, #zolanight ]

Dreaming of a fast, secure, and easy-to-manage website or blog? Look no further than Zola, a blazing-fast static site generator built with Rust. In this tutorial, I'll show you just how simple it is to go from zero to a fully functional website in minutes.

Let's dive in!

Step 1: Install Zola

First things first, you need Zola itself. It's a single binary, making installation a breeze.

For Arch Linux users:

sudo pacman -S zola

For macOS users (using Homebrew):

brew install zola

If you're on another operating system, check the official Zola documentation for detailed installation instructions.

Step 2: Create a New Website

Once Zola is installed, you can create a new site project with a single command:

zola init my-new-website
cd my-new-website

Zola will ask you a few questions, like your site's URL and whether you want a config.toml file (just hit Enter for the defaults for now). This command sets up the basic directory structure for your new site.

Step 3: Add a Zola Theme (Self-Plug: ZolaNight!)

A theme gives your Zola site its look and feel. There are many great themes available, but since you're here, why not try my very own minimalist and fast theme, ZolaNight?

First, add the theme to your project:

git init # If you haven't already
git submodule add https://github.com/mxaddict/zolanight.git themes/zolanight

Next, open your zola.toml file (created in Step 2) and tell Zola to use the new theme. You'll also need to define the taxonomies settings that the theme expects. Your zola.toml should look something like this:

# zola.toml
base_url = "http://example.com"
title = "My Awesome Zola Site"
theme = "zolanight"
taxonomies = [{ name = "tags" }]

[markdown.highlighting]
theme = "catppuccin-mocha"

Step 4: Add Your Content

A website isn't much without content! Zola uses Markdown files in the content directory. The ZolaNight theme provides example content files that you can copy and modify.

Copying Example Content

Navigate back to the root of your new Zola site and copy all the example content files and directories from the theme's content directory into your site's content directory:

cp -r themes/zolanight/content/* content/

This command copies the example homepage (_index.md), a sample regular page (regular-page.md), and an entire blog directory containing sample blog posts. You can now open these files in your content/ directory to customize their titles, descriptions, and main body text.

Step 5: Run "zola serve" and See Your Website

Now for the magic moment! To see your website locally, simply run:

zola serve

This command will start a local development server, usually accessible at http://127.0.0.1:1111. Open your web browser to this address, and you'll see your brand new Zola site, complete with the ZolaNight theme and your first content page!

Zola also includes live-reloading, so any changes you make to your content or configuration files will automatically update in your browser.

Conclusion

In just a few simple steps, you've installed Zola, set up a new project, integrated a theme, added content, and viewed it all locally. Zola's speed, simplicity, and powerful features make it an excellent choice for anyone looking to build a modern static website.

Happy Zola-ing!