自动部署基于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.iorepo,负责接收生成后的html内容, 并生成user page
  • 创建一个blog-config(名字随意),用来管理blog配置,以及issues管理。

申请两个 token

两个token都要自行保存, 关闭就找不回来。

  • github token

    申请一个具有写权限的github tokenscope选择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中。
  • 选择linuxnode环境。
  • start build, 此时应该是fail的, 因为gh_token还未加入到环境变量中。
  • 点左侧栏的Job, 找到blog-config项目, 点击设置
  • BUILD SETTINGS中找到Environment Variables
  • 点击Add variable
  • namegh_token(这里名字要跟config.yml${gh_token}一样), value填入刚刚申请到的gh-token
  • 回到circleci项目中, 点击上一次的build fail条目, 右上角有rebuild
  • 此时如无意外, 应该能成功build, 并且username.github.io这个仓库也有对应文件。

配置webhook

回到blog-config项目中配置

写issues

至此博客已经算搭建完成,只需要在blog-configissues, 就会同步部署到gh-pages

最后

更多配置请参考