安装hugo
1.从hugo官方github仓库下载hugo,记得必须使用带有extended的版本
hugo官方下载地址: https://github.com/gohugoio/hugo/releases
2.在任意盘下创建文件夹名为hugo,进入hugo文件夹下并创建名为bin的文件夹,将下载下来的zip文件解压到bin里面
完整的路径即为: e:\hugo\bin
3.接下来设置hugo环境变量,依次打开设置,然后选择系统,滑到下面选择系统信息,打开高级系统设置,打开环境变量
如图
4.检查一下hugo是否安装成功,打开cmd或终端输入hugo version,如果输出一下内容则证明配置成功
初始化博客
在桌面右键,选择在终端打开,然后输入以下命令
然后桌面会出现一个名为blog的文件夹,可以用VScode打开文件夹并打开终端进行后续操作
🎈hugo-theme-stack安装
-
删掉默认的配置文件config.toml
-
打开终端输入以下命令
1
2
|
git init #获取主题文件
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
|
-
将获取到的主题文件中的exampleSite中的config.yaml拷贝到blog根目录中
并进行配置,根据自己需要进行配置,这里我贴出自己的配置图共参考
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
|
baseurl: myblog
languageCode: zh-cn
theme: hugo-theme-stack
paginate: 5
title: TauZZ's Blog
languages:
# en:
# languageName: English
# title: Example Site
# description: Example description
# weight: 1
zh-cn:
languageName: 中文
title: TauZZ's Blog
description: 👋Welcome To TauZZ's Blog
weight: 1
# ar:
# languageName: عربي
# languagedirection: rtl
# title: موقع تجريبي
# description: وصف تجريبي
# weight: 3
# Change it to your Disqus shortname before using
disqusShortname: hugo-theme-stack
# GA Tracking ID
googleAnalytics:
# Theme i18n support
# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw
DefaultContentLanguage: zh-cn
# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage: false
permalinks:
post: /p/:slug/
page: /:slug/
params:
mainSections:
- post
featuredImageField: image
rssFullContent: true
favicon: img/favicon.ico # e.g.: favicon placed in `static/favicon.ico` of your site folder, then set this field to `/favicon.ico` (`/` is necessary)
footer:
since: 2020
customText:
dateFormat:
published: Jan 02, 2006
lastUpdated: Jan 02, 2006 15:04 MST
sidebar:
emoji: 🍥
subtitle: 加油努力.✍️
avatar:
enabled: true
local: true
src: img/avatar.png
article:
math: false
toc: true
readingTime: true
license:
enabled: true
default: Licensed under CC BY-NC-SA 4.0
comments:
enabled: true
provider: waline
disqusjs:
shortname:
apiUrl:
apiKey:
admin:
adminLabel:
utterances:
repo:
issueTerm: pathname
label:
remark42:
host:
site:
locale:
vssue:
platform:
owner:
repo:
clientId:
clientSecret:
autoCreateIssue: false
# Waline client configuration see: https://waline.js.org/en/reference/component.html
waline:
serverURL:
lang:
pageview:
emoji:
- https://cdn.jsdelivr.net/npm/sticker-heo@2022.7.5/Sticker-100/
requiredMeta:
- name
- email
locale:
admin: 👻屑博主
placeholder: 🎉留下你的脚印.
twikoo:
envId:
region:
path:
lang:
# See https://cactus.chat/docs/reference/web-client/#configuration for description of the various options
cactus:
defaultHomeserverUrl: "https://matrix.cactus.chat:8448"
serverName: "cactus.chat"
siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)
giscus:
repo:
repoID:
category:
categoryID:
mapping:
lightTheme:
darkTheme:
reactionsEnabled: 1
emitMetadata: 0
gitalk:
owner:
admin:
repo:
clientID:
clientSecret:
cusdis:
host:
id:
widgets:
homepage:
- type: search
- type: archives
params:
limit: 5
- type: categories
params:
limit: 10
- type: tag-cloud
params:
limit: 10
page:
- type: toc
opengraph:
twitter:
# Your Twitter username
site:
# Available values: summary, summary_large_image
card: summary_large_image
defaultImage:
opengraph:
enabled: false
local: false
src:
colorScheme:
# Display toggle
toggle: true
# Available values: auto, light, dark
default: light
imageProcessing:
cover:
enabled: true
content:
enabled: true
### Custom menu
### See https://docs.stack.jimmycai.com/configuration/custom-menu.html
### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
menu:
main: []
social:
- identifier: github
name: GitHub
url: https://github.com/Tauzi
params:
icon: brand-github
- identifier: weixin
name: Dreamq0p
params:
icon: wx
related:
includeNewer: true
threshold: 60
toLower: false
indices:
- name: tags
weight: 100
- name: categories
weight: 200
markup:
goldmark:
renderer:
## Set to true if you have HTML content inside Markdown
unsafe: false
tableOfContents:
endLevel: 4
ordered: true
startLevel: 2
highlight:
noClasses: false
codeFences: true
guessSyntax: true
lineNoStart: 1
lineNos: true
lineNumbersInTable: true
tabWidth: 4
|
> 官方配置文档: [https://stack.jimmycai.com/config/](https://stack.jimmycai.com/config/)
🎈完成配置后
然后在自己的站点目录输入：hugo server
在浏览器输入：localhost:1313 得到以下页面：
🎈开始创作
博客文章主要都存放在content中,这里可以参考一下我的content文件夹布局,例如我现在想要创建一篇文章,我们可以在blog根目录下打开终端输入hugo new post/2022/XXXX.md这条命令的意思是在conent/post/2023里创建一个名为XXXX.md的文件
1
2
3
4
5
6
7
8
9
10
11
|
---
title: Chinese Test
description: 这是一个副标题
date: 2020-09-09
slug: test-chinese
image: helena-hertz-wWZzXlDpMog-unsplash.jpg
categories:
- Test
- 测试
tags:
---
|
Hugo博客配合Action部署到Github
🎈部署hugo博客
1.接下来我们在我们的博客根目录下创建一个名为.github的文件夹,然后在文件夹里新建一个新的文件夹,名字为workflows,接着进入workflows文件夹里新建一个名为deploy.xml的文件,再在deploy.xml里填入如下内容,最终目录为~\blog.github\workflows\deploy.xml,将deploy.xml中的external_repository项里的lin-snow改为你GitHub注册时的名字即可
deploy.xml
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
|
name: GitHub Page
on:
push:
branches:
- gh-pages # master 更新触发
jobs:
deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@v2
with:
submodules: true # clone submodules
fetch-depth: 0 # 克隆所有历史信息
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: "0.111.3" # Hugo 版本
extended: true # hugo插件版 Stack主题 必须启用
- name: Cache resources # 缓存 resource 文件加快生成速度
uses: actions/cache@v2
with:
path: resources
# 检查照片文件变化
key: ${{ runner.os }}-hugocache-${{ hashFiles('content/**/*') }}
restore-keys: ${{ runner.os }}-hugocache-
- name: Build # 生成网页 删除无用 resource 文件 削减空行
run: hugo --minify --gc
- name: Deploy # 部署到 GitHub Page
uses: peaceiris/actions-gh-pages@v3
with:
# 如果在同一个仓库下使用请使用 github_token 并注释 deploy_key
# github_token: ${{ secrets.GITHUB_TOKEN }}
deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
# 如果在同一个仓库请注释
external_repository: Tauzi/myblog # 你的 GitHub page 仓库 example/example.github.io
publish_dir: ./public
user_name: "github-actions[bot]"
user_email: "github-actions[bot]@users.noreply.github.com"
full_commit_message: Deploy from ${{ github.repository }}@${{ github.sha }} 🚀
|
2.然后在博客根目录文件夹下新建一个名为deploy.sh的文件用于一键部署博客,在deploy.sh中填入如下内容
1
2
3
4
5
6
7
8
9
10
11
|
hugo --theme=hugo-theme-stack --baseUrl=https://tauzi.github.io/myblog/ --buildDrafts
cd public
git init #初始化git
git add -A
git commit -m 'deploy123'
git push -f git@github.com:Tauzi/myblog.git master:gh-pages #向存储库推送
|
用git执行 bash deploy.sh 这样就可以把hugo生成的html文件推送到仓库gh-pages分支
🎈开启Github Page
等待Github Action完成后,我们需要开启GitHub page,首先进入blog这个仓库,然后打开设置,找到page项,根据如下设置即可.
等待完成构建后就可以访问了!
省流版
1.git clone https://github.com/Tauzi/myblog.git
2.修改config名称配置
3.删除post里我的笔记添加你自己的笔记
4.开启page
5.每次写完blog 使用git bash deploy.sh推送
