搭建博客网站越来越容易了。从最开始的手写页面后台,到使用WordPress框架定制各种功能,到逐渐流行的静态博客生成器、Github自动托管,流程一直在变得简单优雅,让人更集中于关注内容。

之前在博客网站上折腾了不少东西,对工具、主题的审美不断变化,直到最近才稳定下来,整个流程有让人满意的几点:

  • 使用Markdown格式写作,简洁高效,支持图片和代码块
  • Git进行版本控制,整个博客内容放在Github私人仓库,可以随时随地访问,不用担心丢失
  • 网站使用CDN进行分发,访问流畅无压力
  • 整个流程是自动的,博客更新后,一条命令就能上传内容,更新CDN

这里记录现在的方案,希望有所帮助。

静态网站生成

现在有很多静态博客生成的工具如Hexo、Hugo、Jekyll等,只需要自己写Markdown文件,下载一个主题,就能生成一个静态网站。

我现在用的是Hugo,一个用go语言写的网站生成器,特点是快,我的网站只要几百毫秒就能生成。使用起来也简单方便,网上有很多资料,这里就不介绍了。

网站生成后,建一个私人Github仓库传上去。Github非常良心地可以免费托管个人博客和项目主页,所以只要在项目页面简单设置一下,就可以得到一个***.github.io的网站,网站内容会根据自己上传的内容自动更新,完全可以作为满意的个人博客。

Github Actions与CDN

但是,由于特殊原因,大陆访问github页面很慢。这时候就需要做些优化了,Content Delivery Network-内容分发网络,它的原理是把网站的静态资源如.css、.js文件等缓存到位于各地的网络节点上,这样即使距离比较偏远,访问就近的节点就能访问网站,速度飞快。由于博客网站上全都是静态资源,所以整站都可以直接托管在CDN上,光速有多快,访问就有多快(误)。

我使用的是阿里云的CDN,需要把自己的域名解析到CDN上(国内需要备案),在博客更新后,同样把网站上传更新到OSS,然后把CDN的源设置为这个OSS,这样CDN就会自动更新了。

多一个步骤就多一点繁琐,幸好,通过Github Actions可以帮助自动上传到OSS。Actions是自动集成的工具,我们可以自己定义各种触发执行的操作,例如,当我们push到github上之后,就自动把网站上传到OSS,这样自动推进整个流程。其配置大概像这样,定义在什么条件下执行什么操作:

name: Push to Aliyun OSS

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: checkout
        uses: actions/checkout@v2
      - name: setup ossutil
        uses: manyuanrong/setup-ossutil@v1.0
        with:
          endpoint: oss-cn-shanghai.aliyuncs.com
          access-key-id: ${{ secrets.OSS_KEY_ID }}
          access-key-secret: ${{ secrets.OSS_KEY_SECRET }}
      - name: upload files to aliyun
        run: |
          ossutil cp -rf ./docs/ oss://gooong-blog/

这样,在每次本地写完博客之后,只需要git push更新仓库,远端就会自动把网站上传到阿里OSS,然后阿里云会把内容更新到各地的CDN节点,各地都能访问到最新的内容了。