Hugo实践篇 | 通过本文 Blog 上线了!

通过上篇 Hugo 国内腾讯云域名注册 完成了域名注册,现在我们开始 Hugo 实践。

Huog 安装

想到要自己搭个 Blog 的时候,考虑到了 Hexo 和 Hugo 两个框架。查了半天,发现好多博主都开始使用 Hugo 了,就直接选了 Hugo。

安装过程,官网写的很清楚:Hugo 官方安装指导,以下简述我的 Windows 平台 Hugo 安装过程。

安装 Chocolatey

Chocolatey 是 Windows 平台的软件包管理程序,通过 Chocolatey 可以快捷安装 Hugo。

安装 Chocolatey 的方法也很简单,按下Windows 徽标 + X ,在呼出菜单中选择Windows PowerShell(管理员),然后命令行粘贴以下命令,回车安装Chocolatey

1
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

等待进度条完成,输入choco -?如果返回帮助,则 Chocolatey 已完成安装。

Chocolatey 安装 Hugo

在 Windows PowerShell 命令行中,输入choco install hugo -confirm即可自动安装 Hugo。我建议安装扩展版本,输入 choco install hugo-extended -confirm

进度条走完后,Hugo 已成功安装到你的 Windows。

安装 Git

Git 是一个强大的版本管理工具,在官网下载安装包解压后安装。

在 Windows 环境变量中添加 Git 的安装目录,即可随时使用 Git 命令。

挑选主题

安装好 Hugo 和 Git 后,还得挑一个喜欢的主题。Hugo 官网有着数百个主题,点此查看,我选择了现在这款Dream,被清新的页面和个性化砖石排版吸引。点此查看 Dream 主题

打开 Git Bash 命令行工具,执行Hugo new site blog,将会在当前目录创建一个 blog 的项目。接着 cd blog/themes,克隆 Dream 代码。git clone git@github.com:g1eny0ung/hugo-theme-dream.git

Hugo 配置

在 blog 根目录下创建一个配置文件 coding.toml,可参考我的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
baseURL = "https://guole.fun/" # 你的域名,很重要,错误的话部署到线上将页面异常
languageCode = "zh-Hans"
defaultContentLanguage = "zh"
title = "guole's Blog" # 你的博客名称
theme = "dream" # 设置主题

copyright = '<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="知识共享许可协议" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br />本作品采用<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>进行许可。<br /><br />背景使用了 <a href="https://www.pexels.com/zh-cn/" target="_blank">Pexels</a> 上 <a href="https://www.pexels.com/zh-cn/@minan1398" target="_blank">Min An</a> 拍摄的<a href="https://www.pexels.com/zh-cn/photo/1454794/" target="_blank">图片</a>。'

enableRobotsTXT = true # 详见 Dream 作者 docs 目录下文档
enableEmoji = true
hasCJKLanguage = true

[outputs]
home = ["HTML", "RSS", "JSON"]

# https://gohugo.io/news/0.60.0-relnotes/
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
# 缺省值为false,值为true时,md文件可使用html和js语法monokai

# 以下设置代码高亮样式
[markup.highlight]
codeFences = true
guessSyntax = true
hl_Lines = ""
lineNoStart = 1
lineNos = true
lineNumbersInTable = true
noClasses = true
style = "dracula"
tabWidth = 4

[params]
background = "#fff"
backgroundImage = "/me/background.jpg"
linkColor = "seagreen"

# dark mode
# defaultDark = true
# backgroundDark = "#222"
backgroundImageDark = "/me/background.jpg"
darkLinkColor = "darkseagreen"
darkNav = true
dark404 = true

images = ["me/background.jpg"]
author = "guole"
description = "guole 的生活记录~"
avatar = "/me/gl.png" # 设置头像
headerTitle = "guole's Blog"
motto = "保持理智,保持思考,相信明天。"
# maxTags = 5
# categoriesLimitInHeader = 6 # deprecated
# headerBottomText = "" # deprecated
# footerBottomText = ""
rss = true
# utterancesRepo = "kuole-o/kuole-o.github.io" # 一个国外评论系统,需要外网,我换了 Twikoo ,见其他文章

# 以下设置社交链接
# email = ""
# twitter = ""
# facebook = ""
# instagram = ""
# mastodon = ""
# linkedin = ""
# mastodon = ""
# linkedin = ""
# github = ""
# stackoverflow = ""
# codepen = ""

# 网站建站年份
siteStartYear = 2021

# 配置网站标签页上的 icon
# favicon = ""

# search
enableSearch = true

# options
showSummaryCoverInPost = true
# hasTwitterEmbed = true
# reversePostAndAside = true
# shareInAside = true

[params.advanced]
customCSS = ["css/custom.css"]
customJS = []
[params.experimental]
jsDate = true
jsDateFormat = "yyyy年MM月dd日"
# jsDateFormat = "yyyy年MM月dd日,cccc"

至此,Hugo 简单配置完成,执行 hugo new posts/第一篇博文测试.md,创建第一篇文章。内容头的draft: true代表这是一篇草稿,正式发布时设置为draft: false

本地预览 Blog 页面

接着再执行 hugo server -D打开 Hugo 本地服务,浏览器访问http://localhost:1313/就能看到你的页面啦~~

🎉🎉 终于,你的 Blog 本地搭建完成,下篇我们将它部署到 Coding 和 Github。

  1. Hugo 国内腾讯云域名注册
  2. 使用 Hugo + Dream主题搭建个人Blog
  3. Hugo 启用 Twikoo 评论系统
  4. Hugo 设置不同页面共用一套 Twikoo 评论
  5. Hugo 实现 Coding + Github 自动化部署