How to Use Hugo Static Site Generator with Github Pages

by

Hugo is a popular static site generator known for its speed and flexibility. Using Hugo with GitHub Pages allows you to host a fast, reliable website for free. This guide will walk you through the steps to set up Hugo and deploy your site on GitHub Pages.

Prerequisites

  • A GitHub account
  • Basic knowledge of Git and command line
  • Hugo installed on your computer

Step 1: Install Hugo

Download and install Hugo from the official website (https://gohugo.io/getting-started/installing/). Verify the installation by running hugo version in your terminal.

Step 2: Create a New Site

Open your terminal and run the following commands:

hugo new site my-hugo-site
cd my-hugo-site

Step 3: Add a Theme

Choose a theme from the Hugo themes directory (https://themes.gohugo.io/). Follow the theme’s instructions to install it, typically by cloning the theme into the themes directory and updating your config.toml.

Step 4: Build Your Site

Customize your site by editing the config.toml and adding content in the content folder. Once ready, generate the static files with:

hugo

Step 5: Prepare for Deployment

Hugo will generate your site in the public folder. To deploy on GitHub Pages, create a new repository named yourusername.github.io. Initialize a git repository inside your site folder:

git init
git add .
git commit -m "Initial commit"

Step 6: Push to GitHub

Add the remote repository and push your site:

git remote add origin https://github.com/yourusername/yourusername.github.io.git
git branch -M main
git push -u origin main

Step 7: Configure GitHub Pages

Go to your repository settings on GitHub. Under the “Pages” section, select the main branch and root folder. Save the settings. Your site will be live at https://yourusername.github.io within minutes.

Conclusion

Using Hugo with GitHub Pages is an efficient way to host static websites. With fast build times and easy deployment, it’s ideal for personal projects, blogs, and documentation sites. Follow these steps to get started and customize your site to suit your needs.