说明

接着我上一篇文章，已经使用vuepress+github pages搭建好了自己的文档博客，并且可以在本地打包上传后就可以在pages上查看更新内容。但是有1个比较明显的缺点：打包速度并不快！！！这是受限于vuepress是利用webpack打包造成的，有幸我们可以将打包工作交给github actions。这样我们在本地就可以专注写作了，写完后提交代码，由github actions帮我们打包发布，听起来就不错吧？还等什么，开始操作吧！

关于vuepress

https://www.vuepress.cn/

关于github actions

https://docs.github.com/cn/actions

如何用vuepress+github搭建文档博客

可以参考我的另一篇文章：VuePress + Github Pages 搭建文档博客

实现效果

演示地址：https://mudfish.github.io/java-it-docs/

当我们每次push代码的时候触发github actions：

实现步骤

这里我们主要借助github actions去实现自动部署，其实也就是持续集成的一个概念。

生成token

进入 Github 后，点击我们的头像，然后依次进入 Settings -> Developer settings -> Personal access tokens，对应地址就是 Token 生成：

配置secrets

进入你存放你博客源码的项目，然后以此点击 Settings -> Secrets，接着点击右上角的 New repository secret，新建一个 Secret。这里的名字要命名为 ACCESS_TOKEN，然后 Value 就是我们上一步中所生成的 Token。

设置好之后效果：

编写action

进入项目的的 Actions 选项，然后新建一个 workflow，默认新建的 workflow 名字是 main.yml 这个自定义。

内容可以参考我的，你可能需要改的地方就是打包语句：

# name 可以自定义
name: Deploy GitHub Pages# 触发条件：在 push 到 main/master 分支后，新的 Github 项目 应该都是 main，而之前的项目一般都是 master
on:push:branches:- main# 任务
jobs:build-and-deploy:# 服务器环境：最新版 Ubunturuns-on: ubuntu-lateststeps:# 拉取代码- name: Checkoutuses: actions/checkout@v2with:persist-credentials: false# 生成静态文件- name: Buildrun: npm install && yarn build# 部署到 GitHub Pages- name: Deployuses: JamesIves/github-pages-deploy-action@releases/v3with:ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 也就是我们刚才生成的 secretBRANCH: gh-pages # 部署到 gh-pages 分支，因为 main 分支存放的一般是源码，而 gh-pages 分支则用来存放生成的静态文件FOLDER: docs/.vuepress/dist # vuepress 生成的静态文件存放的地方

测试

当action提交后，会执行一次，类似下图，绿色为成功红色失败，可以点进去查看具体失败信息：

参考文档

https://developer.aliyun.com/article/861604

Vuepress + GitHub Actions实现文档博客自动部署相关推荐

VuePress 手摸手教你搭建一个类Vue文档风格的技术文档/博客
前言: VuePress是尤大为了支持 Vue 及其子项目的文档需求而写的一个项目,VuePress界面十分简洁,并且非常容易上手,一个小时就可以将项目架构搭好.现在已经有很多这种类型的文档,如果你有 ...
利用github pages+GitHub Actions+Hugo搭建个人博客
github pages是Github提供的一个网页寄存服务,可存放静态网页,包括博客.项目文档等. 参考Hugo官方文档 1.创建github仓库仓库名的格式:<github用户名> ...
使用GitHub Actions实现Hexo博客自动发布
我在使用jenkins实现hexo博客自动发布中介绍了可以使用jenkins实现博客自动发布,其实还有一种更简单的方法,就是GitHub提供的持续集成服务:GitHub Actions.下面就来介绍一 ...
vuepress-theme-reco + Github Actions 构建静态博客，部署到第三方服务器
最新博客链接 Github链接查看此文档前应先了解,vuepress基本操作参考官方文档进行配置: vuepress-theme-reco VuePress SamKirkland / FTP-D ...
vuepress侧边栏配置_VuePress搭建静态博客网站
VuePress是什么仅从单词上来看就是vue和press,press除了按压的意思外,还有报刊杂志和出版社等意思,所以可以理解为由vue驱动的出版工具.换个说法就是静态博客编写工具.后六字应该都不 ...
vuepress搭建个人博客并部署
想要快速搭建自己的个人博客,记录自己的工作学习心得,争取当一条有梦想的咸鱼相信大家都了解过vue这个框架.而今天,我们的主角vuepress 就是vue的作者尤大大的一个作品.开源于大概2年前,其本 ...
使用 Python 在 GitHub 上运行你的博客
使用 Pelican 创建博客,这是一个基于 Python 的平台,与 GitHub 配合的不错. GitHub 是一个非常流行的用于源代码控制的 Web 服务,它使用 Git 同步本地文件和 Git ...
个人博客代码_Jekyll + Github Pages 搭建个人免费博客
今天亲手通过 Jekyll 搭建了一套免费博客,搭建步骤其实超级简单.你不需要购买域名,也不需要购买服务器,就可以轻松拥有你自己的博客.Jekyll 的核心是一个文本转换引擎.它的方便之处在于支持多种 ...
手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置
前言前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...

Vuepress + GitHub Actions实现文档博客自动部署

说明