docusaurus 是facebook 开源的一款文档脚手架工具,可以快速的进行文档生成,基于markdown
同时已经内置了gh-pages 发布的命令,对于ci 工具,我们只需要简单的配置就可以了

环境准备

  • 创建github空项目
    很简单直接鼠标点击就可以了
  • 创建docusaurus demo站点
npx docusaurus-init
  • 修改名称
    docusaurus 有自己的项目布局要求,修改之后的如下
  • 配置修改
    因为使用gh-pages 存在一个资源加载路径的问题,docusaurus 很不错已经帮助我们提供了配置了,只需要修改就可以了
    如下:
./website/siteConfig.js

添加circleci 集成

  • 添加ci集成
    这个可以打开circleci 网站进行授权,或者通过github 市场添加
  • 配置circleci 构建文件
    circleci 有自己的构建路径说明

    mkdir .circleci
    touch config.yml
    内容如下:
    version: 2
    jobs:
    build:
    docker:
    - image: circleci/node:8.11.4
    filters: ## 分支过滤,很重要,不然gh-pages 会报错, branches:
    only:
    - master
    steps:
    - checkout
    - run:
    name: Deploying to GitHub Pages
    command: |
    git config --global user.email "1141591465@qq.com" ## git 的一些配置
    git config --global user.name "rongfengliang"
    echo "machine github.com login rongfengliang password $GITHUB_TOKEN" > ~/.netrc ## 基于github token 的登录
    cd website && yarn install && GIT_USER=rongfengliang yarn run publish-gh-pages ## npm script 执行

    说明:
    GIT_USER 用户比较重要,同时注意权限的设置,需要具有write 的权限,GITHUB_TOKEN 是一个环境变量,可以在circleci 构建
    环境变量配置界面添加

构建&&查看效果

  • 添加circleci 构建
  • 构建
    修改代码,提交,就会触发构建
  • 效果
  • 构建好的gh-pages

  • 说明
    如果提示gh-pages 不存在,可以手工创建,并删除代码,提交就可以了

参考资料

https://github.com/graphql-faas/continuous-api-management
https://docusaurus.io/docs/en/publishing
https://circleci.com/docs/

 
 
 
 

docusaurus 生成的website 通过circleci部署gh-pages的更多相关文章

  1. vs自己主动生成的WebService配置文件在部署到IIs6后,服务调用失败的解决方法

    近日.在项目中须要引用java公布的WebService,加入服务引用后,调用一切正常. 配置例如以下: <system.serviceModel> <bindings> &l ...

  2. Linux(Centos)部署Jenkins,并配置Git生成Jar包进行发布部署

    需要先安装jdk.maven.git环境 jdk安装:https://www.cnblogs.com/pxblog/p/10512886.html maven安装:https://www.cnblog ...

  3. Windows使用Node.js自动生成Vue.js模版环境部署步骤-----记录

    node.js官网下载并安装node 进入node文档目录下,运行cmd 输入 node -v 查看node版本 出现表示安装完成 输入 npm -v 显示npm版本信息 安装cnpm 输入 npm ...

  4. SharePoint2007 开发部署Application Pages

    介绍:SharePoint应用程序页,也就是_layouts路径下的aspx页面,服务器C:\Program Files\Common Files\Microsoft Shared\web serve ...

  5. 使用 circleci 自动部署 vuepress 到 github

    概述 今天我想把博客什么的搬到 github 的 vuepress 上面.但是每次提交 md 文件需要手动打包然后再提交到 github 的 gh-pages,非常麻烦.所以我去研究了一下用 circ ...

  6. ASP.NET生成WORD文档,服务器部署注意事项

    网上转的,留查备用,我服务器装的office2007所以修改的是Microsoft Office word97 - 2003 文档这一个. ASP.NET生成WORD文档服务器部署注意事项 1.Asp ...

  7. [ExtJS5学习笔记]第三十一节 sencha extjs 5使用cmd生成的工程部署到tomcat服务器

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/42940883 本文作者:sushengmiyan ------------------ ...

  8. Jenkins持续部署-自动生成版本号

    目录 Jenkins持续部署-自动生成版本号 目录 前言 目的 详细流程 获取SVN Reversion 获取需求号 设置编译前读取版本号 总结 参考文献 Jenkins持续部署-自动生成版本号 目录 ...

  9. Django学习之天气调查实例(3):部署静态文件CSS、JS、images等(部署环境基于Ubuntu)

    在设计登录界面时,采用了网上下载的登录模板,漂亮,简易.但是在测试和部署时,发现原来模板中采用的js文件和css文件,却着实让我折腾了好几天. 在以往的网页设计中,一般只要把测试站点开启后,网页中的静 ...

随机推荐

  1. npm webpack vue-cli

    npm.webpack.vue-cli 快速上手版   Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chro ...

  2. sass 继承 占位符 %placeholder

    @extend //SCSS .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { b ...

  3. Mysql text类型的最大长度

    MySQL 3种text类型的最大长度如下: TEXT 65,535 bytes ~64kb MEDIUMTEXT 16,777,215 bytes ~16Mb LONGTEXT 4,294,967, ...

  4. 【模板】AC自动机(简单版)

    我:“woc...AC自动机?” 我:“可以自动AC???” 然鹅... 大佬:“傻...” 我:“(⊙_⊙)?” 大佬:“缺...” 我:“......” (大佬...卒 | 逃...) emm.. ...

  5. [PyImageSearch] Ubuntu16.04 使用深度学习和OpenCV实现物体检测

    上一篇博文中讲到如何用OpenCV实现物体分类,但是接下来这篇博文将会告诉你图片中物体的位置具体在哪里. 我们将会知道如何使用OpenCV‘s的dnn模块去加载一个预训练的物体检测网络,它能使得我们将 ...

  6. AbstractBootstrap.bind()

    ------------------headContext也就是pipeline最开头的那个handlercontext中的bind方法@Override public void bind( Chan ...

  7. [转] ajax方法

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  8. 使用zabbix-java-gateway可以通过该网关来监听多个JVM

    我们知道监控主机和网络性能指标情况可以使用zabbix很好解决,分析起来也很方便,Zabbix主要功能: - 自动发现服务器与网络设备 - 分布式监视以及WEB集中管理功能 - 可以无agent监视 ...

  9. python 元组攻略

    1.元组中只包含一个元素时,需要在元素后面添加逗号来消除歧义 tup1=(50,) 2.元组中的元素值使不允许修改的,但可以对元组进行连接组合复制代码 1 tup1=(12,34.56)2 tup2= ...

  10. 使用pyspider爬取巨量淘宝MM图片

    具体搭建步骤不再赘述,这里主要使用到了fakeagent,phantomjs和proxy pyspider的爬取相当智能,在不能获取图片的时候会适当的暂停一段时间再试探性的爬取,配合fakeagent ...