自動部署基於issues的靜態部落格

zWing發表於2019-03-06

通過issues來寫部落格文章，並自動部署到gh-page。

介紹

  • acyort 引擎核心，用來管理外掛、工作流以及html輸出等。
  • acyort-donob-plugins：是acyort的外掛，用來拉取issues資料並進行處理，處理完後將對應模板進行渲染。

整體步驟

  • 在github新建一個 repo
  • 寫入配置檔案
  • 新增 github token, 許可權為repo::public_repo
  • 在 circleCi 加入對應的repo並建立 circleci token(需要儲存下來)
  • 在circleci中對應專案加入variable.
  • 在repo中新增webhook
  • 寫issues

關於 gh-pages

gh-pages有兩種形式, 具體請看官方說明:

  • 以username.github.io命名的專案，是分配給每個使用者的user page。

  • 另一種是prject page, 各專案中通過gh-pages分支或者通過docs資料夾所生成的gh-pages。

無論、以何種方式來建立起gh-pages都可以。

但是如果以username.github.io來建立的話，內容只能放在master分支，並不能像其他repo一樣通過gh-pages或者docs資料夾生成。

下面統一用username.github.io 來建立gh-pages

詳細步驟

建立repo

  • 建立一個username.github.io的repo，負責接收生成後的html內容, 並生成user page。
  • 建立一個blog-config(名字隨意)，用來管理blog配置，以及issues管理。

申請兩個 token

兩個token都要自行儲存, 關閉就找不回來。

  • github token

    申請一個具有寫許可權的github token，scope選擇repo::public_repo, 用於將生成後的檔案通過api直接push到該專案中。

  • circleci token

    申請一個circleci token, 用來通過webhook來觸發circle build。

寫入配置檔案

在blog-config中，建立以下檔案:

|-.circleci
	|- config.yml // circleCi 的配置檔案
|-config.yml // acyort 配置檔案
|-package.json // 這個不用說
複製程式碼

  • package.json

    {
  "name": "blog name",
  "version": "1.0.0",
  "description": "blog",
  "main": "index.js",
  "scripts": {
    "deploy": "acyort flow"
  },
  "dependencies": {
    "acyort": "^3.1.1",
    "acyort-donob-renderer": "^1.5.0",
    "acyort-plugin-fetch-issues": "^1.3.1",
    "acyort-plugin-rss": "^1.5.0",
    "acyort-templates-donob-plus": "^1.5.1",
    "gh-pages": "^2.0.1"
  }
}
複製程式碼

  • config.yml(acyort 配置檔案)

    title: blog name # 部落格名稱
description: blog desc # 部落格簡介
url: http://username.github.io # 部落格url
template: acyort-templates-donob-plus
menu:
  Archives: /archives/
  Tags: /tags/
repository: username/blog-config # 寫 issues 的專案
public: public
timezone: Asia/Shanghai
plugins:
  - acyort-plugin-fetch-issues
  - acyort-donob-renderer
複製程式碼

  • .circleci/config.yml

    # 注意這個檔名為 config.yml，在 .circleci 目錄下
version: 2
jobs:
  build:
    docker:
      - image: node:latest
    working_directory: ~/acyort
    branches:
      only:
        - master
    steps:
      - checkout
      - restore_cache:
          keys:
            - yarn-packages-{{ checksum "yarn.lock" }}
      - run: yarn install
      - save_cache:
          name: Save Yarn Package Cache
          key: yarn-packages-{{ checksum "yarn.lock" }}
          paths:
            - ~/.cache/yarn
      - run: yarn deploy
      - run: git config user.name "" # 你的 github username
      - run: git config user.email "" # 你的 github email
      - run: npx gh-pages -d public -r https://${gh_token}@github.com/username/username.github.io.git -b master -m "Updated by circleci - `date`" # ${gh_token}, 這個token就是具有寫許可權的github token, 會在 circleci 配置。
複製程式碼

配置circleci

  • 將blog-config專案加入到circleci中。
  • 選擇linux和node環境。
  • 點start build, 此時應該是fail的, 因為gh_token還未加入到環境變數中。
  • 點左側欄的Job, 找到blog-config專案, 點選設定
  • 在BUILD SETTINGS中找到Environment Variables
  • 點選Add variable
  • name為gh_token(這裡名字要跟config.yml中${gh_token}一樣), value填入剛剛申請到的gh-token。
  • 回到circleci專案中, 點選上一次的build fail條目, 右上角有rebuild
  • 此時如無意外, 應該能成功build, 並且username.github.io這個倉庫也有對應檔案。

配置webhook

回到blog-config專案中配置

  • 點settings
  • 點webhook
  • 點Add webhook
  • Payload URL填入'https://circleci.com/api/v1.1/project/github/:username/:project/tree/:branch?circle-token=:token' (自行替換相應欄位), 其中:token是從circleci中申請的token)
  • Content-Type選擇application/json
  • 下面選擇let me select xxx, 並勾選issues選項
  • 最下面點選save
  • 完成

寫issues

至此部落格已經算搭建完成，只需要在blog-config寫issues, 就會同步部署到gh-pages。

最後

更多配置請參考

相關文章