Create a Hugo Website and Deploy It with Vercel

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

Step 1: Set 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, set up a Hugo project with npx and move into the project directory.

npx degit zeit/now/examples/hugo my-hugo-project && cd my-hugo-project

Initializing a Hugo project with npx and moving into the project directory.

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

hugo server -D

Running the server locally with drafts enabled.

Step 2: Deploy Your Hugo Website with Vercel

There are two ways to deploy with Vercel. We recommend using a Vercel for Git Integration for ease-of-use. Alternatively, Vercel 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

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: Define a Hugo Version

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

{
  "build": {
    "env": {
      "HUGO_VERSION": "0.71.0"
    }
  }
}

An optional vercel.json configuration file that selects Hugo version 0.71.0 for the build step.