博客搬家 - 記第四次搬家(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