使用Hexo快速搭个人建博客并实现写作过程的CI/CD

最近想写点东西,谈谈技术中的一些沉淀,谈谈生活中的一些思考,包括一直想分享的Ingress经历,于是就有了这个用Hexo搭建的个人博客。

诉求

作为一个有(不)点(怕)追(折)求(腾)的Coder,建立个人空间这事儿一定是离不开一点极客精神的。以下几点都是对博客功能的基本诉求:

  • 写作方式要支持Markdown,专注内容而不是排版
  • 能用Git做文章的版本控制,方便归档、比对,以及多设备写作时的共享
  • 正式发布文章前要能够预览效果,确认后可以立即发布,所见即所得
  • 能够快速恢复博客版本至历史中的某个存档
  • 主题界面能够很方便的切换选择

Hexo + GitHub/GitLab 能够快速满足以上所有诉求。

效果

整个建站花费半天时间,最终实现了下图的写作过程的CI/CD,纵享丝滑。

至此,从一篇文章的写作到发布,仅仅需要做这3件事:

  1. 切换至本地站点目录hexo new 文章名,MWeb打开编写Markdown,文章中的图片自动上传至图床
  2. 浏览器F5刷新,本地查看效果是否满意(hexo s开启本地Hexo Server)
  3. 执行hexo g -d生成网站目录并发布(合并图中3、4两步)

此外,独立于这三个步骤,source目录还可以按自己的需要做Git版本控制,比如每写完一篇文章做一次提交,可以把这个过程和hexo g -d放到自定义的脚本里一起执行。

所以,实际用到了两个独立的Git仓库,一个用于站点source目录md源文件,一个用于public目录站点文件。

关于CI/CD

CI/CD直译过来就是持续集成/持续交付,这个理念随着容器化技术的兴起有了越来越成熟的落地方案。对于还停留在手动部署阶段的技术团队来讲是一件非常兴奋的事情,毕竟最终实实在在解放了生产力,维护了程序员的青春。

CI/CD就像是工厂里的自动化流水线,在流水线上,有原材料,有加工车床,有检验人员。数控车床加工原材料,生产出成品,经过检验,选出良品,送上货车销往市场。

工厂里的流水线和我们开发软件的过程有类似的地方,都有开发(车床加工),测试(通过检验),发布上线(送上货车销往市场)的流程,流水线上的职责也分为搬运原材料的工人、负责检验的质检员、将产品运往市场的司机。

和自动化的流水线一样,软件开发过程中也需要不同的职能岗位分工协作。这就延伸出软件开发中DevOps这个概念,对于DevOps的理解,当然不应该简单的等价为Dev(开发) + Ops(运维)这两个岗位。但这里我们不妨先局限于这样的理解。身处创业团队,后端工程师干的就是Dev + Ops的工作,因为没有专门的运维工程师,在开发之余花上一点时间做一些自动化的工作,往往是件一劳永逸的事。

对于一个健全的软件项目,往往有这样几个环境:

  • 本地开发环境
  • 测试环境
  • 预发布环境
  • 生产环境

回到写博客这件事,我们需要的只是第一个——本地开发环境,以及最后一个——生产环境,最终只需3步就完成了从生产加工->检验测试->发布上线的整个过程。回顾一下这三个步骤:

  1. 切换至本地站点目录hexo new 文章名,MWeb打开编写Markdown,文章中的图片自动上传至图床
  2. 浏览器F5刷新,本地查看效果是否满意
  3. 执行hexo g -d生成网站目录并发布

现在惊喜的发现,1、2、3是不是刚好对应了生产加工、检验测试、发布上线!其中前两步对应CI,第三步对应CD的过程。

当然,以上这些都是我在扯淡,CI/CD的真正价值是体现在成规模团队协作中的。

这样写博客,有多爽只有自己知道。

搭建步骤

最后记录下自己的搭建步骤,大部分与官方文档无异,特别说明的是,关于GitHub的Webhooks,由于众所周知的原因,GitHub无法直接访问到境内的服务器,这里用香港机器做了一下中转,再用rsync同步至境内站点目录。

环境搭建

以下是在macOS 10.15系统下的搭建记录:

安装Node.js

略……

安装Git

略……

安装Hexo

值得一提的是,开始我把Hexo装在了远端服务器,实际上远端并不需要,参考效果图,Hexo相当于本地编译Markdown文件的一个开发套件。

1
npm install -g hexo-cli

安装 Hexo Server

为了能够本地调试,需要安装hexo-server,这是一个用于本地查看效果的静态服务器。

1
npm install hexo-server --save

启动:

1
hexo server

安装 Git部署插件

为了能够执行hexo d,需要安装 hexo-deployer-git:

1
npm install hexo-deployer-git --save

并修改配置:

1
2
3
4
5
deploy:
type: git
repo: <repository url>
branch: [branch]
message: [message]

实际上,hexo d就是把public目录的变动内容commit并push至远程仓库,所以需要执行前需要一个前置操作hexo g,这个命令用Hexo编译Markdown生成站点public目录。这两个命令可以简写成一条执行hexo d -g或是hexo g -d,一样的意思。

建站

安装 Hexo 完成后,执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
hexo init <folder>
cd <folder>
npm install

新建完成后,指定文件夹的目录如下:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

_config.yml是站点的一些基础配置,参考官网按自己需要配置即可。

接下来一步并不是必须的,source目录是存放Markdown文本的目录,非常适合用Git进行版本控制管理。

1
2
cd source
git init

安装主题

Hexo安装主题非常方便,只需要在themes目录下载对应主题,并在主目录_config_yml中修改一下theme字段即可。

Hexo有很多定制的主题,我这里选择了melody这个主题,功能全面又简洁大气,很喜欢,具体配置参考官方文档

Webhooks

这一步并不是必须的,hexo d -g后也可以切换到远端机器,手动git pull,但为了实现CD,这样折腾一下也好,因为用的仓库是GitHub,需要先用香港的机器当跳板。

首先需要在服务端开启一个监听服务,搜一个现成的,下载安装:

1
2
3
4
wget http://img.sgfoot.com/github-webhook1.4.1.linux-amd64.tar.gz
tar -zxvf github-webhook1.4.1.linux-amd64.tar.gz
mv github-webhook /usr/bin/
chmod u+x /usr/bin/github-webhook

启动:
默认端口: 2020
有效访问地址: http://ip:2020/web-hook

1
nohup github-webhook -b [shell脚本路径] -s [github webhook设置的密码] & 

然后在GitHub仓库配置Webhooks:

后续要做的事

评论系统打算使用Gitalk,不会科学上网随缘评论。
图床想使用国内的阿里云OSS,做个域名备案方便点。
暂时想到这些,多写写文章提升表达技能,才是头等大事。最近发现自己看懂,再给别人讲解清楚,这中间的过程是需要很多思考的。

文章作者: YueYang
文章链接: https://liuyueyang.top/020245.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YY的闲时小站
文章订阅: 微信搜索:yueyang_top,关注公众号:悦洋的闲时小站,即可订阅本站文章实时动态
长按识别,交个朋友 (๑•̀ㅂ•́)و✧