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

栏目: 编程工具 · 发布时间: 5年前

内容简介:通过无论、以何种方式来建立起

通过 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 项目中配置

  • 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
  • 完成

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PHP and MySQL Web Development

PHP and MySQL Web Development

Luke Welling、Laura Thomson / Sams / July 25, 2007 / $49.99

Book Description PHP and MySQL Web Development teaches you to develop dynamic, secure, commerical Web sites. Using the same accessible, popular teaching style of the three previous editions, this b......一起来看看 《PHP and MySQL Web Development》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器