Github Action 部署博客到阿里云OSS

部署博客有很多選擇悍手，國內(nèi)外都有很多服務(wù)可以用泳姐，各有各的優(yōu)缺點：

	GithubPages	碼云Pages	Netlify	Heroku	阿里云OSS
純靜態(tài)托管	是	是	是	否??	是
CDN加速	否	否	是??	否	是??
訪問速度	慢	快??	一般	一般	很快??
支持404重定向	否	是??	是??	是??	是??
自定義重定向	否	否	是??	是??	否

具體選擇哪個乍赫，根據(jù)個人對博客的訴求進行選擇。

訪問速度快：優(yōu)先選擇阿里云(國內(nèi)CDN加速)猛铅、其次是碼云(國內(nèi)服務(wù)器)
功能最強：選擇Heroku字支，支持Node.js、PHP等后端

本文章要講的是如何用 GitHub + Github Action + 阿里云OSS 部署博客
因為靜態(tài)博客系統(tǒng)有很多選擇，Jekyll祥款、Hugo、Hexo等月杉。這里選擇Hexo

Github地址
https://github.com/manyuanrong/oss-blog-example

簡書地址
http://www.reibang.com/p/99952652b2dd

創(chuàng)建項目

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

開發(fā)和編寫博客內(nèi)容

這一塊內(nèi)容有很多文章講解刃跛，請參考其他文章

提交代碼

image.png

代碼提交之后并不會發(fā)生什么事情。只是保持小步提交的好習慣苛萎。接下來我們開始使用GitHub Action來做持續(xù)集成桨昙，生成靜態(tài)頁面。

開通并配置oss

去阿里云創(chuàng)建一個公共讀權(quán)限的 Bucket腌歉，用來托管我們的靜態(tài)網(wǎng)站蛙酪。
選擇香港區(qū)域是為了不用備案也能綁定自定義域名。

image.png

然后我們在阿里云控制臺拿到一份 accesskeys翘盖。用于后面的遠程部署文件到OSS上

image.png

我們將拿到的 accesskeys配置到GitHub項目的 secrets 里面桂塞，后面會在工作流腳本中用來掉調(diào)用API上傳文件到OSS上面。
保存在 secrets 里面馍驯，這樣其他人就不能獲取到你的 accesskeys 阁危，保證安全。

image.png

編寫 Github Action 持續(xù)集成腳本

1.創(chuàng)建持續(xù)集成配置腳本文件

# 使用mkdir創(chuàng)建目錄(windows可以手動建）
mkdir -p .github/workflows
# 使用touch 創(chuàng)建配置文件汰瘫，名稱隨意狂打，后綴名為 ".yml" （window可以手動建立文件）
touch ci.yml

workflows下面每個文件就是一個工作流，可以有多個混弥，一般建一個就可以了趴乡。

2.編寫腳本

# workflow的名稱，會顯示在工作流運行頁面
name: MainWorkflow

# 工作流執(zhí)行的契機：push表示每次push代碼之后都會執(zhí)行
on: [push]

jobs:
  # build job 我們用來做持續(xù)構(gòu)建
  build:
    # 構(gòu)建運行的環(huán)境
    runs-on: ubuntu-latest
    # 構(gòu)建步驟
    steps:
    # 復用 actions/checkout@v1 action蝗拿，拉取最新代碼
    - uses: actions/checkout@v1

關(guān)于 Action 的詳細寫法晾捏，可以參考官方文檔
https://help.github.com/cn/github/automating-your-workflow-with-github-actions/about-github-actions

上面我只寫了 actions/checkout 這個action。這是官方提供的action哀托，我們直接復用就可以了粟瞬。它的作用是拉取最新代碼

由于我們使用了 Hexo ，因此我們需要使用一個action來安裝配置Node.js環(huán)境萤捆。
我們可以去GitHub的市場上尋找別人寫好的Action裙品。
https://github.com/marketplace?type=actions

我們找到并加入一個叫 actions/setup-node 的action，按照文檔我們將工作流腳本進行修改

name: MainWorkflow

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - uses: actions/setup-node@v1
      with:
        node-version: "12.x"

此時我們安裝了Node.js 12俗或，后面的步驟我們就可以開始執(zhí)行Hexo的構(gòu)建操作了市怎。

我們將配置改成如下

name: MainWorkflow

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - uses: actions/setup-node@v1
      with:
        node-version: "12.x"
    - name: Build Blog
      run: |
        npm install
        npm install -g hexo-cli
        hexo generate

此時我們添加了一個步驟，用于安裝node依賴辛慰，安裝hexo命令行区匠。最后生成靜態(tài)頁面。

現(xiàn)在我們已經(jīng)有了生成的靜態(tài)頁面，只需要將它部署到我們的OSS上驰弄，我們可以使用 manyuanrong/setup-ossutil 這個action來部署我們的文件

name: MainWorkflow

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - uses: actions/setup-node@v1
      with:
        node-version: "12.x"
    - name: Build Blog
      run: |
        npm install
        npm install -g hexo-cli
        hexo generate
    - uses: manyuanrong/setup-ossutil@v1.0
      with:
        # endpoint 可以去oss控制臺上查看
        endpoint: "oss-cn-hongkong.aliyuncs.com"
        # 使用我們之前配置在secrets里面的accesskeys來配置ossutil
        access-key-id: ${{ secrets.ACCESS_KEY_ID }}
        access-key-secret: ${{ secrets.ACCESS_KEY_SECRET }}
    - name: Deply To OSS
      run: ossutil cp public oss://enok-blog/ -rf