Deploy static site using netlify and zola

Netlify is a popular platform for hosting static sites, and it integrates seamlessly with Zola, a fast and user-friendly static site generator. This article will guide you through deploying your Zola site to Netlify, giving you a quick and easy way to share your creation with the world.

Setting Up Your Zola Project

Before diving into Netlify, ensure you have a Zola project ready. If you’re new to Zola, head over to their official documentation to get started with creating a new project and populating it with content.

Initializing and setting up site in local

To initialize the site in local you can run the following:

$ zola init local-site

The initializer command will ask few question. Configure these as per your requirement.

> What is the URL of your site? (https://example.com):
> Do you want to enable Sass compilation? [Y/n]:
> Do you want to enable syntax highlighting? [y/N]:
> Do you want to build a search index of the content? [y/N]:

Once inside the project directory cd local-site. Run the following command to build and run your site in local.

$ zola build
$ zola serve

Output of above command would be like below:

Building site...
Checking all internal links with anchors.
> Successfully checked 0 internal link(s) with anchors.
-> Creating 0 pages (0 orphan) and 0 sections
Done in 16ms.

Listening for changes in /home/<username>/<project>/local-site/{config.toml,content,sass,static,templates}
Press Ctrl+C to stop

Web server is available at http://127.0.0.1:1025

If everything went well. You will be able to access your static site on the above mentioned address i.e http://127.0.0.1:1025.

Browsing Zola themes

You may visit the Zola Themes page to browse and choose a suitable theme for your website. Detailed configuration instructions for each theme can be found on the respective themes page. For this article, we will be using the theme “Boring” as an example.

Installing theme

To install theme run the following command from your project directory.

git init
git submodule add https://github.com/ssiyad/boring themes/boring

Build CSS

cd themes/boring
yarn install --frozen-lockfile
yarn build

Copy following theme files to root project directory

1. themes/boring/static/
2. themes/boring/templates/
3. themes/boring/css/
4. themes/boring/content/

Run site in local

Run following command from root project directory.

zola serve

Netlify deployment

• Move site to Git provider: Push your site to any of your preferred Git providers like Github, Gitlab, and Bitbucket.

• Netlify Account: If you don’t have one already, create a free Netlify account https://www.netlify.com/.

• New Site: Log in to Netlify and click on “New site” to create a new project.

• Connect to Git: Netlify offers integration with various Git providers like GitHub, GitLab, and Bitbucket. Choose your preferred provider and connect Netlify to your Zola project repository.

• Deployment Configuration (Optional): While Netlify can automatically detect Zola projects, you can create a netlify.toml file in your project’s root for more control. This file allows you to specify the Zola version and other build configurations https://www.getzola.org/documentation/deployment/netlify/. The basic configuration looks like this:
  

[build]
publish = "public"
command = "zola build"

[build.environment]
ZOLA_VERSION = "your_desired_zola_version" # Optional: Specify Zola version

• Deployment: Once the connection with your Git repository is established, Netlify will monitor your project for changes. Any push to your main branch (usually named “main” or “master”) will trigger Netlify to rebuild your site using the zola build command and deploy the generated content in the public directory.

• Custom domain: Go to domain managenent section for your site on Netlify to setup your custom domain.

Previewing and Going Live

Netlify provides a preview URL for your site during development. This lets you see how changes look before they go live. Once you’re happy with your deployment, Netlify offers a simple toggle to publish your site to a custom domain name or a free Netlify subdomain.

With these steps, your Zola site should be up and running on Netlify! Netlify offers additional features like environment variables, build plugins, and custom headers, allowing you to further customize your deployment process. Refer to the official Netlify documentation for a deeper dive into these functionalities https://docs.netlify.com/site-deploys/create-deploys/.