自動部署基於issues的靜態博客

經過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。

最後

更多配置請參考

• acyort
• acyort-donob-plugins
• blog-config