Use Hugo and GitHub Pages to quickly build websites


As a programmer and a programmer with pursuit, technical influence is indispensable to us. Today, let's talk about how I use Hugo and GitHub Pages to quickly build a personal content output platform.

Introduction to Hugo and GitHub Pages

Hugo : the world's fastest website construction framework, which generates HTML static pages from Markdown files.

GitHub Pages GitHub provides a static web hosting service that does not require additional servers to deploy your blog system.

Construction process

  1. Install Hugo

Mac binary installation directly using the following command

brew install hugo
  1. GitHub creates a warehouse, such as Xiaohe blog, and git clone to the local database

  2. Initialize the warehouse of Clone with Hugo

hugo new site xiaohe-blog --force

The generated file directory should be as follows:

├── archetypes  // Article default template
│   └──
├── config.toml // configuration file
├── content     // Markdown file
├── data        // 
├── layouts     // html file
├── static      // Pictures, CSS, JS
└── themes      // hugo theme
  1. Choose a theme

In order to build quickly, the default theme is used, and the theme is modified according to personal needs in the later stage

git submodule add themes/ananke

echo theme = \"ananke\" >> config.toml
  1. Post a blog
hugo new posts/

You can also create a markdown file directly under the / contents folder

  1. Local start test
hugo server -D

Open the address given by the command line, modify the markdown file, and the web page will change in real time

  1. GitHub Pages settings (only the simplest one is introduced here)

Github warehouse Homepage - > Settings - > Pages - > main - > docs - > save

A website address will appear:

This means that opening this address will display the contents under the warehouse / docs.

Next, our work is: put the static web page generation file generated by Hugo in the / docs folder, and then push it to GitHub.

  1. Modify config.toml
    The example is as follows. Please modify it yourself
baseURL = 'https://He2121. GitHub. IO / Xiaohe blog / '/ / set it to your own
languageCode = 'zh-cn'
title = 'Xiaohe's blog'
theme = "ananke"
publishDir = 'docs'
  1. Generate static web pages and push them to GitHub
hugo -D // Generate static web pages
git add .
git commit -m "first commit"
git push

Open the page link provided by GitHub
Is the test successful


It is suggested to jump to the summary first


Usually use idea/vscode to edit markdown locally, see the web page effect locally in real time, generate a static web page after editing, and then push it to the remote to output an article


I chose this theme

Just follow the tutorial.

Comment function to go Apply for an account number.
Web statistics Registration.

Give personal profile

baseURL = ''
languageCode = 'zh-cn'
defaultContentLanguage = 'cn'
title = 'Xiaohe's blog'
publishDir = 'docs'
theme = ''

googleAnalytics = 'G-583xxxxxx'
disqusShortname = 'xxxx'

github = ""

author = 'Xiao He'
bio = 'Golang engineer'
description = "Xiaohe's blog"
enableGoogleAnalytics = true
enableComments = true
name = "tag"
path = "/xiaohe-blog/tags"
name = "algorithm"
path = "/xiaohe-blog/algorithm"
name = "Station construction"
path = "/xiaohe-blog/Station construction"
name = "Gossip"
path = "/xiaohe-blog/Gossip"


Using Hugo and GitHub Pages can quickly build a personal website, but customization takes time,
It is recommended that novices use all the default functions. Writing articles is the focus, and others should be ignored for the time being.

Tags: git github

Posted on Mon, 08 Nov 2021 15:15:18 -0500 by baitubai