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

之前在博客网站上折腾了不少东西,对工具、主题的审美不断变化,直到最近才稳定下来。现在使用Hugo生成静态网站,项目存储在Github私人仓库中,通过github pages发布网站,在国内通过阿里云OSS和CDN进行访问,整个流程有让人很满意的几点:

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

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

静态网站生成

现在有很多静态博客生成的工具如Hexo、Hugo、Jekyll等,只需要自己写Markdown文件,就能生成一个静态网站,还可以通过配置一键更换主题,非常方便。

我现在用的是Hugo,一个用go语言写的网站生成器,特点是快,我的网站只要几百毫秒就能生成。已有的网站主题也较多,我现在(2020)使用的主题是Theme Slim,特点是十分简洁,之前用过的Hugo Paper主题也很不错。

使用这些工具,可以将自己的文章MarkDown文件生成html页面,并组织成一个网站,这时候找个托管静态网站的地方就能把网站搭建好。

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/

这里定义的效果是,每次push之后,就将./docs目录下的所有文件上传到阿里云OSS,在阿里云那边设置CDN与OSS绑定,就会自动刷新CDN的内容。

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