使用 Git + Drone 自动发布我的 Hexo 博客

, , ,

从重建博客说起

从前段时间使用 Hexo 重建了博客开始，我一直使用 Typora 在本地写博客，Typora 的体验是很棒的，Hexo 带来的网站体验也不错。通常的写作体验如下：

  1. 创建文章的时候，我需要执行

    1
    hexo new post title

  2. 然后在 Typora 中写作，Typora 我直接打开了 path/to/hexo/source/_posts 这个目录，有新的 Markdown 文件在侧边可以看到。

  3. 写作完成后，切到终端执行

    1
    hexo g

  4. 之后调用我自己写了一个同步脚本，将 public 中的文件全部同步到 OSS 中。

整个流程需要不断地切换软件，比较繁琐。

由于我的博客为了备份，在自己的 Git 仓库（Gitea 搭建）中也会上传一份，也就是说，还要一个第五步

  1. 提交并备份代码

    1
    2
    git commit -m 'message'
    git push

由题意得，步骤 3、4、5 其实可以合并为一步。既然用到了 Git，那这情种况，使用 CI/CD 工具是最好的办法了。

Drone

Drone 是我在搭建 Gitea 仓库的时候，就一起部署好了的了，然后它就开始吃灰。终于有一天，我想起了自己这一套已经配好的代码托管 + 自动构建平台。自然而然，就可以用这一套环境来实现我的自动构建的想法了。

当时选 Drone 的理由很简单，就是觉得 Jenkins 界面太丑了。

其实早些的部署，并不能算是完全体，还差一个 Runner。不过这个很容易装，拉下来镜像，写个 docker-compose.yml 启动即可。

编写 .drone.yml

由于 Drone 的配置文件是放置在项目目录里的，只需要在 Hexo 目录下新建一个 .drone.yml 文件，并开始写构建步骤就好，我的配置文件大致如下

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
---
kind: pipeline
type: docker
name: default

steps:
  - name: build
    image: node:lts
    commands:
      - npm i --registry https://registry.npm.taobao.org
      - npm run build
  - name: sync
    image: ossutil
    pull: never
    environment:
      OSS_ENDPOINT:
        from_secret: OSS_ENDPOINT
      OSS_ACCESS_KEY_ID:
        from_secret: OSS_ACCESS_KEY_ID
      OSS_ACCESS_KEY_SECRET:
        from_secret: OSS_ACCESS_KEY_SECRET
      OSS_BUCKET:
        from_secret: OSS_BUCKET
    commands:
      - "ossutil config -e $${OSS_ENDPOINT} -i $${OSS_ACCESS_KEY_ID} -k $${OSS_ACCESS_KEY_SECRET}"
      - "ossutil cp -rf ./public oss://$${OSS_BUCKET}/"

Runner 工作时，Drone 会创建一个临时的镜像用来进行这些操作，其中当前目录（默认是 /drone/src）是 Drone 拉取到的代码存放的位置，而所有的命令都是在项目目录下进行。在这里我一共用了两个镜像。

  1. 第一步中，使用 node:lts 镜像，用来提供 Node 环境。在镜像里安装依赖，并进行构建。这一步已经做完了生成 Hexo 静态网页的事情。

  2. 将生成的文件上传到 OSS。这里用的镜像是我自己构建的一个镜像，Dockerfile 如下，是在 docker-ossutil 的基础上做了调整：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    FROM alpine as certs
    RUN apk update && apk add ca-certificates

    FROM busybox:glibc
    COPY --from=certs /etc/ssl/certs /etc/ssl/certs

    ENV OSSUTIL_VERSION 1.6.0

    RUN mkdir -p /usr/local/bin \
        && wget http://gosspublic.alicdn.com/ossutil/${OSSUTIL_VERSION}/ossutil64 -O /usr/local/bin/ossutil \
        && chmod +x /usr/local/bin/ossutil

配置Secrets

Drone 的 Secrets 是用来在管理后台上配置的一些比较秘密的参数，比如各种 Token 各种 Key。界面如下图：

只能添加和删除，不能查看，写错了就得重写。

使用的话就是上面写的 .drone.yml 中的 from_secret 就可以拿到数据了哦。值得一提的是，如果加一个命令，打印从 secret 中拿到的值，在 Drone 的控制台里会显示成 ****** 的。

开始构建

激活后的 Drone 配置，无需手动干预，只需要将代码推送到 Gitea 上，就开始了自动构建。

可以看到，虽然执行了 npm 安装依赖，但是由于淘宝镜像源的关系，还是很快速的，如果盯着看整个构建过程的话，会感觉赏心悦目。Drone 把界面、实时的状态变更和控制台的输出都处理的很优雅，看来我没选错（偷笑。

踩的坑

Node 依赖

本来是想先创建一个已经安装好了 node_modules 的镜像作为基础镜像，之后再就不需要安装依赖，但是由于 Drone 在构建的时候，创建了一个 Volume，每一步的操作的镜像都会把这个 Volume 映射到 Docker 中。这个 Volume 实际上也就是工作的空间，又加上 Drone 会克隆仓库代码到工作目录，又会清除原来的文件，种种原因把我给绕晕了，最后就先放弃了这个方式，改用每次都安装依赖。

好在使用了淘宝源，安装的速度还是很快的，所以这一块以后再具体研究一下。

Drone 执行命令

最早看到了 docker-ossutil 这个镜像，我是想直接拿来用的，但是 Dockerfile 中最后声明的 ENTRYPOINT，给我整晕了，毕竟这个镜像一启动就会执行指定的命令，需要提供的只有参数即可，查了半天没找到怎么在 .drone.yml 中仅配置参数，只好暂时放弃，自己重新构建了一个镜像，然后执行了两条命令搞定。

OSS 的 Endpoint

OSS 的 Endpoint 是用来提供服务的主机名，不同的地域是不同的。我一开始只配置了地域名，导致失败了几次，低级错误。

具体的地域和 Endpoint 对应表在这里可以看到 https://help.aliyun.com/document_detail/31837.html

小结

一篇文章写下来，反而觉得自己折腾了一晚上搞的事情居然没啥技术含量。而且也有不少粗心大意的低级错误卡进度的。有细节的问题，我会再更新到这篇文章。自动发布博客至此就粗略的告一段落，至于离我预期的流畅体验差多少呢？还是挺多的，以后会开个新坑，来不断完善自己的写作体验。