使用 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只是为了部署,所 ...
随机推荐
- eval解惑
let a = 1, b = 2, c = 3; let arr = [a, b, c]; function test(p1, p2, p3) { console.log(`${p1} ~ ${p2} ...
- ThinkPHP中header()无法发生跳转的解决办法
一定要在header('Location:url')后加上exit()/die()才可以,特此记录.
- hadoop最简伪分布式安装
本次安装运行过程使用的是Ubuntu16.04 64位+Hadoop2.5.2+jdk1.7.0_75 Notice: Hadoop2.5.2版本默认只支持64位系统 使用的jdk可以为1.7和1.8 ...
- java 过滤器filter使用案例
主要需要 过滤器类 和配置文件 1.过滤器类 SessionFilter package com.service; import javax.servlet.*; import javax.serv ...
- zabbix 图形注释乱码
1.寻找字体文件 1.1 首先需要找到zabbix后台的字体文件路径,字体文件的后缀为.ttf [root@zabbix ~]# cd /usr/share/zabbix/ [root@zabbix ...
- SQL函数 Convert,dateadd
1.SQL中CONVERT转化函数的用法 格式:CONVERT(data_type,expression[,style])说明:此样式一般在时间类型(datetime,smalldatetime)与字 ...
- http与tcp
一.基本概念 1.TCP连接 手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协议可以对上层网络提供接口,使上层网络数据的传输建立在“无差别” ...
- php产品细节图多图上传示例代码 无刷新
前台文件代码 upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- Codeforces 967 贪心服务器分配资源 线性基XOR递增序列构造
A #include<bits/stdc++.h> using namespace std; ][] = {{, -}, {, }, { -, }, {, }}; typedef long ...
- 可持久化BCJ
BZOJ3674:可持久化并查集加强版 n个集合 m个操作操作:1 a b 合并a,b所在集合2 k 回到第k次操作之后的状态(查询算作操作)3 a b 询问a,b是否属于同一集合,是则输出1否则输出 ...