Create a Hugo Website and Deploy It with Now

Learn how to create a Hugo website and deploy it live with ZEIT Now

Hugo is a very popular framework for creating static websites. It's fast and flexible.

In this guide, we will walk you through setting up a Hugo website and deploying it with ZEIT Now.

Step 1: Setting Up Your Hugo Project

To get a Hugo project running, you need to install a precompiled binary on your machine. Hugo currently provides pre-built binaries for macOS, Windows, and Linux.

Therefore, you can either download the appropriate version for your machine from the GitHub releases or install it via your machine's package manager.

For macOS users, you can install Hugo via Brew:

brew install hugo

Installing Hugo CLI via Homebrew.

For Windows users, you can install Hugo via Chocolatey:

choco install hugo-confirm

Installing Hugo CLI via Chocolatey.

Next, run the following command to create a Hugo project via the CLI:

hugo new site my-hugo-project

Creating a new Hugo project via the CLI.

You can add a theme to beautify the newly created site. cd into the my-hugo-project directory and run the following command to add a theme:

git init && git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Download a new theme to the Hugo project.

The next step is to activate the theme. From your terminal, add the ananke theme to the config.toml file.

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

Edit your config.toml configuration file, and add the theme

Create Some Content

You can add some content to the Hugo project by running the following command:

hugo new posts/my-first-post.md

Creating a new post in the Hugo project via the CLI.

Once you are done running the command, edit the my-first-post.md file and add the following content below the generated metadata:

## Deploying Hugo with ZEIT Now

You can now see your project running locally with the following command:

hugo server -D

Running the server locally with drafts enabled

Step 2: Deploying Your Hugo Website with Now

Your Hugo website is ready for deployment. Create a now.json configuration file in the project directory and add the following content.

{
  "version": 2,
  "name": "my-hugo-project",
  "builds": [
    {
      "src": "build.sh",
      "use": "@now/static-build",
      "config": { "distDir": "public" }
    }
  ]
}

A now.json configuration file that builds a Hugo project.

The now.json file allows you to achieve a few things with your deployment:

  • Defines a version property to ensure you are using the latest Now 2.0 platform version.
  • Defines a project name that your deployments will be sorted under and known by under Now.
  • The builds property allows Now to use a Builder with a specific source target. We used the @now/static-build to build and deploy a static project. This module takes the build.sh file as the entry point in this case, executes the commands inside the shell file, and exposes the resulting public directory as the build output for serving.
  • The distDir option in the build step instructs Now to identify public as the static folder and build output directory.

Now, create the build.sh file in the my-hugo-project root directory and add the following code to it:

yum install -y wget

wget https://github.com/gohugoio/hugo/releases/download/v0.31.1/hugo_0.31.1_Linux-64bit.tar.gz
tar -xzf hugo_0.31.1_Linux-64bit.tar.gz

./hugo

A build.sh shell file containing commands to install and run Hugo on Now

And with this configuration set up, you can now deploy your Hugo project.

Note: Before deploying, ensure the draft value in your my-first-post.md file is set to false. If it remains as true, the content of your posts won't show up in production.

If you have don't have Now CLI on your system, you can install it via the Now Desktop, which is the easiest way to get started with Now. You can also install the Now CLI with npm as follows: npm install -g now.

Then, you can deploy from your terminal with just one command:

now

Otherwise, if you want your application to deploy automatically, you can install the Now for GitHub app and have updates for your GitHub repository deploy and alias on every push.

When your app is deployed, you will receive a deployment URL like the following: https://my-hugo-project-9c5t1giwu.now.sh/

Bonus: Cache Your Hugo Assets

Caching makes your site fast and reduces bandwidth consumption for your users and cost for you. You can configure Now's routes within your now.json configuration file to set up caching headers.

In the now.json configuration file, add the following routes property:

{
  ...
  "routes": [
    {"src": "^/dist/js/(.*)", "headers": {"cache-control": "public,max-age=31536000,immutable"} },
    {"src": "^/dist/css/(.*)", "headers": {"cache-control": "public,max-age=31536000,immutable"} },
    {"src": "^/images/(.*)", "headers": {"cache-control": "max-age=31536000,immutable"} },
    {"src": "^/(.*).html", "headers": {"cache-control": "public,max-age=0,must-revalidate"} }
  ]
}

Routes configuration for setting caching headers in a now.json configuration file.

Resources

For more information on working with Hugo, please refer to their documentation.

To configure Now further, please see these additional topics and guides:


How Was This Guide?

Written By
Written by unicodeveloperunicodeveloper
on February 20th 2019