寫在前面，搬遷記錄

記錄我的博客這次搬家程序，我的博客之前經歷過：

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

標籤：其他

上一篇：權威的國際敏捷認證Certified Scrum Master (CSM)

下一篇：解決docker中apt-get不管用