Create a Hugo Website and Deploy It with ZEIT Now

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 (within the contents/posts directories) 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

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.

Step 2: Deploying Your Hugo Website with ZEIT Now

There are two ways to deploy with ZEIT Now. We recommend using a ZEIT Now for Git Integration for ease-of-use. Alternatively, Now CLI can be used to generate a manual Preview Deployment.

Once deployed, you will get a URL to see your site live, such as the following: https://hugo.now-examples.now.sh


To deploy your Hugo site with a ZEIT Now for Git Integration, make sure it has been pushed to a Git repository.

Import the project into ZEIT Now using your Git Integration of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the default branch (commonly "master") will result in a Production Deployment.

Set up a Hugo site with a few clicks using the Deploy button, and create a Git repository for it in the process for automatic deployments for your updates.

Optional: Defining a Hugo Version

If you want to use a specific version of Hugo, you can create a now.json file containing aHUGO_VERSION build environment variable.

{
  "build": {
    "env": {
      "HUGO_VERSION": "0.61.0"
    }
  }
}

An optional now.json configuration file that selects Hugo version 0.61.0 for the build step.



Written By
Written by unicodeveloperunicodeveloper