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

zWing12792
867 阅读3分钟

通过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。

最后

更多配置请参考

avatar
文章
阅读
粉丝