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 vercel/vercel/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

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

Import the project into Vercel 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 Production Branch (commonly "main") will result in a Production 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.