自动部署基于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
• 完成