Hugo Static Blog Site Github

  • vnull
  • Pub Dec 24, 2021
  • Edited Dec 27, 2022
  • 4 minutes read

Hugo Setup with git

This blog content is generated with Hugo static site generator and integrated with GitHub Pages. This post will step cover publishing and pushing the newest content to GitHub Pages.

Suggested reading Getting Started with Hugo:

Learn more on GitHub. Complete documentation is available at Hugo Documentation.

Step 1. Create Repositories on GitHub

Assumptions already familiar with git commands and GitHub.

Create two repos

Name Access Purpose
blog public Working local edits for changing adding content public Syncing output of public folder to github or web server

GitHub Pages

There are two types of GitHub Pages:

  1. User/Organization Pages https://<USERNAME|ORGANIZATION>
  2. Project Pages https://<USERNAME|ORGANIZATION><PROJECT>/

Step 2. Create New Site

With hugo command create new site blog and change into the directory:

hugo new site blog
cd to blog

Run initialize the directory as a git repository

git init

Initialized empty Git repository...

Add the github repository as a remote using git remote

Substitute <USERNAME> with your username.

git remote add origin<USERNAME>/blog.git
git fetch --all
git pull origin main

At this point need to choose a them to continue.

Step 3. Installation theme

Using the mainroad theme.

From the project’s blog root directory, run:

git clone themes/mainroad

If not planning to making any significant changes but want to track and update the theme, add it as a git submodule via the following command:
git submodule add themes/mainroad

Edit config.toml

Specify mainroad as default theme in the config.toml file.

theme = "mainroad"

Change baseurl baseurl = "" this is what will be pointing at the public part of the repo.

Make sure to end baseurl with a / and also confirm baseurl is set to Project Pages https://<USERNAME|ORGANIZATION><PROJECT>/ If any problems when publishing tweak until works.

Step 5. Preview site locally

From the project’s blog root directory, run:

hugo server

Watching for config changes in C:\..\..\blog\\config.toml
Web Server is available at http://localhost:1313/ (bind address

Open browser to http://localhost:1313

Step 4. Create New Posts

Syntax to create a new post: hugo new posts/

Create a post called hugo new posts/ this creates a directory named posts

Depending on the theme this might need to be updated in the configuration config.toml as might be reference as post.

Step 5. Production repo setup

In production repo need to make sure have one commit and main branch if this was not already done through GitHub Page.

If not added to remote repo then complete following or just add submodule

git clone<USERNAME>/
git checkout -b main
git add .
git commit -m "adding"
git push origin main

Add Submodule

From the project’s blog root directory add submodule, run:

git submodule add -b main<USERNAME>/ public
This might fail due to running hugo server cammand, just delete the public folder it will get recreated.
Step 6. Generate static files

Run with the theme used mainroad

hugo -t mainroad

Confirm public dir has been created.

├── archetypes
├── assets
├── config
├── config.toml
├── content
├── data
├── layouts
├── netlify.toml
├── **public**
├── resources
├── static
└── themes

Confirm remote repo has been added git remote -v:

git remote -v
origin<USERNAME>/ (fetch)
origin<USERNAME>/ (push)

Commit changes to production repo:

cd public 
git add .
git commit -m "init commit" 
git push origin main   
Step 7. GitHub Pages

From the<USERNAME>/ Settings page check Pages section and make sure Branch main /root is selected.

Check the actions page and can monitor the workflows deployment.



The setup is great now website under full source control, build it anytime and host it literally anywhere. That’s not the end of the story!

Do you have an idea or suggestion for a blog post? Submit it here!

Related Posts

2023 Phoenix VMUG UserCon

  • vnull
  • Sep 8, 2023
  • 4 minutes read

Introduction: The recent 2023 Phoenix VMUG UserCon brought together some like-minded people in the field, with discussions ranging from VMware technologies to best practices for optimizing existing systems.

Read more

Red Hat User Group Insights, Ansible Automation Platform, and ITSM Integration

  • vnull
  • Jun 1, 2023
  • 3 minutes read

Introduction: This blog post aims to summarize the key takeaways from this informative workshop. At the recent Red Hat User Group workshop on Red Hat Insights, Red Hat Ansible Automation Platform, and their integration with management (ITSM) systems, such as ServiceNow, provided valuable insights into how these technologies work together.

Read more

Robocopy Examples

  • vnull
  • Feb 10, 2023
  • 5 minutes read

Robocopy Examples Robocopy has many command line options and it can be overwhelming to know which commands to use. In this post, we will take a look at how to ues robocopy to copy, mirror, purge Files and Folders.

Read more