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