Deploying a Hugo Site to GitHub: A Step-by-Step Guide

Introduction

Hugo is a powerful static site generator that enables you to create fast, customizable websites. In this tutorial, you’ll learn how to set up Hugo and publish your site to GitHub.

Prerequisites

Before you begin, make sure you have the following installed:

Step 1: Install Hugo

# macOS (Homebrew)
brew install hugo

# Windows (Chocolatey)
choco install hugo

# Linux (Snap)
sudo snap install hugo

Verify installation by running:

hugo version

Step 2: Create a New Hugo Site

hugo new site mysite
cd mysite

Add a theme (e.g., ananke):

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

Create a new page:

hugo new posts/my-first-post.md

Start the local development server:

hugo server -D

Open http://localhost:1313/ in your browser to view the site.

Step 3: Initialize Git and Push to GitHub

Create a new repository on GitHub (e.g., mysite).

Initialize a Git repository inside your Hugo project:

git init
git remote add origin https://github.com/yourusername/mysite.git

Add and commit your files:

git add .
git commit -m "Initial commit"
git push -u origin main

Step 4: Deploying to Cloudflare Pages

Log in to your Cloudflare dashboard and navigate to Pages.
Click Create a Project and select Connect to GitHub.
Authorize Cloudflare to access your GitHub account and select your Hugo site repository.
Configure the build settings:

Framework preset: Choose Hugo.
Build command: hugo
Output directory: public

Click Save and Deploy. Cloudflare will begin the deployment process.
Once deployed, you’ll receive a unique Cloudflare Pages URL where your site is hosted.
Optionally, configure a custom domain through Cloudflare’s settings.

Conclusion

You have successfully set up a Hugo site, published it to GitHub, and deployed it using Cloudflare Pages! Now you can focus on creating content while Cloudflare handles your site’s hosting. Happy publishing!