使用 Hugo 框架搭建个人静态网站基本教程

安装Hugo

Windows用户强烈建议使用 scoop 安装(关于scoop安装及使用可参考Windows环境配置),进入Windows终端执行命令:

scoop install hugo

Mac 用户如果已经安装 HomeBrew 工具,一行命令即可完成

brew install hugo

Linux 用户及其他安装方式,可以参考Hugo官方安装指导 ,这里我以 CentOS 7.6 为例采用源码方式安装 Hugo,在安装之前需要先安装 git 以及 go编译器:

Git安装及配置

# 安装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设置,添加公钥即可

Go编译器安装

# 下载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

Hugo安装

# 方式一:官方源码安装
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

新建站点

进入指定目录新建MyBlog,并将站点文件改为.yml后缀的写法(官方更推荐)

hugo new site MyBlog -f yml

得到以下的文件目录结构:

添加主题

进入Hugo的官方主题网站 ,点击自己喜欢的主题并进入该主题的github主页

这里我以PaperMod 主题为例演示,该主题提供四种安装方法 ,此处以方法一进行演示:

  • 进入网站的根目录,也就是MyBlog文件夹所在路径执行:
git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
  • 更新主题采用:
cd themes/PaperMod
git pull
  • 修改config.yml文件配置
baseURL = "/"
languageCode = 'en-us'
title = 'My New Hugo Site'

theme = "PaperMod"

新建文章

创建一个first-blog页面

hugo new posts/first-blog.md

此时first-blog.md将自动生成在content/posts目录下:

---
title: "First Blog"
date: 2022-06-05T10:16:58+08:00
draft: true
---

注意:使用Markdown语法继续书写即可,待文章完成修改draftfalse即可

启动Hugo服务

  • 文章书写完成后直接在站点根目录下启动 Hugo 服务即可,执行:
hugo server -D

# 将看到以下输出
Start building sites …
hugo v0.100.1-0afb4866e345d31cbbcbab4349e43f1d36122806 windows/amd64 BuildDate=2022-06-01T10:11:48Z VendorInfo=gohugoio

                   | EN
-------------------+-----
  Pages            | 10
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  0
  Processed images |  0
  Aliases          |  2
  Sitemaps         |  1
  Cleaned          |  0

Built in 83 ms
Watching for changes in C:\Users\shaohan.tian\Desktop\MyBlog\{archetypes,content,data,layouts,static,themes}
Watching for config changes in C:\Users\shaohan.tian\Desktop\MyBlog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop