🙃缘起:
*进坑Hugo这么久了,是时候也开一篇记录一下建站过程了.*本教程是面向小白而写的,所以可能有些东西写的很罗嗦,所以大佬手下留情.本文稍微有点长,所以请保持耐心.😅
写这篇的一个主要原因有三:
- 记录并回顾此站从新建文件夹到诞生的主要过程
- 帮助一些小白入坑hugo
- 使文章数加一(doge
📢声明:
由于本人人菜瘾大,技术十分之有限,写的代码非常之烂,都是本着能用就行写的,所以请大佬手下留情.
📑本篇教程编写环境:
操作系统: Windows 11
专业版 22H2
Microsoft Edge版本 107.0.1418.62 (正式版本) (64 位)
Markdown编辑器: Typora
博客配置编辑器: VS Code
命令行工具:Git、Terminal
Hugo版本:hugo extended0.107.0_windows-amd64
Hugo主题:hugo-theme-stack
使用的主要路径: 桌面、D盘
基本上就这些了….
🧀Hugo环境搭建
使用hugo之前,必须配置hugo环境,这跟hexo要安装node和npm差不多. 下载的操作建议按照先安装VScode
再安装GIt
的顺序操作,因为后面的Git有个设置选项需要先有VScode编辑器
🎈安装VScode
-
从官网获取VScode的安装包
VScode官网: https://code.visualstudio.com/Download
-
打开安装包并安装,选择
I accept the agreement
,然后选择Next
-
全部
打勾勾后选择下一步,这个很重要! -
选择
install
开始安装,等待安装完成后选择Finish
-
至此,VScode就安装完成了,接下来安装
Git
🎈安装Git
-
从官网下载Git的安装包
Git官网下载地址: https://git-scm.com/download/win
-
打开下载好的安装包进行安装
-
直接默认安装路径然后选中下一步
-
直接下一步
-
这里很重要,如果之前没有安装vscode,这里就选不了该选项
-
后面的就全部默认就行,一直选
next
直到完成安装 -
至此,
git
安装完成,接下来进行hugo的安装
🎈安装hugo
-
从hugo官方github仓库下载hugo,记得必须使用带有
extended
的版本hugo官方下载地址: https://github.com/gohugoio/hugo/releases
-
在D盘下创建文件夹名为
hugo
,进入hugo
文件夹下并创建名为bin
的文件夹,将下载下来的zip文件解压到bin
里面完整的路径即为: D:\hugo\bin
-
接下来设置
hugo环境变量
,依次打开设置
,然后选择系统
,滑到下面选择系统信息
,打开高级系统设置
-
打开
环境变量
-
分别进入一下选项中进行添加
D:\hugo\bin\
-
检查一下hugo是否安装成功,打开cmd或终端输入
hugo version
,如果输出一下内容则证明配置成功
🎈小结
恭喜!到这里,基本就都配置完毕了,现在可以开始博客的搭建了
🎊Hugo博客搭建
🎈初始化博客
在桌面右键
,选择在终端打开
,然后输入以下命令
|
|
然后桌面会出现一个名为blog
的文件夹,可以用VScode
打开文件夹并打开终端
进行后续操作
🎈hugo-theme-stack安装
-
删掉默认的配置文件
config.toml
-
打开终端输入以下命令
1 2 3
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 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254
baseurl: / languageCode: zh-cn theme: hugo-theme-stack paginate: 5 title: L1nSn0w's Blog languages: # en: # languageName: English # title: Example Site # description: Example description # weight: 2 zh-cn: languageName: 中文 title: L1nSn0w's Blog description: 演示说明 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: true 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: xxx lang: pageview: true 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: 3 - 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: auto 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: Travelling name: aTravelling url: https://travellings.link/ params: newTab: false icon: train - identifier: Wormhole name: aWormhole url: https://www.foreverblog.cn/go.html params: newTab: false icon: wormhole - identifier: rss name: cRSS url: /index.xml params: newTab: true icon: rss - identifier: github name: dGitHub url: https://github.com/lin-snow params: newTab: true icon: brand-github 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: true tableOfContents: endLevel: 4 ordered: true startLevel: 2 highlight: noClasses: false codeFences: true guessSyntax: true lineNoStart: 1 lineNos: true lineNumbersInTable: true tabWidth: 4
将~themes/hugo-theme-stack/exampleSite里的content
整个文件夹复制到根目录中,然后即可在根目录的content中创建md文件进行blog了
🎈配置博客各个页面
这部分的配置在官方文档中很详细,就不重复造轮子了,直接给出官方文档
🎈开始创作
博客文章主要都存放在content中,这里可以参考一下我的content文件夹布局,例如我现在想要创建一篇文章,我们可以在blog根目录下打开终端输入hugo new post/2022/XXXX.md
这条命令的意思是在conent/post/2022
里创建一个名为XXXX.md
的文件
|
|
差不多就这些了,自己摸索一下还是能搞懂的….
🏐Hugo博客配合Action部署到Github
🎈注册GitHub
打开https://github.com/
,(打不开的可能需要魔法,或者换个时间点打开,具体怎么操作就不细说了,懂得都懂😶),注册一个GitHub账号,如果不会注册那你还来看这篇文章干嘛.
🎈创建Github仓库
为了使用GitHub Action
自动部署,加上便于管理,所以创建两个仓库,虽然一个也行.
-
我们先创建一个名字为
blog
的仓库用于存放hugo生成的文件,打开右上角的+号
,然后选择New repository
以新建仓库 -
跟着图片里的步骤操作,先给仓库取个名字,叫做
blog
(小白最好将仓库名字跟我起一样的),然后勾选public
,接着勾选Add a REAMME file
,最后点击Create repository
完成创建. -
接下来我们按照刚才那样依葫芦画瓢,再创建一个名为
blog-file
的仓库
🎈获取SSH Key密钥
ssh密钥可以是我们推送文件到仓库时不需要每次都输入密码,大大的提高我们的效率.所以我们首先需要在我们的电脑生成ssh密钥
1.在git bash
执行以下指令,配置邮箱和用户名
|
|
2.生成shh key,在git bash
中 输入以下命令
|
|
一路回车就行
默认会生成在如下目录
|
|
用记事本打开生成目录下id_rsa.pub
,其中的内容即为公钥,id_rsa
即为私钥.这两个待会要用到.
3.将将公钥配置到GitHub
账户中,先打开设置,即Settings
进入SSH and GPG key
配置项里,点击SSH keys
下的New SHH key
进行添加
4.然后随便在Title
项里随便起一个名字,在Key
里填入刚才得到的id_rsa.pub
里的内容,然后点击Add SSH key
就添加好了.
5.接下来我们需要往刚才创建的名为blog-file
的仓库里添加id_rsa密钥
,点击Settings
,然后找到Secrets and variables
,点击Actions
,然后点击New repository secret
🎈部署hugo博客
1.接下来我们在我们的博客根目录下创建一个名为.github
的文件夹,然后在文件夹里新建一个新的文件夹,名字为workflows
,接着进入workflows
文件夹里新建一个名为deploy.xml
的文件,再在deploy.xml
里填入如下内容,最终目录为~\blog\.github\workflows\deploy.xml
,将deploy.xml
中的external_repository
项里的lin-snow
改为你GitHub注册时的名字即可
|
|
2.然后在博客根目录文件夹下新建一个名为deploy.sh
的文件用于一键部署博客,在deploy.sh
中填入如下内容,其中最后一行代码里的git@github.com:lin-snow/blog-file.git
需要更改为你自己仓库的地址,可以通过如下图片中的操作获得该地址
|
|
然后双击打开运行deploy.sh
即可自动推送文件到仓库,以后写完博客或修改博客后都需要运行一下deploy.sh
,才能部署到云端
3.接下来我们先运行deploy.sh
推送一下文件到仓库,等推送上去之后,我们才能完成接下来的操作.
注意,第一次运行deploy.sh可能会出现如图这种情况,直接输入yes回车即可,如果仓库里没发现上传的文件可以再运行一次
deploy.sh
这里贴出我的GitHub Action运行状况
🎈开启Github Page
等待Github Action
完成后,我们需要开启GitHub page
,首先进入blog这个仓库,然后打开设置,找到page
项,根据如下设置即可.
到这里我们就成功上线我们的博客了.至于自定义域名可以在网上找到很多教程,这里就不写了,毕竟我比较懒.
🍥Hugo主题魔改
由于之前魔改部分写的很慢,又考虑过出个魔改好的主题直接给人们用,后来想想了还是算了,毕竟博客怎么能缺少折腾的乐趣呢,于是乎我花了点时间把魔改内容进行了一些休整,以内容呈现为核心,放弃了很多花哨的东西,加上考虑到魔改的难易程度与网页加载快慢,最后精简成一个custom.scss
文件,并做了注释,直接使用即可完成一些个性化调整.由于本人纯小白,所以可能还有可以优化的地方,如果你有更好的方案欢迎在下方探讨交流.🤔
首先在博客根目录下的assets
下创建一个名为scss
的文件夹,然后在scss
文件夹里创建一个名为custom.scss
的文件,最终效果为~blog/assets/scss/custom.scss
,创建好文件后,我们在里面写入如下内容:👇
|
|
大家可以根据需要调试更改和增删一些参数,后续的魔改内容也会更新在这个文件里.😀如果你有什么好的想法欢迎在评论区留言交流.
🍀参考及鸣谢
主题文档:https://stack.jimmycai.com/
hugo文档:https://gohugo.io/
github action参考:Stack主题 + GitHub Action (zhixuan.dev)
魔改参考自:
Hugo Stack 主题配置与使用 | Bore’s Notes
『Hugo』Hugo Styles (echosec.top)
….