Edgio
Edgio Console

Hugo

This guide shows you how to deploy a Hugo application to Edgio.

Example

View the Code

Prerequisites

Setup requires:

Install the Edgio CLI

If you have not already done so, install the Edgio CLI.
Bash
1npm i -g @layer0/cli@latest

Create a new Hugo app

Step 1: Install Hugo

Bash
1brew install hugo
2# or
3port install hugo
To verify your new install:
Bash
1hugo version

Step 2: Create a New Site

Bash
1hugo new site quickstart

Step 3: Add a Theme

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:
Bash
1cd quickstart
2git init
3git 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:
Bash
1echo theme = \"ananke\" >> config.toml

Step 4: Add Some Content

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):
Bash
1hugo new posts/my-first-post.md

Step 5: Start the Hugo server

Bash
1hugo server -D

Configuring your Hugo app for Edgio

Create a package.json at the root of your project with the following:
JSON
1{
2  "name": "hugo",
3  "version": "1.0.0",
4  "scripts": {
5    "build": "hugo -D",
6    "deploy": "0 deploy"
7  },
8  "dependencies": {},
9  "devDependencies": {}
10}

Initialize your project

In the root directory of your project run 0 init:
Bash
10 init
This will automatically update your package.json and add all of the required Edgio dependencies and files to your project. These include:
  • The @layer0/core package - Allows you to declare routes and deploy your application on Edgio
  • 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 Edgio
  • routes.js - A default routes file that sends all requests to Hugo.

Configure the routes

Update routes.js at the root of your project to the following:
JavaScript
1// This file was added by layer0 init.
2// You should commit this file to source control.
3

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

6export default new Router()
7  // Prevent search engine bot(s) from indexing
8  // Read more on: https://docs.layer0.co/applications/cookbook#blocking-search-engine-crawlers
9  .noIndexPermalink()
10  .static('public', ({ cache }) => {
11    cache({
12      edge: {
13        maxAgeSeconds: 60 * 60 * 60 * 365,
14        forcePrivateCaching: true,
15      },
16      browser: {
17        maxAgeSeconds: 0,
18        serviceWorkerSeconds: 60 * 60 * 24,
19      },
20    })
21  })
Refer to the Routing guide for the full syntax of the routes.js file and how to configure it for your use case.

Run the Hugo app locally on Edgio

Create a production build of your app by running the following in your project’s root directory:
Bash
1npm run build
Test your app with the Sites on your local machine by running the following command in your project’s root directory:
Bash
10 dev
Load the site http://127.0.0.1:3000

Deploying

Create a production build of your app by running the following in your project’s root directory:
Bash
1npm run build
Deploy your app to the Sites by running the following command in your project’s root directory:
Bash
10 deploy
Refer to the Deploying guide for more information on the deploy command and its options.