Build a Personal Blog—3. Deploying with GitHub Pages

We aim to host the static website generated by Hugo using GitHub Pages service, which allows us to avoid maintaining our own server and ensures more stability and security. Therefore, we need to upload the static web files generated by Hugo to the GitHub Pages repository.

1. Prepare the GitHub Repository

#

1. After logging in, click the top right corner to open the drop-down menu, then click on “Your repositories” to access the page.

2. Click on “New”

3. On the “Create a new repository” page:

4. Create two new repositories: one named username.github.io to host the public site, where username is your GitHub username. Additionally, create another private repository named my_site_source as a backup. Normally, only one repository is needed, but my_site_source can store the original files for disaster recovery.

   For example, if your GitHub username is “yuzhencode”, the repository name will be yuzhencode.github.io.

5. When initializing the repository, check the option Initialize this repository with a README to facilitate code pushes later.

2. Generate Hugo Static Website Locally

#

1. Ensure that your hugo.toml or configuration file has the correct baseURL, for example:

baseURL = "https://username.github.io/"
# Replace username with your GitHub username.

2. Generate static files:

• Open your blog project directory and run the following command to generate the static files:

$hugo

• The generated static files will be located in the public/ folder of your project.

3. Upload the Generated Files to GitHub Repository

#

1. Initialize Git:

• Enter the public/ folder where the static files were generated and run:

$cd public
$git init

2. Add GitHub Repository as Remote:

• Add the GitHub repository as a remote origin:

$git remote add origin https://github.com/yuzhencode/yuzhencode.github.io.git  
# Link the local directory to the remote repository.

3. Add the content in public/ Directory to Git:

$git add .
$git commit -m "Initial commit - Hugo static files"

4. Push to GitHub:

• Push the files from public/ to your GitHub repository:

$git branch -M main
$git push -u origin main

4. Configure GitHub Pages

#

1. Enable GitHub Pages:

• In the Settings tab of your GitHub project, find Pages in the left-hand menu.
• Under Source, select the main branch and specify /(root) as the publishing directory.
• After saving these settings, GitHub will start building and hosting your Hugo blog.

2. Access Your Blog:

• Once GitHub Pages deployment is complete, you can access your blog at https://your-username.github.io/.

5. Local Updates and Deployment

#

After making updates in Hugo, regenerate the public/ files and repeat the steps in section 4 to push updates:

$hugo
$cd public
$git add .
$git commit -m "Update site"
$git push -u origin main

This keeps your Hugo static website synchronized and successfully deployed on GitHub Pages.

6. Disaster Recovery Backup

#

For disaster recovery, follow similar commands as in section 3, but do this in the my_site_source directory.

1. Initialize Git:

• Run:

$git init

2. Add GitHub Repository as Remote:

$git remote add origin https://github.com/yuzhencode/yuzhenblog-source.git  
# Link the local directory to the remote repository.

3. Add files and push to the GitHub repository:

$git add .
$git commit -m "Initial commit - Hugo source files"
$git push -u origin main

4. Afterward, regularly update the repository with:

$git add .
$git commit -m "Update site"
$git push -u origin main

This document explains how to set up a Hugo-generated blog and deploy it on GitHub Pages, with provisions for both production hosting and disaster recovery backups.