自动部署基于 issues 的静态博客 - zWing

[kunpeng9]

March 06, 2019

通过 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 
  template: acyort-templates-donob-plus
  menu:
    Archives: /archives/
    Tags: /tags/
  repository: username/blog-config 
  public: public
  timezone: Asia/Shanghai
  plugins:
    - acyort-plugin-fetch-issues
    - acyort-donob-renderer 

• .circleci/config.yml

   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 "" 
        - run: git config user.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`" 

配置 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 https://zwing.site/posts/417715171.html