preface

As a programmer, and as an aspiring programmer, technical influence is indispensable to us. Today, I will introduce 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 web building framework that generates HTML static pages from Markdown files.

GitHub Pages is a static web hosting service that eliminates the need for additional servers to host your blogging system.

Set up process

  1. Install Hugo

Mac directly uses the following command for binary installation

brew install hugo
Copy the code

  1. GitHub creates a repository, such as Xiaohe-blog, and clone git to the local repository

  2. Initialize the Clone warehouse using Hugo

hugo new site xiaohe-blog --force
Copy the code

The generated file directory should look like this:

├── ├─ exercises, ├─ exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, etc HTML File ├─ Static // Pictures, CSS, JS... ├ ── themes //Copy the code
  1. Choose a theme

For quick setup, use the default theme and modify the theme according to your personal needs

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

echo theme = "ananke" >> config.toml
Copy the code
  1. Post a blog
hugo new posts/my-first-post.md
Copy the code

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

  1. Local startup test
hugo server -D
Copy the code

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

  1. GitHub Pages setup (here is only one of the simplest ways)

Github Repository home -> Settings -> Pages -> main -> docs -> Save

A web address appears: user-name.github. IO /repo-name/

Opening this address will reveal the contents of the repository/Docs.

Next thing we did was put Hugo’s static web generation file in the /docs folder and push it to GitHub.

  1. Change the config. Toml

The following is an example. Modify it by yourself

baseURL = 'https://he2121.github.io/xiaohe-blog/'// Set to your own languageCode ='zh-cn'
title = 'Oga's Blog'
theme = "ananke"
publishDir = 'docs'
Copy the code
  1. Generate static web pages and push them to GitHub
Git add. Git commit -m"first commit"
git push
Copy the code

He2121.github. IO /xiaohe-blog… Test success

personalized

I suggest skipping to the summary first

use

Usually use idea/vscode to edit markdown locally and see the effect of webpage locally in real time. After editing, generate static webpage and push to remote to output an article

The theme

Chose this topic themes. Gohugo. IO/themes/Hugo…

Follow the tutorial to install.

For comments, go to disqus.com/ to apply for an account. Web statistics analytics.google.com/analytics/w… Registration.

Give the personal profile

= 'https://he2121.github.io/xiaohe-blog/' baseURL languageCode = 'useful - cn defaultContentLanguage =' cn 'title =' will blog ' publishDir = 'docs' theme = 'github.com/nodejh/hugo-theme-mini' googleAnalytics = 'G-583xxxxxx' disqusShortname = 'xxxx' [social] making = "https://github.com/he2121/" [params] author = 'will' bio = 'Golang engineers' description = "the blog will" enableGoogleAnalytics = true enableComments = true [[params.links]] name = "tag" path = "/xiaohe-blog/tags" [[params.links]] name = "/xiaohe-blog/ "[[params.links]] name =" xiaohe-blog/" [[params.links]] path = "/xiaohe-blog/ xiaohe-blog"Copy the code

conclusion

Using Hugo and GitHub Pages can quickly build a personal website, but it takes time to customize, so it is recommended that beginners use all the default functions, writing articles is the focus, other should be temporarily ignored.