This guide shows you how to deploy a Hugo 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 hugo
# or
port install hugo

To verify your new install:

hugo version

hugo new site quickstart

See themes.gohugo.io for a list of themes to consider. This quickstart uses the beautiful Ananke theme.

First, download the theme from GitHub and add it to your site's themes directory:

cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Note for non-git users:

Then, add the theme to the site configuration:

echo theme = \"ananke\" >> config.toml

You can manually create content files (for example as content/<CATEGORY>/<FILE>.<FORMAT>) and provide metadata in them, however you can use the new command to do a few things for you (like add title and date):

hugo new posts/my-first-post.md

hugo server -D

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

{
  "name": "hugo",
  "version": "1.0.0",
  "scripts": {
    "build": "hugo -D",
    "deploy": "0 deploy"
  },
  "dependencies": {},
  "devDependencies": {}
}

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 Hugo.

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