引入

已经好久没有写博客了,近期准备重新拾起这个习惯,决定再次开始写一些东西。最终决定使用 Hugo + Gogs + Drone 搭建,使用这个组合的原因如下:

  • Hugo 是 Golang 的一个静态博客生成器,对 Golang 感兴趣,所以博客也选择了这个,同时早期的博客使用 Hexo 写的,方便迁移
  • Gogs 作为 git,Drone 作为 CI 工具原因是服务搭建在自己的 NAS 中,这两个服务是轻量级的服务省 CPU、省内存。同时其中语言为 Golang,尤其是 Drone,可以轻松的添加一些自己需要的插件,所以选了这个组合

Hugo 配置

选好相关的服务后,应该具体配置一些什么来使用博客?

主题配置

必须是 even,在 hexo 期间就非常喜欢这个主题的样式,最近听说已经迁移到 hugo 中,果断选择。具体的项目地址是 https://github.com/olOwOlo/hugo-theme-even.git

Hugo 的配置过程也十分简单,将主题下载到 themes 文件夹中

1
git clone https://github.com/olOwOlo/hugo-theme-even.git themes/even

even 的 config.toml 与其他主题不同,需要单独从 exampleSite/config.toml 中复制出来,并修改这个具体的配置,其中 config.toml 的配置相当详细,我就不在这里赘述其中配置方面的事情了

构建方式配置

Hugo 整体构建十分简单,首先先将主题下载到 themes 目录中,其次执行其构建命令

1
2
git clone https://github.com/olOwOlo/hugo-theme-even.git themes/even
hugo --config config.toml

该主题下博客的样式

整体流程配置

整体流程上希望最终完成配置后,服务可以做以下几个事情

  1. 从具体的 Git 上 Clone 你所需要的代码
  2. 进行 Hugo 的构建
  3. 将构建好的静态文件上传到 github.io 中
  4. 发送通知消息,构建完成

Clone 部分

这部分不用自己操心,Drone 会默认完成这一步骤

构建部分

当前我使用的是 webhippie/hugo:latest 镜像进行 Hugo 的构建,在其中执行 Hugo 的相关构建命令即可

上传到 github.io 中

这个步骤比较方便 Drone 在 http://plugins.drone.io/drone-plugins/drone-gh-pages/,提供了相应的构建镜像 plugins/gh-pages,具体设置按照相关要求配置即可,我是这样设置的

1
2
3
4
5
6
7
8
user_name: "user_name"
user_email: "user_email"
pages_directory: public
upstream_name: origin
target_branch: master
remote_url: # github.io 的具体 git 地址
ssh_key:
  from_secret: ssh_key

通知构建完成

Drone 对通知这部分也提供了很好的插件 http://plugins.drone.io/yakumioto/drone-serverchan/,按照其中提示配置后,即可在 ServerChan 的微信公众号中收到构建完成的信息

具体的 .drone.yml

通过 vim .drone.yml 修改 CI 所需要的配置,以下是整体的配置

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

steps:
  - name: build
    image: webhippie/hugo:latest
    commands:
      - git clone https://github.com/olOwOlo/hugo-theme-even.git themes/even
      - hugo --config config.toml

  - name: publish
    image: plugins/gh-pages
    settings:
      user_name: ""  # 你的 git username
      user_email: ""  # 你的 git email
      pages_directory: public
      upstream_name: origin
      target_branch: master
      remote_url: ""  # github.io 的具体 git 地址
      ssh_key:
        from_secret: ssh_key

  - name: send-wechat
    image: yakumioto/drone-serverchan
    settings:
      key:
        from_secret: server_key
      text: ""  # 通知的标题
      desp: ""  # 通知的具体信息

Drone、Gogs 中的配置

激活 Repository

设置 Secrets

由于有些 key 不适合配置在 git 中,在编写 .drone.yml 的时候采用了 from_secret 命令,将密钥配置在 drone 中,填写后通过「ADD A SECRET」添加

Gogs 中配置

检查默认设置的 Web 钩子是否正确

具体是否正确可通过「测试推送」来确定

Git Commit & Push

最终在以上内容完成后,并且有一个未提交的修改 .drone.yml 的 commit 后,git push 触发自动构建,查看效果

总结

根据以上这么一顿的折腾,相关配置总算完事儿,说说几个感受吧

  • Hugo 很完美,生成文件速度极快,同时搭配 even 主题,博客的样式也十分好看
  • Gogs + Drone 两个服务的功能轻量级,不过该有的全都有了,Drone 的 UI 也是分好看,比常用的 Jenkins 好多了
  • 最终配置了一个 CI / CD 的功能,修改东西十分方便本地编辑完合并到 git 中,后面的各种功能完全不用操心,等到手机收到微信通知后,在线博客就完成了相关更新