GitHub Actions 部署 VuePress 文档
GitHub Actions 是 GitHub 的持续集成服务,于2018年10月推出。这些天,我一直在试用,觉得它非常强大,有创意,比 Travis CI 玩法更多。
本文是一个简单教程,演示如何使用 GitHub Actions 自动发布一个 VuePress 应用到 GitHub Pages。
VuePress 文档
官方文档:链接[1]
1.创建并进入一个新目录
mkdir vuepress-starter && cd vuepress-starter
2.使用你喜欢的包管理器进行初始化
yarn init # npm init
3.将 VuePress 安装为本地依赖
yarn add -D vuepress # npm install -D vuepress
4.创建你的第一篇文档
mkdir docs && echo '# Hello VuePress' > docs/README.md
5.在 package.json 中添加一些 scripts (opens new window)
{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}
6.在本地启动服务器
yarn docs:dev # npm run docs:dev
VuePress 会在 http://localhost:8080
(opens new window) 启动一个热重载的开发服务器。
7.在 docs/.vuepress/config.js 中设置正确的 base。
如果你打算发布到 https://<USERNAME or GROUP>.github.io/
,则可以省略这一步,因为 base 默认即是 "/
"。
如果你打算发布到 https://<USERNAME or GROUP>.github.io/<REPO>/
(也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>
),则将 base 设置为 "/<REPO>/
"。
创建 GitHub Actions
大家知道,持续集成由很多操作组成,比如抓取代码、运行测试、登录远程服务器,发布到第三方服务等等。GitHub 把这些操作就称为 actions。
在仓库菜单栏中选择 Actions 进入到创建页面。
简单的修改自己需要执行的命令:
# This is a basic workflow to help you get started with Actionsname: CI# Controls when the action will run.
on:# Triggers the workflow on push or pull request events but only for the master branchpush:branches: [ master ]pull_request:branches: [ master ]# Allows you to run this workflow manually from the Actions tabworkflow_dispatch:# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:# This workflow contains a single job called "build"build:# The type of runner that the job will run onruns-on: ubuntu-latest# Steps represent a sequence of tasks that will be executed as part of the jobsteps:# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it- uses: actions/checkout@v2# Runs a single command using the runners shell- name: Run a ci scriptrun: npm ci- name: Run a docs scriptenv:TOKEN: ${{secrets.HEXO_DEPLOY_PRIVATE_KEY}}run: npm run docs# Runs a set of commands using the runners shell- name: Run a multi-line scriptrun: |echo Add other actions to build,echo test, and deploy your project.
GitHub Actions 的配置文件叫做 workflow 文件,存放在代码仓库的.github/workflows目录。
workflow 文件采用 YAML 格式,文件名可以任意取,但是后缀名统一为 .yml,比如 foo.yml。一个库可以有多个 workflow 文件。GitHub 只要发现 .github/workflows 目录里面有 .yml 文件,就会自动运行该文件。
关于详细的字段介绍可以参考这篇文章:链接[2]。
因为代码中定义了一个环境变量 TOKEN: ${{secrets.HEXO_DEPLOY_PRIVATE_KEY}}
用来 git ssh 免密登录的,如果不配置就无法 git push 这些操作。
这个示例需要将构建成果发到 GitHub 仓库,因此需要 GitHub 密钥。按照官方文档:链接[3],生成一个密钥。
然后,将这个密钥储存到当前仓库的 Settings/Secrets 里面。
最后创建文件 build/update-docs.sh 用来执行 bash 脚本。
# Prepare
cd docs
rm -rf .vuepress/dist# Build
vuepress build# Publish to GitHub Pages
cd .vuepress/dist
git init
git config user.name "wuxianqiang"
git config user.email "2631640352@qq.com"
git add -A
git commit -m "[vuepress] update docs"
git push --force "https://${TOKEN}@github.com/wuxianqiang/vuepress-starter.git" "master:gh-pages"# Cleanup
cd ../..
rm -rf .vuepress/dist
在 package.json 中加一行 scripts 命令。
{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs","docs": "bash ./build/update-docs.sh"}
}
最后提交代码,就会自动执行 Actions 将部署 VuePress 文档到 GitHub Pages。我们就可以访问页面了,而且之后的每一次提交都会自动执行然后去更新文档的内容,这样确实会方便很多。
项目演示地址:链接[4]
References
[1]
链接: https://vuepress.vuejs.org/zh/guide/getting-started.html
[2]
链接: http://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html
[3]
链接: https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token
[4]
链接: https://github.com/wuxianqiang/vuepress-starter
GitHub Actions 部署 VuePress 文档相关推荐
- 通过 Github Actions 部署 Mkdocs 文档
Mkdocs 是一个采用 Python 构建轻量级的静态 HTML 在线文档框架,内置部署到 Github Pages 的功能.我用来创建实践指南,用来做个人的知识积累. 安装 Mkdocs 以及 M ...
- vuepress文档服务器,使用 vuepress 快速搭建文档
vuepress官方教程,em...也是用vuepress搭建的,哈哈. 这句很经典,也是表明了vuepress最好的用处: VuePress 专注在以内容为中心的静态网站上,同时提供了一些为技术文档 ...
- GitHub Pages部署vuepress报错:JavaScript heap out of memory
作者:duktig 博客:https://duktig.cn 优秀还努力.愿你付出甘之如饴,所得归于欢喜. 问题 GitHub Pages部署Vuepress一直都没有什么问题,具体部署方案参看:基于 ...
- 利用Github Actions部署自动更新PaddleOCR指定代码到指定仓库
目录 引言 需求描述 解决方法 采用Github Actions功能 具体代码 总结 参考资料 引言 首先说呢,我也不想重复造轮子, 但是无奈,网上博客看了一大圈,却始终没有找到自己需要的东西 需求描 ...
- java计算机毕业设计智友少儿编程学习平台源码+mysql数据库+系统+部署+lw文档
java计算机毕业设计智友少儿编程学习平台源码+mysql数据库+系统+部署+lw文档 java计算机毕业设计智友少儿编程学习平台源码+mysql数据库+系统+部署+lw文档 本源码技术栈: 项目架构 ...
- 【云原生之Docker实战】使用Docker部署ShowDoc文档工具
[云原生之Docker实战]使用Docker部署ShowDoc文档工具 一.ShowDoc介绍 1.ShowDoc简介 2.ShowDoc功能 二.检查docker版本 三.检查docker状态 四. ...
- 【云原生之Docker实战】使用Docker部署Mindoc文档管理平台
[云原生之Docker实战]使用Docker部署Mindoc文档管理平台 一.Mindoc介绍 1.Mindoc简介 2.Mindoc功能 二.检查宿主机系统版本 1.检查操作系统版本 2.检查系统内 ...
- java计算机毕业设计游泳馆信息管理系统源码+数据库+系统+部署+lw文档
java计算机毕业设计游泳馆信息管理系统源码+数据库+系统+部署+lw文档 java计算机毕业设计游泳馆信息管理系统源码+数据库+系统+部署+lw文档 本源码技术栈: 项目架构:B/S架构 开发语言: ...
- Ubuntu部署TeamTalk文档
Ubuntu16.04 64bit 部署TeamTalk文档 准备 ubuntu16.04 64bit root用户 apt-get update 安装mysql(5.7.29) apt-get in ...
最新文章
- MySQL的两个存储引擎--MyISAM和InnoDB
- [bzoj5301][Cqoi2018]异或序列
- 莫烦 Matplotlib
- Java List集合去重的多种方法
- 五类IP地址范围及作用
- 迅为iTOP-4418开发板Android系统网络测速工具iPerf-TCP测试
- 乡下人生活录——程序员给自己买份保险吧
- pe里怎么看不到计算机硬盘,进去pe系统找不到硬盘怎么回事_进入pe系统看不到硬盘如何解决-win7之家...
- [GAMES101]现代计算机图形学课程总结2:光栅化和反走样
- Centos7.5部署MySQL5.7基于GTID主从复制+并行复制+半同步复制+读写分离(ProxySQL) 环境- 运维笔记 (完整版)
- 循环遍历时跳出循环方法汇总
- 计算机组成原理扩展指令CLC实验报告,惠州学院-计算机组成原理实验四 含流程图...
- ppt里插入python(code)代码高亮
- ibm服务器型号规则,IBM服务器型号是怎么命名的?
- 天弘基金回应在支付宝 “无故扣款”,客户可自行取消
- 机器学习算法背后的数学原理
- PLM听过很多遍,却依旧不知道是什么?看完这篇你就懂
- Linux ALSA声卡驱动之四:machine和dai_link的作用和实现
- 双十一销量预测_天猫双十一数据竟然可以预测?
- CST仿真模型转AD制版
热门文章
- 用三年时间培养 1W 名高素质技术人才,这是一个什么样的计划?
- 不用鼠标,程序员编程竟能如此高效?
- 如何理解 Spring AOP 以及使用 AspectJ?
- 搞定 Linux 命令之进程与数据流,不服来辩!| 原力计划
- 任何性能指标越界或造成 APP 崩溃,优酷通用性能测试一招搞定
- 漫画:什么是 “模因” ?
- 日均 61 亿次攻击、挖矿病毒“卫冕”安全威胁之最,云上安全防御如何“战”?...
- 曾惨遭 Google、Tesla 淘汰,辗转 8 个月,他是如何成为一名顶尖的 AI 工程师?...
- 程序员一年稳赚50w,却被群嘲只造改bug!TA说:2020年我的愿望是........
- 小米卢伟冰回应“低价误国”;国产统一操作系统 UOS 正全面适配;Vue 2.6.11 发布 | 极客头条...