How To Build a Static Website With Hugo

HUGO

What Is Hugo?

Hugo is a powerful static site generator written in Go, optimized for speed and flexibility. It boasts an advanced templating system and fast asset pipelines, allowing you to render a complete site in seconds.

Why Choose Hugo?

Hugo’s flexibility and multilingual support make it ideal for various types of sites, including:

• Corporate, government, nonprofit, and education sites
• Documentation sites
• Image portfolios
• Landing pages
• Business, professional, and personal blogs
• Resumes and CVs

How to Install Hugo

Ubuntu/Debian:

sudo apt install hugo

Arch:

sudo pacman -S hugo

Fedora:

sudo dnf install hugo

To verify your installation, run:

hugo version

You should see output similar to:

hugo v0.123.7+extended linux/amd64 BuildDate=2024-07-16T05:50:19Z VendorInfo=ubuntu:0.123.7-1ubuntu0.1

Hugo Commands and Configuration

Before creating your site, familiarize yourself with these essential Hugo CLI commands:

hugo check – Runs verification checks

hugo new – Creates new content

hugo server – Starts a local development server

hugo version – Displays the current Hugo version

Use hugo help to see all available commands and flags.

The Hugo Configuration File:

Hugo’s configuration file can be in YAML, TOML, or JSON format. Here’s an example configuration in TOML:

baseURL = "https://example.com/"
languageCode = "en-us"
title = "My Hugo Site"
theme = "LoveIt"

How To Create a Hugo Site

Create a new site with:

hugo new site my-hugo-site

• Navigate to your site directory, where you’ll find folders like config.toml, archetypes, content, layouts, themes, data, and static.

Key Directories

• config.toml: Contains global settings for your site.
• archetypes/: Holds content templates in Markdown, useful for different content types.

Example of a posts archetype:

+++
title = ''
date = 2024-08-11T19:16:39+05:30
draft = false
description = ""
+++

Create a new post using:

hugo new posts/first_post.md

How To Add a Theme to a Hugo Site

Use the LoveIt theme, or choose another from Hugo Themes:

Option 1: Clone the Theme

git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt

Option 2: Use as a Submodule

git init
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt

Activate the theme in config.toml:

theme = "LoveIt"

How To Preview a Hugo Site

Start the webserver:

hugo server -D

Visit http://localhost:1313/ in your browser to see your site with real-time updates.

How To Deploy a Hugo Site to GitHub

Update your config.toml:

baseURL = "https://username.github.io/repo_name/"
publishDir = "docs"

Deploy your site:

git add docs/ themes/ hugo.toml
git commit -m "Initial commit"
git remote add origin https://github.com/username/repo_name.git
git branch -M main
git push -u origin main

Configure GitHub Pages settings:

• Go to your GitHub repository.
• Navigate to Settings > Pages.
• under Source Deploy from a branch
• Under “Branch,” select main branch and /docs folder.
• Click “Save.”

This guide covers setting up Hugo and deploying your site to GitHub. However, when creating your content, you will need to familiarize yourself with Markdown and visit the Hugo documentation for more details.