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

摘要： 通過issues 來寫部落格文章，並自動部署到gh-page 。 介紹 acyort 引擎核心，用來管理外掛、工作流以及html 輸出等。 acyort-donob-plugins ：是acyort...

通過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
• 完成