This guide shows you how to deploy a Zola application on Layer0.

Deploying requires an account on Layer0. Sign up here for free.

If you have not already done so, install the Layer0 CLI

npm i -g @layer0/cli

brew install zola
# or
sudo port install zola

To verify your new install:

zola --version

zola init myblog

You will be asked a few questions.

> 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]:

For our blog, let's accept the default values (i.e., press Enter for each question). We now have a myblog directory with the following structure:

├── config.toml
├── content
├── sass
├── static
├── templates
└── themes

For reference, by the end of this overview, our myblog directory will have the following structure:

├── config.toml
├── content/
│   └── blog/
│       ├── _index.md
│       ├── first.md
│       └── second.md
├── sass/
├── static/
├── templates/
│   ├── base.html
│   ├── blog-page.html
│   ├── blog.html
│   └── index.html
└── themes/

Let's start the Zola development server with:

$ zola serve
Building site...
-> Creating 0 pages (0 orphan), 0 sections, and processing 0 images

Create a package.json at the root of your project with the following:

npm init

In the root directory of your project run 0 init:

0 init

This will automatically update your package.json and add all of the required Layer0 dependencies and files to your project. These include:

  • The @layer0/core package - Allows you to declare routes and deploy your application on Layer0
  • The @layer0/prefetch package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed
  • layer0.config.js - A configuration file for Layer0
  • routes.js - A default routes file that sends all requests to Zola.

Update routes.js at the root of your project to the following:

// This file was added by layer0 init.
// You should commit this file to source control.

import { Router } from '@layer0/core/router'

export default new Router().static('public', ({ cache }) => {
  cache({
    edge: {
      maxAgeSeconds: 60 * 60 * 60 * 365,
      forcePrivateCaching: true,
    },
    browser: {
      maxAgeSeconds: 0,
      serviceWorkerSeconds: 60 * 60 * 24,
    },
  })
})

Refer to the Routing guide for the full syntax of the routes.js file and how to configure it for your use case.

Create a production build of your app by running the following in your project's root directory:

npm run build

Run Layer0 on your local machine:

0 dev

Load the site http://127.0.0.1:3000

Create a production build of your app by running the following in your project's root directory:

npm run build

Next, deploy the build to Layer0 by running the 0 deploy command:

0 deploy

Refer to the Deploying guide for more information on the deploy command and its options.

Edit this guide on GitHub