Hugo

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

Example #

System Requirements #

• Install Node.js 16.16.0

Sign up for Edgio #

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

Install the Edgio CLI #

If you have not already done so, install the Edgio CLI.

1npm i -g @edgio/cli

Create a new Hugo app #

Step 1: Install Hugo #

1brew install hugo

To verify your new install:

1hugo version

Step 2: Create a New Site #

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:

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

Note for non-git users:

• If you do not have git installed, you can download the archive of the latest version of this theme from: https://github.com/theNewDynamic/gohugo-theme-ananke/archive/master.zip
• Extract that .zip file to get a “gohugo-theme-ananke-master” directory.
• Rename that directory to “ananke”, and move it into the “themes/” directory.

Then, add the theme to the site configuration:

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

1hugo new posts/my-first-post.md

Step 5: Start the Hugo server #

1hugo server -D

Configuring your Hugo app for Edgio #

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

1{
2  "name": "hugo",
3  "version": "1.0.0",
4  "scripts": {
5    "build": "hugo -D",
6    "deploy": "edgio deploy"
7  },
8  "dependencies": {},
9  "devDependencies": {}
10}

Initialize your project #

In the root directory of your project run edgio init:

1edgio init

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

• The @edgio/core package - Allows you to declare routes and deploy your application on Edgio
• The @edgio/prefetch package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed
• edgio.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:

1// This file was added by edgio init.
2// You should commit this file to source control.
3
4import {Router} from '@edgio/core/router';
5
6export default new Router()
7  // Create serveStatic route for each file in the folder public with a cache-control header of 's-maxage=315360000'
8  .static('public');

Refer to the CDN-as-code 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:

1npm run build

Test your app with the Sites on your local machine by running the following command in your project’s root directory:

1edgio 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:

1npm run build

Deploy your app to the Sites by running the following command in your project’s root directory:

1edgio deploy

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