Hexo + Github Pages 搭建个人博客
NGshiyu/NGshiyu.github.io
写在最前
感谢开源世界和 AI 的发展,让我由于懒一直搁置的计划,得以实现!!!🙏🙏🙏🙏
碎碎念
从踏入互联网开发领域的起始,就一直有建立个人博客和个人知识库的想法, 个人知识库建立经历过从 OneNote-Notion-Obsidian-Github, 也算是积累了一些东西,但是个人博客却一直由于各种自我找理由而迟迟没有推进。
在一个忙里偷闲的周末下午,我突然想起来了老师的一段话,大意是: 作为一名开发者,强烈建议大家坚持写博客,不管你是在哪里写,一定要动起来, 一是为了积累你自己的知识,技术发展的速度太快内容太多你是跟不上的,记下来反复咀嚼才行; 二是为了能让你有一个自我的总结,在写博客的过程中,你要给别人看, 自然需要深入浅出,让别人能看懂,这也是你自己增进理解的过程。
在六年之后再次回想起这句话,感觉像是在过电影,好几个中文博客站只是起了个头就放弃了,好像这几年什么都没有留下,处于一种有秩序的混乱中,迷茫驻足又被推着走。 算了,不上价值,不谈收获,确实是需要给自己留点什么,那就从现在开始吧!
组件选型
- Hexo: 基于 Node.js 开发的开源静态博客框架,将 Markdown 的文件处理为静态的 HTML 网页,结合内置的插件等内容,编译为静态网页部署到服务器
- Next: 一个高质量主题插件,集成了一些插件功能,同时也具备扩展能力,可以快速定制你的个人博客。参考
- gitalk: Next 集成的一个 GitHub 评论框架,接入 GitHub Issue,
- … Next 集成了一些使用的插件,感兴趣的可以自行探索
- Github:用于存放博客的源数据,并结合 Actions + Pages 的能力实现自动化部署和代理访问
通过这种方式,可以实现 0 成本搭建博客,并且因为是托管在 GitHub 上面的,你也无须担心被攻击,只要注意避免在公开的仓库中泄露自己的隐私即可,而且上手的成本非常低。
搭建博客
准备 Github 仓库
- 添加一个 GitHub 的仓库,命名为 xx.github.io,添加 README.md
- 为了本地的结构清晰,环境干净,这里仓库直接留空
安装 Hexo
- 创建本地的 Hexo 工作空间文件夹
~/Hexo - 执行 Hexo 的安装命令
1 | npm install -g hexo-cli # 全局安装 |
执行完成这几步你的仓库 Hexo 就搭建好了,这里的小巧思是这样我就可以使用任意的编辑器(如 WebStorm、VsCode)把我的 GitHub 上的博客项目当作一个工程打开, 对于我来说比较干净清晰,接下来只需要关联 GitHub 代码仓库和你的 Hexo 工程,使用仓库的提示处理,将本地工程推送到 GitHub 即可
GitHub Actions + GitHub Pages 自动化部署
- 添加
.github/workflows/hexo.yml - 添加如下脚本内容
1 | # Sample workflow for building and deploying a Hexo site to GitHub Pages |
- 这一步完成你的博客已经搭建好,可以投入使用了
个性化配置
Hexo 相关的主题有非常多,大家可以自行浏览Jekyll Themes,找自己喜欢的使用,我本人使用的是 hexo-theme-next
下载主题
next 主题经历过多次迭代,检索的时候注意使用最新的版本,参阅最新的配置文档
next 主题支持多种安装方式,我使用最便捷的方式安装 npm install hexo-theme-next --save,这个方式不用管理过多的文件,避免在后续不断迭代的过程中代码仓库过大 git pull 的时候慢
配置
将 next 主题的配置文件迁移到主目录,方便做个性化配置,原始文档的注释也很齐全,英文不好得可以让大模型做一次翻译或者直接参考我的配置文档1
cp node_modules/hexo-theme-next/_config.yml _config.next.yml
同时,Hexo 和 Next 主题本身就自带了一些插件,如何配置可以参考对应的插件仓库
工作空间优化(注意密钥等内容添加到gitignore)
direnv
控制本地的特殊环境变量,而无须污染全局bash环境,在项目内添加文件.envrc,如:1
2
3~/.envrc 或 项目/.envrc
export FOO=foo
export NODE_ENV=development
使用 direnv allow 加载变量,
Tips:
direnv并不支持局部alias配置,所以需要下面的工具
Just
使用 just 工具优化本地处理的流程,简化局部安装 Hexo 过于繁琐的命令,在项目内配置 Justfile 如:1
2
3
4
5
6
7
8
9
10
11
12
13!/usr/bin/env just --justfile
export PATH := join(justfile_directory(), "node_modules", "bin") + ":" + env_var('PATH')
build:
npx hexo generate --dev
clean:
npx hexo clean
server:
npx hexo server
run:
npx hexo clean && npx hexo generate --dev && npx hexo server --dev
all:
npx hexo clean && npx hexo generate --dev
同时这个工具可以结合 WebStorm 的插件使用,更加方便
WebStorm 插件
env
根据 .env、Dockerfile 和 docker-compose.yml 文件自动补全环境变量。
总结
到此处就基本拥有一个可以投入使用的博客了,如果想要美化或者添加更多的功能,可以通过 _config.next.yml 配置和 plugins 继续探索!