自动部署基于github issues的静态博客程序mbc

 

通过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 from https://github.com/zWingz/my-blog-config/issues/29 (https://zwing.site/posts/417715171.html) demo site: https://zwing.site