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

具體選擇哪個(gè)，根據(jù)個(gè)人對(duì)博客的訴求進(jìn)行選擇。

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

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

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

簡(jiǎn)書(shū)地址
http://www.itdecent.cn/p/99952652b2dd

創(chuàng)建項(xiàng)目

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

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

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

提交代碼

image.png

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

開(kāi)通并配置oss

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

image.png

然后我們?cè)诎⒗镌瓶刂婆_(tái)拿到一份 accesskeys。用于后面的遠(yuǎn)程部署文件到OSS上

image.png

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

image.png

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

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

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

workflows下面每個(gè)文件就是一個(gè)工作流，可以有多個(gè)，一般建一個(gè)就可以了。

2.編寫(xiě)腳本

# workflow的名稱(chēng)，會(huì)顯示在工作流運(yùn)行頁(yè)面
name: MainWorkflow

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

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

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

上面我只寫(xiě)了 actions/checkout 這個(gè)action。這是官方提供的action，我們直接復(fù)用就可以了。它的作用是拉取最新代碼

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

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

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"

此時(shí)我們安裝了Node.js 12，后面的步驟我們就可以開(kāi)始執(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

此時(shí)我們添加了一個(gè)步驟，用于安裝node依賴(lài)，安裝hexo命令行。最后生成靜態(tài)頁(yè)面。

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

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控制臺(tái)上查看
        endpoint: "oss-cn-hongkong.aliyuncs.com"
        # 使用我們之前配置在secrets里面的accesskeys來(lái)配置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

提交代碼，查看Action運(yùn)行情況

提交我們的代碼，這個(gè)時(shí)候去項(xiàng)目的Action菜單下查看運(yùn)行狀態(tài)。等一會(huì)兒，你將能看到類(lèi)似下圖的情況，表示我們的工作流成功執(zhí)行，并且將自動(dòng)生成靜態(tài)文件并上傳到OSS上。

image.png

我們可以去OSS上查看，確實(shí)上傳成功了！

image.png

每個(gè)OSS Bucket都會(huì)分配一個(gè)二級(jí)域名。我們可以在地址欄上輸入頁(yè)面的路徑進(jìn)行訪(fǎng)問(wèn)啦

image.png

不過(guò)此時(shí)我們?nèi)绻÷缘鬷ndex.html的話(huà)，并不能正確訪(fǎng)問(wèn)到頁(yè)面。這是因?yàn)槲覀兊腛SS還沒(méi)有配置靜態(tài)網(wǎng)站托管選項(xiàng)。

配置oss靜態(tài)頁(yè)面托管

在 oss 管理頁(yè)面 找到 “基礎(chǔ)設(shè)置” => “靜態(tài)頁(yè)面”

image.png

配置默認(rèn)首頁(yè)

這樣我們可以省略index.html訪(fǎng)問(wèn)了

配置默認(rèn)404頁(yè)面。

這樣當(dāng)我們輸入任何不存在的路徑是依然能顯示首頁(yè)。這在于一些SPA單頁(yè)應(yīng)用來(lái)說(shuō)很重要

恭喜，你已經(jīng)完成了在OSS上部署博客的工作！你可以享受OSS在國(guó)內(nèi)外飛速的CDN服務(wù)。還能享受OSS提供的各種圖片處理服務(wù)（壓縮圖片、縮略圖等）

當(dāng)然，或許你會(huì)擔(dān)心OSS收費(fèi)的問(wèn)題。但我告訴你，如果只是一個(gè)博客，除非真的很多人訪(fǎng)問(wèn)，否則幾乎每個(gè)月都不會(huì)產(chǎn)生什么費(fèi)用，遠(yuǎn)遠(yuǎn)達(dá)不到最低收費(fèi)標(biāo)準(zhǔn)。。。相當(dāng)于是免費(fèi)使用的

當(dāng)然，如果你有自己的域名，不妨在阿里云控制臺(tái)和OSS管理面板上自己探索一下，配置自定義域名訪(fǎng)問(wèn)。以及HTTPS等等。