序 建站之初
hugo使用go语言进行编译生成静态博客文件系统, 将文件系统发布到服务器上, 即可通过访问服务器来访问生成的静态博客网站, 这里服务器可以自己购买, 也可以直接部署在GitHub提供的免费服务器上, 即GitHub pages的方式. hugo生成网站时拥有极快的渲染速度, 而且无需在服务器上搭建数据库, 免去了数据库系统学习和管理的烦恼(为了搭建网站提前选修了一个学期数据库系统原理的本人知道真相后😢), 由于以前搭建云主机吃了不少苦, 这里果断选择了部署到GitHub pages上的方案, 无需自己维护服务, 更稳定安全, 且免费啊啊啊(每个仓库1GB的免费容量). 因为建站之初是为了开一个记录的树洞bot, 作为友人🍧的生日礼物, 所以搭配一个具有特殊意义的自定义域名是必不可少哒. 总的来说, 一个完整的静态博客demo至少需要以下三部分的准备:
- 静态网站生成器 -
hugo - 存放页面的仓库 - 通过
GitHub pages的方式托管在GitHub家的免费服务器上 - 域名 -
GitHub pages的方式自带一个域名但这里选择绑定自定义域名嗷
接下来便一一展开这个demo如何实现哒~
使用hugo安装\配置\生成静态网站
安装
hugo在
archlinux系统上安装hugo并验证hugo版本 (其他系统均有相应的安装指令 不熟就不科普啦😅)1
2sudo pacman -S hugo
hugo version使用
hugo创建一个博客项目, 且命名为blog-yoli, 记得先cd到想要存放这个博客项目的目录位置.1
2cd ~/echoo
hugo new site blog-yoli配置博客主题
查找
hugo配置教程留意了很多风格, 最后选择了博主pseudoyu使用的hugo-theme-den主题, 有mood且简单, 专注于内容创作.
pseudoyu前辈写的搭建教程[^pseudoyu]也很详尽, 多亏了他的教程yolichan的树洞bot才能从零到有, 也在github借鉴了一些前辈的部署方案, 最最主要的是, 前辈在搭建博客时使用的方案应该都是比对挑选过的, 很稳定.参考教程, 将原主题仓库fork到自己的
GitHub账户后,在本地使用git submodule进行链接到fork后形成的远程仓库.我们可以将
GitHub上的主题仓库直接git clone下来进行使用，但这种方式有一些弊端，当之后自己对主题进行修改后，可能会与原主题产生一些冲突，不方便版本管理与后续更新. [^pseudoyu][^pseudoyu]:pseudoyu: Hugo + GitHub Action，搭建你的博客自动发布系统
1
2
3cd blog-yoli
git init
git submodule add https://github.com/mewoooew/hugo-theme-den.git themes/hugo-theme-den`更新主题
初始化
1
2如果是直接clone的他人的博客项目
git submodule update --init --recursive同步本地修改到仓库
1
git submodule update --remote
主题配置及发布
链接到仓库后并添加主题文件夹后, 还需要将主题文件夹示例站点
blog-yoli/themes/hugo-theme-den/exampleSite/中的文件复制到博客根目录下才能生效:1
`cp -rf themes/hugo-theme-den/exampleSite/* ./``
由于一些原主题代码不能直接使用, 后面
hugo --server调试时会有报错, 多次尝试后发现最简单粗暴的方式是删除content/en/posts/*下的文章, 因为这些代码主要是由这些文章页面进行引用的😵💫.1
cp -rf themes/hugo-theme-den/exampleSite/* ./
如果要启用多语言并且开箱使用原主题的一些模板, 还可以将主题文件夹
themes下的i8nlayoutsstatic文件夹直接复制到博客根目录下, 例如:1
cp -rf /themes/hugo/hugo-theme-den/i18n ./
后面可以慢慢调整\修改\使用自己定制的一些方案.
站点细节配置
关于站点名称\目录分配\默认语言等站点细节都可以在配置文件
config.toml中进行配置, 关于网站的样式设计细节存放在blog-yoli/static/css/den.css文件中, 不同主题的配置参数不太一样嗷, 多踩几次坑熟悉了就好 😢.发布新文章
1
hugo new posts/blog-test.md
生成文章默认模板
echoo/blog-yoli/archetypes/default.md
如果配置文件设置了默认语言(例如中文zh)的话,生成的文章会被放到blog-yoli/content/zh/posts/目录下 . 除了关于页\搜索页\友链页等,平时的blog文章应该都放在blog-yoli/content/zh/posts文件夹下.hugo还有一大优点就是可以本地调试预览1
2hugo server -D
-D 参数表示渲染时显示处于草稿draft状态的文章页面运行后通过在浏览器访问
http://localhost:1313即可预览网站搭建效果, 之后可以一边修改网站配置一边查看实时效果, 有点所见即所得的意思啦.
部署GitHub Pages
首先准备好一个自家的域名(可以没有)
下面都以
yolichan.fun为例.创立符合
username.github.io命名形式的仓库建议勾选public(公有, 免费), 但不要勾选添加
README.md文件, 不然之后本地同步远程仓库会比较麻烦, 多一道git pull的工序下面都以 mewoooew.github.io 为例.GitHub Pages项目需要符合username.github.io的特殊命名格式，仓库建立完成后，可以在设置中配置自己注册的自定义域名来指向GitHub Pages生成的网址。[^pseudoyu]将
GitHub Pages设置中的custom domian和博客配置文件config.toml中的baseURL都改为自定义域名 https://www.yolichan.fun/
域名解析
配置完
GitHub Pages后还需要通过DNS解析将域名指向GitHub Pages提供的个人主页域名, 这样才能让访者在浏览器访问自定义域名被导向GitHub Pages个人主页.在需要在域名托管商进行
DNS解析,选择CNAME,指向GitHub Pages网址, 这里选择的域名托管商cloudflare, 这样可以顺便使用上他家CDN加速服务.
CNAME解析没法设置 root 域名(无任何前缀的yolichan.fun), 只能设置www.yolichan.fun或其他子域名, 而子域名容易被SEO优化掉: 一些搜索引擎如alex或一些搜索查询工具网站等等默认是自动去掉www.来辨别网站的; 据说使用子域名的网站权重也相对更低. 对此, 参考pseudoyu的教程, 通过Cloudflare上自定义规则设置域名重定向, 如此访问https://yolichan.fun时就会被重定向到https://www.yolichan.fun
在GitHub Pages上发布博客
要GitHub Pages显示博客网页, 还需要将hugo生成的的静态网页资源发布到之前创建的mewoooew.github.io仓库. 可以手动发布或者通过配置GitHub Action自动发布, 手动发布流程简单好上手, GitHub Action自动发布可以实现网站每日自动更新, 持续集成/交付(CI/CD), 这里选择GitHub Action的方式, 如果想使用自动发布的方式的化继续推荐pseudoyu的教程. 至于GitHub Action的实现方式则同时参考了pseudoyu的教程和reuixiy(一休儿)的教程.[^reuixiy]
[^reuixiy]: reuixiy: 使用 GitHub Actions 部署 Hugo 博客到 GitHub Pages
另创建一个
GitHub远程仓库blog-yoli用于存放博客源文件(即整个blog-yoli/下的站点文件系统), 创建的时候同样不建议勾选创建README.md.初始化博客源文件本地仓库
1
2
3
4
5
6
7!~/blog-yoli/
将博客根目录初始化为git本地仓库
git init
将博客根目录下的文件(. 表示所有内容)提交到git本地仓库
git add .
提交说明, 编辑说明文字有利于建立追踪, 防失忆很好用
git commit -m "new"将本地仓库同步到远程仓库
1
2
3
4
5
6
7将本地仓库源与GitHub网站上托管的远程仓库进行链接
只有初始化的时候需要链接, 之后都可以直接进行推送
git remote add origin git@github.com:mewoooew/blog-yoli.git
如果之前没有在本地配置过GitHub账户的话还要根据提示配置一下账户信息
生成SSH密钥对(配好钥匙再开门), 存储到GitHub网站上, 才能链接成功
将本地仓库内容推送到远程仓库, -u表示强制推送
git push -u origin master建立
GitHub Action工作流在博客根目录下新建配置文件
blog-yoli/.github/workflows/build.yml用以指示GitHub Action工作流程: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
41name: GitHub Pages
on: #表示 GitHub Action 触发条件
push:
pull_request:
jobs: #GitHub Action 中的任务
deploy:
runs-on: ubuntu-latest # GitHub Action 运行环境
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- name: Checkout #检出最新代码到 GitHub Actions 的虚拟环境中
uses: actions/checkout@v3 #GitHub Action 中的插件
with:
submodules: true # Fetch Hugo themes (true OR recursive)
# `submodules` 值为 `true`
# 可以同步博客源仓库的子模块，即我们的主题模块。
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2 #GitHub Action 中的插件
with:
hugo-version: 'latest'
extended: true
- name: Build
run: hugo --minify
- name: Deploy
uses: peaceiris/actions-gh-pages@v3 #GitHub Action 中的插件
with:
# Note that the GITHUB_TOKEN is NOT a personal access token. A GitHub Actions runner automatically creates a
# GITHUB_TOKEN secret to authenticate in your workflow. So, you can start to deploy immediately without any
# configuration.
# personal_token参数值不要修改，github action 会自动引用
personal_token: ${{ secrets.PERSONAL_TOKEN }}
external_repository: mewoooew/mewoooew.github.io
publish_branch: master
publish_dir: ./public
commit_message: ${{github.event.head_commit.message }}其中
EXTERNAL_REPOSITORY改为自己的GitHub Pages仓库.
至于PERSONAL_TOKEN要想成功引用,需要先创建一个要在GitHub账户下Setting - Developer setting - Personal access tokens下创建一个Token:创建时开启
repo与workflow权限复制生成的
Token（注：只会出现一次）, 然后在博客源仓库的Settings - Secrets - Actions中添加PERSONAL_TOKEN环境变量为刚才的Token, 这样GitHub Action就可以引用 生成的Token了.完成上述配置后, 推送代码至仓库, 即可触发
GitHub Action, 自动生成博客页面并推送至GitHub Pages仓库.原本空白的mewoooew/mewoooew.github.io仓库会出现发布内容.1
2
3
4!~blog-yoli/
git add .
git commit -m "test"
git push -u origin master在
GitHub仓库控制台Actions处可以查看部署日志以便于debug绑定自定义域名
在
blog-yoli/static/目录下新建无后缀的文件CNAME, 并在文件中输入自定义域名.一键发布文章\推送至
GitHub远程仓库创建
shell脚本yoli.sh1
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!/bin/bash
使用方法:
bash yoli.sh "提交说明的内容"
\033[0;32 "..." \033[0m 表示绿色打印中间字符串变量
在命令行输出绿色提示"Deploying updates to GitHub..."
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
将中文目录下的文章复制到英文目录下
cp -rf ./content/zh/posts/* ./content/en/posts/
清除缓存
git rm -rf --cached $(git ls-files)
提交内容
git add .
提交说明
$#表示提供的参数个数
$1表示提供的第一个参数
msg="rebuilding site `date`"
if [ $# -eq 1 ]
then msg="$1"
fi
git commit -m "$msg"
推送到远程仓库
git push -u origin master这样子, 博客文章发布或者站点配置更新流程就变成了:
1
2
3
4
5
6
7
8
9~/blog-yoli/
hugo新建markdown格式的文档:
hugo new /zh/posts/postname.md
打开markdown编辑器编辑postname.md文档内容并保存
需要学习一些基本markdown语法哎呀呀
推荐Typora 所见即所得 搭配pigGO进行图床管理很方便
然后终端直接运行脚本yoli.sh
bash yoli.sh "关于本次提交的说明,比如: 添加了评论系统"
大概过个一两分钟(第一次部署会慢些)就能通过配置的域名yolichan.fun访问博客站点啦使用
cloudflare提供的CDN加速服务来为访问网站提速只需要在
DNS管理那里将代理状态勾选上即可, 如果需要SSL/TLS 严格加密模式, 可以在解析A记录时暂时将代理状态禁用, 也就是暂时禁用CDN, 解析生效后, 在GitHub Pages后台开启Enforce HTTPS, 待Github Pages的https生效后, 再将CloudFlare的代理状态启用.
后记
搭建网站的事四月前就开始弄了, 几乎没接触过前端的我为了赶工照猫画虎弄出了一个很简单的demo, 最最最离谱的是当时连评论系统都建好了, 结果创建的文章不能显示, 当时迷迷糊糊用了一些野路子最终还是把生日祝福加上去了, 但是但是, 由于踩坑受创太多, 后面一直在摆, 小破站就像一间漏雨的小屋, 一直没有得到修补(修理工😢). 兜兜转转到7月, 心中还是没能放下小破站, 正好经历了一些心境的转变, 开始对自己不再那么push, 经历了一次搬家算是彻底告别了校园生活, 每天骑自行车去工位, 然后回到自己的小窝, 开始动手自己带便当🍱(单位食堂好贵…). 日子归于平静, 反而一点一点重拾了建站的信心, 因为当初的bug一直没有排查, 所以除了一些能看懂的配置文件(实在不想再配置一遍), 源码删了个尽, 后知后觉想起生日祝福的页面还没有保留的时候我😢😢😢.
打开教程从头来了一遍, 鉴于之前的踩坑经验, 再建站反而要顺利很多, 就连文章不显示的bug在不知不觉间摸清了, 然后我收获了:
一些html和css代码的调用原理, 一些markdown基础语法, git管理工具, 还有困扰我已久的GitHub到底是用来干嘛的. 之前一直以为就是一个存代码的云盘, 现在发现还能进行版本管理以及GitHub Pages \ GitHub Action等工具也很有趣, 之后的评论系统/图床管理也都用到了GitHub, 虽然现在的我依然无法给出一个准确定义, 但至少它现在在我眼里是一个神奇的网站. 其实还运用到了go语言的知识, 但主要是一些模板和短代码使用到了go语言语法, 而这部分基本上是直接网上复制来的, 最多修改一些参数, 所以不会go语言其实影响不大. 奇怪的知识一直在增加…但很有趣…除了bug…
回归建站初衷. 曾经经历过一段封闭压抑的日子, 仿佛一台卡住了传送带的机器, 只有输入没有输出, 结果就是内部部件的损耗. 然而主流的社交平台太多限制, 管理起来也有诸多不便, 所以博客或许会是一个不错的选择. 就是这忽高忽低的分享欲…还有就是和好朋友分开了, 积攒的很多分享欲常常会搁置过期, 记忆它时常出走…如果能将这些想法记录下来放到小站上, 想起对方的时候就打开博客看看, 感觉很不错的样子, 所以接下来的工作: 除了继续完善小站的搭建(一点修理工的自我修养)以外最重要的就是实现共同协作啦, 一起期待吧◕‿◕｡
TODO
- 网站美化\文章样式设计\图床管理
- 搭建评论系统
- 添加站内搜索功能
- 配置友链展示页面(有总比没有好hhh)
- 实现共同协作
- 增加网站数据统计分析功能
- 添加自动关联文章功能
- 添加回到顶部按钮
- 等一个适合的logo
- 完善音乐播放等多媒体配置