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:
Installing Hugo CLI via Homebrew.
For Windows users, you can install Hugo via Chocolatey:
Installing Hugo CLI via Chocolatey.
Next, run the following command to create a Hugo project via the CLI:
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:
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.
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:
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:
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 thebuild.sh
file as the entry point in this case, executes the commands inside the shell file, and exposes the resultingpublic
directory as the build output for serving. - The
distDir
option in the build step instructs Now to identifypublic
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:
#!/usr/bin/env bash curl -L -O https://github.com/gohugoio/hugo/releases/download/v0.55.6/hugo_0.55.6_Linux-64bit.tar.gz tar -xzf hugo_0.55.6_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.
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:
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/
Resources
For more information on working with Hugo, please refer to their documentation.
To configure Now further, please see these additional topics and guides: