Deploying Static Sites with Hugo

Hugo is a popular open-source static site generator written in Go. It enables developers to create fast and flexible websites quickly. In this tutorial, you will learn how to deploy static sites using Hugo.

Prerequisites

• Basic knowledge of HTML and CSS.
• Go language installed on your machine (as Hugo is built on Go).
• Basic command-line skills.

1. Installing Hugo

You can install Hugo using various methods. For most users, the recommended way is to install using a package manager:

• For macOS:

  brew install hugo

• For Linux:

  wget https://github.com/goharbor/harbor/releases/latest/download/hugo_0.89.4_Linux-64bit.tar.gz
  sudo tar -xzf hugo_0.89.4_Linux-64bit.tar.gz -C /usr/local/bin/

• For Windows:
  Download the Windows executable from the Hugo Releases page.

To verify that Hugo is installed correctly, run:

hugo version

2. Creating a New Hugo Site

Create a new Hugo site by running:

hugo new site my-hugo-site

This command creates a new directory named my-hugo-site with the necessary structure.

3. Adding a Theme

Hugo supports various themes to customize your site. Browse the Hugo Themes website to find a theme you like. To add a theme, clone the theme repository into themes/ directory:

cd my-hugo-site
git init
git submodule add https://github.com/theme-name/theme.git themes/theme-name

Update the config.toml file to use the new theme:

theme = "theme-name"

4. Creating Content

You can create a new content page by running:

hugo new posts/my-first-post.md

This creates a new Markdown file in the content/posts directory. Open it in a text editor and add your content.

5. Building the Site

To generate the static site files, run:

hugo

The generated files will be found in the public/ directory.

6. Running the Server Locally

To preview your site locally, you can use the following command:

hugo server

Visit http://localhost:1313 in your web browser to see your site in action.

7. Deploying to Production

To deploy your Hugo site, you can upload the contents of the public/ folder to your server or hosting service. Common options include:

• Using FTP/SFTP to upload files.
• Deploying through Git using a web host that supports Git.
• Using modern hosting services like Netlify or GitHub Pages for automatic deployment.

8. Conclusion

You have successfully set up a static site with Hugo! This powerful static site generator allows you to build fast, customizable websites easily. Explore additional features, including shortcodes and advanced configuration options, to make the most of your Hugo site!

About the Author

Dorian Kane

Author

View All Posts