preface

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
│   └── default.md
├── 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 https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

echo theme = \"ananke\" >> config.toml

1. Post a blog

hugo new posts/my-first-post.md

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: user-name.github.io/repo-name/

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 https://he2121.github.io/xiaohe-blog/
Is the test successful

individualization

It is suggested to jump to the summary first

use

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

theme

I chose this theme https://themes.gohugo.io/themes/hugo-theme-cactus-plus/

Just follow the tutorial.

Comment function to go https://disqus.com/ Apply for an account number.
Web statistics https://analytics.google.com/analytics/web/ Registration.

Give personal profile

baseURL = 'https://he2121.github.io/xiaohe-blog/'
languageCode = 'zh-cn'
defaultContentLanguage = 'cn'
title = 'Xiaohe's blog'
publishDir = 'docs'
theme = 'github.com/nodejh/hugo-theme-mini'

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

[social]
github = "https://github.com/he2121/"

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

summary

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.