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 ...
最新文章
- 剑指offer_第8题_跳台阶
- escape、encodeURI 、encodeURIComponent 编码与解码
- P2714-四元组统计【数论,容斥】
- python 程序停止打印日志_Python日志打印
- 图解Linux内核:内核启动(1)从Bootloader到内核代码
- 北大计算机科学与技术怎么样,国内高校计算机科学与技术学科排名,浙大表现亮眼,北大荣登榜首...
- SVN 提交操作缩写(A D M R)
- Codeblocks中文乱码解决方法。
- python 随机数_python项目实战:实现蒙特卡罗方法,求物体阴影面积
- 如何恢复出厂设置并还原Apple Silicon M1 Mac?
- oracle 检查链接数,oracle连接数检查
- 编程向未来---启程
- 掌门教育市值再创新低:集体诉讼风险未解,近万名教师“无证”
- 【CSAPP】家庭作业2.77~2.97
- IMX6 LCD 参数匹配过程分析
- 「兔了个兔」看我如何抓取兔兔图片到本地(附源码)
- 双硬盘Win10+Ubuntu双系统安装
- Java实现简单的KFC点餐系统(未实现可视化)
- matlab制作天体运动动画,天体运动 动态演示
- 记win10下ubantu子系统运行shell脚本的坑
热门文章
- 由过去的微软、苹果、IBM 看今天的阿里巴巴
- 除了 Coding,程序员获得收入的四大途径!
- 2021 年押宝哪个后端语言呢?
- 复购分析实践中,Pandas 遇到了大难题
- 性能飙升160%!阿里云发布第七代ECS、云原生数据库PolarDB-X等重磅新品
- 我的第一个全栈 Web 应用程序
- @程序员,不要再锤产品经理了,锤这个吧!!!
- 作为新手程序员,掉过的那些坑!
- 这款老不死的笔记本,产品小姐姐的最爱......
- 网易游戏回应裁员 10%;字节跳动秘密研发手机;iOS 13 beta 5 发布 | 极客头条