Docker 环境下配置 Hexo 博客
Hexo Blog
记录博客搭建管理的技术栈和流程
博客的技术方案选择: [Hexo+github.io][https://hexo.io/zh-cn/]
博客模板选择: [Butterfly][https://butterfly.js.org/]
博客文件管理模式:
- 使用 docker环境管理:[独立使用 docker 编译环境][https://github.com/IdeaMeshDyx/dev-enviroment/tree/main/hexo]
首先是选择一个合适的博客管理技术栈,实际上借用已有的博客平台比如[掘金][https://juejin.cn/],[开源中国][https://www.oschina.net/],[CSDN][https://www.csdn.net/] 等可以节省自己部署成本,但是这些平台太过于复杂且页面风格等方面难以符合自己的需求,最重要的是太过于复杂和笨重。
使用静态博客需要花费更多的精力,但是也可以更贴近开发方式,也可以作为部分技术点的试验方式,故选用这个需要折腾的方式。目前最为著名的两个技术栈是:
其中 Jekyll 有github支持,可以直接在github网页上编辑,但是技术要求较高,后期等到博客管理维护的方法论和技术流程成熟了就切换成这个试试。Hexo基于node.js 实现,有非常多的教程和资料,许多操作都做了封装和优化,可以在本地进行调试,作为学习和测试的方式来说非常适合。其他博客技术对比资料参考静态博客搭建工具汇总,[Top ten popular static site generators (SSG) in 2023][https://medium.com/@ezinneanne/top-ten-popular-static-site-generators-ssg-in-2023-e1894fca6925],[Jekyll / Hugo / Hexo Comparison][https://lexcao.io/posts/jekyll-hugo-hexo/],[Gatsby, Ghost, Hugo, Jekyll or another static site generator?][https://www.reddit.com/r/webdev/comments/10qpeu9/gatsby_ghost_hugo_jekyll_or_another_static_site/]
Docker 管理环境
不论选用哪一类技术,当切换设备和环境的时候,以往部署的 ruby,nodejs 环境就需要重新部署,而这往往是成本最高的地方,容易受到操作系统、设备硬件、网络状态的影响,所以采用 Docker 镜像做统一的管理。
Docker 管理的方式是 Docker 内配置博客需要的所有的环境依赖,包括nodejs、ruby、github sshkey等等,然后通过挂载本地博客项目文件的方式来获取源文件,这样就可以使用本地 IDE 编辑文件,然后利用 Docker 环境编译生成和部署。
Docker 环境部署参考:https://github.com/IdeaMeshDyx/dev-enviroment/tree/main/hexo
也可以直接使用本博客目录下面的docker-compose.yml
来启动
Markdown文章内容
简单的模板, 配置在/scafffolds/post.md
中
1 | --- |
然后每次使用 hexo new
创建新的博客时候就会采用这个格式
github + hexo 部署流程
当完成了博客的内容编写之后,需要编译静态文件同时发布的github上,遵循以下流程:
1 | # 所有的修改都在 blog 分支上进行 |
然后在github上需要通过配置 workflow 流程来编译文件
具体操作是:
- 建立 <你的 GitHub 使用者名称>.github.io 的仓库,username 是你在 GitHub 上的使用者名称,若之前已將 Hexo 上传至其他仓库,那就改个名字。
- 將本地的 Hexo 项目 push 到仓库的预设分支,预设分支通常名為 main,旧一點的仓库可能名為 master。
將 main 分支 push 到 GitHub:为了保障1
$ git push -u origin main
hexo s
生成的文件不会上传到远程仓库,预设情況下 public/文件目录 不会被上传(也不该被上传),保证 .gitignore 中有一行 public/就可以实现了。
可以直接参考本博客的目录结构来看是否配置正确。 - 使用 node –version 指令检查Docker上的 Node.js 版本(目前我用的是 20)。之后到github 网页的仓库中 Settings > Pages > Source,並将 Source 改为 GitHub Actions。
然后在仓库中创建 .github/workflows/pages.yml,並填入以下內容 (將 20 替换为上述步驟中记下的版本):
1 | name: Pages |
这个也是学习 github workflow 的一个好机会。
部署完成之后,每一次提交pr都会触发github编译这个环境,就不需要使用 hexo d 来完成推送了。