(1) Use Hugo to build a personal blog nanny-level tutorial (Part 2)

Insert image description here

For an introduction to blog building, please refer to the previous article
(Part 1) Using Hugo to build a personal blog nanny-level tutorial (Part 1)

(1) Hugo installation

Hugo installation under multiple operating systems

Preparation
  • Install golang
    • Before installing hugo, first install golang. It is recommended to install the latest version.

Windows users are strongly recommended to use Scoop installation (for information about Scoop installation and use, please refer to Scoop Installation and Use), enter the Windows terminal and execute the command

scoop install hugo

If Mac users have installed the HomeBrew tool, it can be completed with one line of commands

brew install hugo

Linux users and other installation methods can refer to the official Hugo installation guide . Here I use CentOS 7.6 as an example to install Hugo in source code. Before installation, you need to install gitand go编译器:

1.1 Git installation and configuration
# 安装git
yum install git

# 配置git
git config --global user.name "your_user_name"
git config --global user.email "your_mail"

# 查看配置是否生效
git config --list

# 生成本地ssh key添加到github
ssh-keygen -t rsa -C "your_mail"

# 查看公钥
cat /root/.ssh/id_rsa.pub

# 进入github的settings设置,添加公钥即可
1.2 Go compiler
# 下载go
wget - https://go.dev/dl/go1.17.5.linux-amd64.tar.gz 
tar -xzvf go1.17.5.linux-amd64.tar.gz 
mv go /usr/bin

# 更改环境变量
export PATH=$PATH:/usr/local/go/bin
source ~/.bash_profile

# 验证安装
go version
# go version go1.17.5 linux/amd64

1.3 Hugo installation
# 方式一:官方源码安装
mkdir $HOME/src
cd $HOME/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install --tags extended  # 我到这一步经常卡住

# 方式二:更推荐
cd /etc/yum.repos.d
wget https://copr.fedorainfracloud.org/coprs/daftaupe/hugo/repo/epel-7/daftaupe-hugo-epel-7.repo -O hugo.repo
yum update
yum install hugo

hugo version
# 出现hugo v0.91.1 linux/amd64 BuildDate=2021-12-22T16:48:53Z

(2) Hugo blog construction

2.1 Create a new site

Open the terminal, enter the path of the folder you want to create, and enter in the terminal

hugo new site hugoblog

The terminal prompt is as follows:

PaperMod theme

The following files will appear under the hugoblog folder

PaperMod theme
2.2 Download theme

According to the terminal prompts, go to the Hugo theme official website to find the theme you like, and then click download to jump to the theme's github.

Adjust the terminal path to the themes directory of the blog folder and enter:

git clone https://github.com/adityatelange/hugo-PaperMod.git

For example, my theme is PaperMod
PaperMod theme
and the following file directory will appear under the themes folder:
PaperMod theme

The way to use this theme is to enter the name of the theme in the configuration file under the site folder:

theme: PaperMod # 主题名字,和themes文件夹下的一致

Then copy some static files and configuration files in the theme folder to the site directory. The purpose is to customize the style of the blog without changing the style in the theme folder. In this way, when the theme needs to be updated, it can be directly updated in the theme. Just git pull in the directory. Modifications to the site directory will give priority to overwriting the configuration in the theme, so smooth updates can be achieved.

2.3 Configuration file
  1. In the root directory of the Hugo website folder, use Visual Studio Code to open the config.toml file.

If you haven't used Visual Studio Code yet, it is recommended to download and install it. It is a very easy-to-use open source text editor that supports Windows, Linux and macOS operating systems.

  1. Refer to the configuration instructions of the selected Hugo theme and edit the config.toml file.

Note: The theme configuration item refers to the name of the selected theme, which must be the same as the directory name to which the selected theme is cloned. In this case, theme = "PaperMod".

The configuration file of this site is as follows, which will be uploaded to the corresponding gitee warehouse later.

baseURL: 'https://www.scutzch.com/'
languageCode: zh-cn 

Guess you like

Origin blog.csdn.net/zch19960629/article/details/133533463