博客搬家 - 记第四次搬家(hugo建站推送到谷歌云存储)

写在前面，搬迁记录

记录个人博客此次搬家过程。个人博客以前经历过：

1. wordpress
2. github page
3. Bitcron - 机制很不错（写完的博客自动保存到dropbox并发布，惋惜搜索引擎的收录不是很好。）
4. 此次搬迁 2020年4月10日 初步完成

博客的架构

如今写博客一直采用 markdown 语法，因此也是本次能够顺利迁移的一大前提。 最近两年一直用的是 Bitcron ，很是顺滑。每次写完 md 文件，直接保存便可（博客当即更新可见）。不过一直搜索引擎的收录不是很好，如我直接搜索 "Bob Jiang" 个人博客始终排不到第一个。很奇怪......

索性如今申请了一年免费的 google cloud，就作个搬迁。

搬迁以后的博客存储在 google cloud storage 上，DNS也顺便切换到 Cloudfare 上了。 博客系统使用的是 hugo ，主题用的是 Ezhil。博客总体存放于 github上，每次提交到github会自动出发一次 github action，推送到谷歌存储。

博客的工做流

博客的工做机制以下：

1. 本次编写博客(md文件) 并本次检查 (hugo server)
2. github push 到 github 仓库
3. 每次 push 或者 pull request 会出发 github action
4. github action 进行 hugo 编译
5. github action 推送博客静态文件到 谷歌存储

博客的配置 (手把手教你配置)

第一步，配置hugo

安装 hugo 能够参考我朋友的博客，免费搭建一个静态博客。搭建完成后，关于主题，这里我采用的 hugo 主题是 Ezhil，能够直接用 github fork一份 hugo 主题。具体操做参考 Ezhil。

hugo和主题都准备好后，目录结构以下：

• content/ 博客的源文件，markdown格式
• public/ 博客的静态网页，hugo自动生成（根据你选择的模板生成漂亮的静态网页）
• static/ 博客的全局静态资源，如全局使用的图片
• theme/ 博客的主题
• config.toml 博客的配置文件

第二步，新建github仓库

github上须要建立一个新的仓库 （假设你已经有了github帐号）。而后把本地的博客目录中，除了 public/ 目录的内容推送到代码仓库中。

1. 访问 github，登陆（注册）帐号
2. 新建一个仓库，以下图，点击 New Repository

1. 填写仓库的名字，选择仓库的可见性（默认公开的、能够选择私有的），勾选初始化时建立 README 文件，以下图：

下一步须要建立并配置 谷歌存储 - Google Cloud Storage，而后再回来配置 github secrets

第三步，google cloud storage

这里我用的谷歌存储，也能够选择国内的阿里云，腾讯云的OSS服务。

谷歌存储 - Google Cloud Storage，须要建立一个存储。 访问 Console 以下图

3.1 建立存储（bucket）

建立存储，注意：名字必-须是 www.yourdomain.com 不能设置为根域名（即这里须要是 CNAME 的名字设置bucket名字）。 根域名能够经过 DNS 的设置来实现。

注意存储分区（bucket）名字必须是 CNAME 域名的名字（必须是彻底一致），如个人分区名字是 www.bobjiang.com。存储分区不支持直接更名，能够先建立新名字的存储分区，而后把数据转移过去来实现。

访问权限，能够修改成"统一"方式，这样能够简单操做。

3.2 增长访问权限

下面是为新建的存储分区（bucket）增长访问权限，点击"修改存储分区权限"点击"添加成员"输入 新成员：allUsers， 角色：Storage Object Viewer （要严格检查这里的角色权限）

最后能够检查一下权限的设置，这里应该提示以下："在互联网上公开"

3.3 权限设置

这里主要设置 服务帐号 （service account），为了给其余的第三方进行服务（如接下来咱们用 github action 链接）受权。

1. 进入服务帐号页面，选择"IAM和管理"，点击"服务帐号"，如图

1. 点击"建立服务帐号"

1. 输入"服务帐号名称"，"服务帐号ID"，和"服务帐号说明"

1. 第二步默认值便可，进入第三步以下图，点击"建立密钥"

1. 选择密钥类型 JSON

1. 密钥生成后，保存到本地（必定保存好密钥，不要丢失）。使用这个密钥和服务帐号，就能够访问你的谷歌云存储。

1. 记住服务帐号的邮箱，以下图：

下一步配置 github secrets

第四步，github secrets

如图建立以下的两个 github secrets：

1. GCP_SA_EMAIL - 值能够参考 服务帐号的建立小节
2. GCP_SA_KEY - 值为下面命令的结果（用本地的 JSON 密钥生成，命令以下）

cat your-json-key.json | base64

第五步，github action

Github action的做用是：

1. 有代码push 或者pull request到仓库时，自动出发下列动做
2. 准备一个 ubuntu 编译环境
3. 准备 hugo 环境
4. 进行 hugo 编译
5. 编译后的 public 目录 （静态网页） 上传到 谷歌存储 - Google Cloud Storage

新建 github action ，并点击 "set up workflow yourself"

个人 github action 代码以下：

# github action的名字，能够随意改
name: build hugo and deploy to google cloud platform (storage)

# 何时调用 action，这里是当 master 上有代码 push 或者 pull request 会触发 github action
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

# 环境变量的设置，下面会用到
env:
  GCP_SA_EMAIL: ${{ secrets.GCP_SA_EMAIL }}
  GCP_SA_KEY: ${{ secrets.GCP_SA_KEY }}
  GCP_BUCKET: www.bobjiang.com

# 任务的准备，用 ubuntu最新的环境
jobs:
  setup-deploy:
    name: Setup and Deploy
    runs-on: ubuntu-latest
    steps:

# 检出master分支的代码 checkout
    - name: Checkout
      uses: actions/checkout@v2

# 准备hugo环境
# hugo ready & build
    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: '0.62.2'
        # extended: true

# hugo 编译生成静态网页 public目录内的内容
    - run: hugo --minify

# deploy to google storage
# 准备 链接到 google 云
    - uses: GoogleCloudPlatform/github-actions/setup-gcloud@master
      with:
        version: '285.0.0'
        project_id: ${{ secrets.GCP_PROJECT_ID }}
        service_account_email: ${{ secrets.GCP_SA_EMAIL }}
        service_account_key: ${{ secrets.GCP_SA_KEY }}
        export_default_credentials: true
# 检查 google 云的链接结果
    - run: gcloud info
# 用 gsutil 推送 public 目录内容到谷歌云存储
    - run: gsutil -m rsync -d -c -r public gs://$GCP_BUCKET
    - run: gsutil -m setmeta -h "Cache-Control:public, max-age=3600" gs://$GCP_BUCKET/**/*.html
    - run: gsutil -m setmeta -h "Cache-Control:public, max-age=31536000" gs://$GCP_BUCKET/js/*.js
    - run: gsutil -m setmeta -h "Cache-Control:public, max-age=31536000" gs://$GCP_BUCKET/css/*.css

总结

通过本次梳理后，写博客彻底是本地操做且能够本地调试。 写博客在 hugo 项目的 content 目录内写 markdown 文件 调试能够用 hugo server 本地访问 http://localhost:1313/

效果满意后，能够把 content 目录内的改动 推送到 github 仓库 后面就是自动化准备环境编译、部署（github action）到谷歌云存储。

因此做为一个业余写手，须要更加关注的是内容产出。
自动化啦......

本文首发于 Bob Jiang的博客 ，转载请联系 Bob Jiang