使用 circleci 自动部署 vuepress 到 github
概述
今天我想把博客什么的搬到 github 的 vuepress 上面。但是每次提交 md 文件需要手动打包然后再提交到 github 的 gh-pages,非常麻烦。所以我去研究了一下用 circleci 自动集成。总体来说还是比较简单的。我把新的记录下来,供以后开发时参考,相信对其他人也有用。
集成步骤
1.把项目提交到 master 分支,然后在项目主目录下面创建 .circleci 文件夹,在文件夹里面创建 config.yml 文件,写入下列内容:
# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
build:
docker:
# specify the version you desire here
- image: circleci/node:latest
# Specify service dependencies here if necessary
# CircleCI maintains a library of pre-built images
# documented at https://circleci.com/docs/2.0/circleci-images/
# - image: circleci/mongo:3.4.4
# working_directory: ~/repo
# only master branch will be deployed
filters:
branches:
only: master
steps:
# connect to github by ssh
- add_ssh_keys:
fingerprints:
- "xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:"
- checkout
# Download and cache dependencies
- restore_cache:
keys:
- v1-dependencies-{{ checksum "package.json" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- run: yarn install
- save_cache:
paths:
- node_modules
key: v1-dependencies-{{ checksum "package.json" }}
- run: sh deploy-circleci.sh
简单来说,上面文件的意思是,每次 master 分支有修改的时候,就自动触发 circleci 集成功能,让它用 ssh 连接 github 部署到 gh-pages。
2.我们给 circleci 创建 ssh。进入这个地址 https://circleci.com/gh/<github_name>/<repo_name>/edit#checkout
。点击使用 user key,然后授权 circleci 自动生成 user key,最后点击 add user key就可以了。(这里设置了之后需要把 fingerprints 加到步骤一的文档里面去)
这里说明一下 deploy key 和 user key 的区别:
checkout 页面的 deploy key 只有读权限,没有写权限;如果要加入有读写权限的 deploy key,需要手动生成 ssh 然后到 ssh permission 页面去加。deploy key 只对特定仓库有权限。
user key 对你的账号下的所有仓库都有读写权限。
这里是integration 文档,github ssh 文档
3.我们创建 circleci 的 deploy 文档。在主目录下面创建 deploy-circleci.sh 文件,内容如下:
git pull
yarn build
git checkout gh-pages
git push
4.依据CircleCI 前端自动部署的步骤集成到 circleci 上面去即可。
使用 circleci 自动部署 vuepress 到 github的更多相关文章
- 使用Travis CI自动部署Hexo到GitHub
原文链接(转载请注明出处):使用Travis CI自动部署Hexo到GitHub 前言 使用 hexo + gitPages 搭建个人博客的人都知道,每当要发表一篇博文,第一步得手动使用 hexo g ...
- CircleCI 前端自动部署
概述 现在很多前端库都用到了 CircleCI 进行自动部署,比如Vue,React,作为一个前端我觉得还是有必要实操一下 CircleCI 的,总体来说还是挺简单的,我把过程和体会记录下来,供以后开 ...
- GitHub + circleCI 自动构建/自动部署 应用
GitHub + circleCI 自动构建/自动部署, 这里略过了单元测试,以部署 laravel 应用为例子 比起 gitlab + ansible + genkins 操作起来节省了很多硬件资源 ...
- 超详细动手搭建一个Vuepress站点及开启PWA与自动部署
超详细动手搭建一个Vuepress站点及开启PWA与自动部署 五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了. 记得最后一定要看注意事项! Vuepress介绍 官网:http ...
- 利用github的webhook进行自动部署
利用github的webhook进行自动部署 github提供了webhook功能,大概意思就是,当你提交了代码,git检测到你进行了push,可以调起你一个你知道的url. 这个功能有什么用了?比如 ...
- 手把手教从零开始在GitHub上使用Hexo搭建博客教程(四)-使用Travis自动部署Hexo(2)
前言 前面一篇文章介绍了Travis自动部署Hexo的常规使用教程,也是个人比较推荐的方法. 前文最后也提到了在Windows系统中可能会有一些小问题,为了在Windows系统中也可以实现使用Trav ...
- 手把手教从零开始在GitHub上使用Hexo搭建博客教程(三)-使用Travis自动部署Hexo(1)
前言 前面两篇文章介绍了在github上使用hexo搭建博客的基本环境和hexo相关参数设置等. 基于目前,博客基本上是可以完美运行了. 但是,有一点是不太好,就是源码同步问题,如果在不同的电脑上写文 ...
- 使用Travis CI自动部署博客到github pages和coding pages
每次换系统或换电脑之后重新部署博客总是很苦恼?想像jekyll那样,一次性部署完成后,以后本地不用安装环境直接 git push 就能生成博客?那推荐你应该使用使用 Travis CI了. 这篇文章我 ...
- 三周学会小程序第四讲:Heroku 绑定 Github 自动部署
这一讲是根据读者的反馈补充的一个讲解,好多读者反应安装 Heroku-cli 遇到问题,或者是操作繁琐,其实上一讲中提到的 Heroku 只是为了免费部署,而安装 Heroku-CLI只是为了部署,所 ...
随机推荐
- 21个CSS3 / JS 时钟
收集了21个酷炫的CSS / JS实现的时钟效果https://oktools.net/clocks 预览 :https://clocks.oktools.net/0/ 源码 :https://cod ...
- Flask开发系列之快速入门
Flask开发系列之快速入门 文档 一个最小的应用 调试模式 路由 变量规则 构造 URL HTTP 方法 静态文件 模板渲染 访问请求数据 环境局部变量 请求对象 文件上传 Cookies 重定向和 ...
- 这才是最完美SSD:性能满血发挥 万里挑一
固态硬盘同质化日益严重,不同品牌的固态盘想要一决高下就只有靠品牌口碑与做工硬实力了. 最近影驰对他们的ONE系列固态硬盘产品进行了一波更新,推出了多种容量的ONE PCIe M.2 SSD,今天我们就 ...
- CNN实战篇-手把手教你利用开源数据进行图像识别(基于keras搭建)
我一直强调做深度学习,最好是结合实际的数据上手,参照理论,对知识的掌握才会更加全面.先了解原理,然后找一匹数据来验证,这样会不断加深对理论的理解. 欢迎留言与交流! 数据来源: cifar10 (其 ...
- 用C#实现DES加密解密封装
主要用到C#提供的以下三个类:MemoryStream 内存流DESCryptoServiceProvider 加密服务提供者类CryptoStream 讲数据流连接到加密转换的流 using Sys ...
- oracle sql 高级编程 历史笔记整理
20130909 周一 oracle sql 开发指南 第7章 高级查询 1.层次化查询select level,ttt.*,sys_connect_by_path(ttt.col1,',') fro ...
- ztree多种数据包装以及相关设置
首先来一个完整的ztree代码 html代码 <form id="addTreeDataFrm" method="post" class="fo ...
- spring boot 2.0(三)使用docker部署springboot
Docker 技术发展为微服务落地提供了更加便利的环境,使用 Docker 部署 Spring Boot 其实非常简单,这篇文章我们就来简单学习下. 首先构建一个简单的 Spring Boot 项目, ...
- JAVA语言程序设计-笔记摘录
JAVA 程序语言设计(基础篇) 笔记摘录 为避免输入错误, 不要在nextByte().nextShort().nextInt()等等后面使用nextLine() nextXXXXX()都称为令牌读 ...
- 【模板】AC自动机加强版
题目大意:给定 N 个模式串和一个文本串,求每个模式串在文本串中出现的次数. 题解:文本串在自动机上匹配的过程中,记录下自动机上每一个状态被访问的次数.对于访问到的节点 i,则状态 i 的后缀中存在的 ...