In Windows10, build personal website via Hugo-book and Github Actions

This is about how to use Hugo to create the local website, and then deploy it on GitHub via Github Action.

Prerequisites

Git
Windows 10
VScode
Github account

Install Hugo

In Windows10, right click Windows Powershell and click run as administrator.
Refer to How to install chocolatey in Windows to install chocolatey.
Refer to Install Hugo on Windows to install Hugo by

choco install hugo-extended

Make sure Hugo works well by

hugo version

and we will get the following

hugo v0.123.7-312735366b20d64bd61bff8627f593749f86c964+extended windows/amd64 BuildDate=2024-03-01T16:16:06Z VendorInfo=gohugoio

Create the website using Hugo themes

For example, I want to locally work on my website in C:\myweb folder. Still in Windows Powershell,

Navigate back to C: driver, and create a new folder by typing mkdir myweb.
Create the website by

hugo new site Blogs

cd Blogs
git init
Refer to Hugo Book Theme to use hugo-book theme by

git submodule add https://github.com/alex-shpak/hugo-book themes/hugo-book

Till now, if we run hugo server, we will get a plain website locally.

In VS code, open Blogs folder.

In C:/myweb/Blogs/themes/hugo-book/exampleSite/content.en/, copy docs folder, posts folder and _index.md file to C:/myweb/Blogs/content/.

Why I don't copy the menu folder?
Because I found menu folder doesn't work when I modified the website as I needed. We can customize the order of menus in leftbar by adding weight in the name.md file. For example, in each name.md file, the parameter weight determine the order of menues.
---
weight: 1
title: One name.md file
---

Run hugo server again, we will see a more well-done website.

Deploy on Github by Action

Create a public Github repository.

For example, if this repository's name is Blogs, your website link will be like this https://huilin-li.github.io/Blogs/

Still in Windows Powershell, push your local work to this repository by

cd C:/myweb/Blogs
git add .
git commit -m "update"
git branch -M main
git remote add origin https://github.com/Huilin-Li/Blogs.git
git push -u origin main

Visit your GitHub repository. From the main menu choose Settings > Pages. In the center of your screen you will see this:

{{< figure src="../images/deploy1.png" width="400" alt="deploy1" >}}

Change the Source to GitHub Actions.
Click Configure as the highlight in this picture:

{{< figure src="../images/deploy2.png" width="400" alt="deploy2" >}}

Go to Host on GitHub Pages, copy the yaml file in step 6 to Blogs/.github/workflows/hugo.yaml, and commit changes.
As Step8, Step9, Step10 in Host on GitHub Pages, the deloyment is done. 🎉

Update website

Add more contents in C:/myweb/Blogs/content/ folder, and then git push to Github repository. Github Action will automaticaly update new contents in https://huilin-li.github.io/Blogs/.

Huilin's Book