Using Hugo to Serve a Static Website


Initial Install

Installing Hugo on MacOS (with homebrew):

brew install hugo

How to Update/Upgrade Hugo

brew upgrade hugo

Create Site

hugo new site the-best-static-website

Congratulations! Your new Hugo site is created in /Users/juan/websites/the-best-static-website.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
  Choose a theme from https://themes.gohugo.io/, or
  create your own with the "hugo new theme " command.
2. Perhaps you want to add some content. You can add single files
  with "hugo new /.".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Enter the newly created project directory, and pull in a theme.

cd the-best-static-website
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Add a Post

hugo new posts/my-first-post.md

Run the Development Site to Test Locally

hugo server -D

Example Post using TOML

+++
categories = ["Development"]
project_url = "https://github.com/gohugoio/hugo"
series = ["Websites are the Best"]
slug = "websites-r-best"
tags = ["Websites", "WWW"]
title = "Websites: The Definitive Guide"
+++

Publish the Site

Hugo Command Reference

hugo new site .                      # create new site in current dir
hugh new post/welcome.md             # create a new post
hugo server --watch [--buildDrafts]  # Run in server live-reload mode
hugo                                 # Generate a public directory using default theme
hugo --theme=my-theme                # ...or with a specific theme
hugo undraft post/welcome.md         # Un-draft a post (sets draft = "false" in front matter)

Questions about Hugo

Does Hugo support tags/categories?

Yes, via taxonomies: https://gohugo.io/content-management/taxonomies/.


Tags:  Hugo Static Sites

Comments:


Gravatar of Kyle Jones

Knowledge Base is a repository for various notes, guides, and thoughts on a wide range of IT related topics. Read more...

Sponsored By:


Web development services by Say Web Solutions. Visit website.