前序
前一段时间使用vuepress生成了自己的博客网站,发布到Github.io的流程是:写好博客后,打包项目,然后执行bash文件(http://caibaojian.com/vuepress/guide/deploy.html)将打包后的文件部署到mybells.github.io
仓库中。然后就可以在https://mybells.github.io/查看博客了。
但是最近浏览阮一峰的网络日志时学习到了《GitHub Actions 入门教程》,学习后发现如果使用GitHub Actions,部署项目就变得更简单了。只需要推送项目文件,GitHub Actions就会在虚拟机中自动执行一系列命令,省去了打包和执行bash文件的步骤。
GitHub Actions 是 GitHub 的持续集成服务。可以去Github官网学习。
使用Github Page
如果想把github项目部署到Github Page上有两种方法。我使用的第一种。
第一种是直接在github上新建一个<user>.github.io
的仓库,名字必须是这个。打包文件push到这个仓库中就可以在<user>.github.io
上浏览了。
第二种是在推送的仓库中新建一个gh-pages
分支,名字必须是这个否则Settings中选择不了其他名字的分支。然后在项目Settings的Options中的Github pages选项中选中gh-pages
分支。并支持修改主题和域名。就可以在<user>.github.io/你的仓库名
地址浏览了。
两种方法具体步骤可以查看Github Pages。
使用Github Actions
- 点击要使用仓库的Actions。选择设置一种workflow模板。
- 这里我选择Node.js的模板
选择后配置相关动作和流程,然后提交就可以了。提交后会在仓库中生成./github/workflows/xxx.yml
文件以后每次执行配置的动作就可以自动执行配置的流程。
- vuepress项目中的workflow配置代码
name: github pages
on:
push:
branches:
- master
jobs:
build-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- run: npm ci # 相当于npm install
- run: npm run docs:build
#发布到mybells.github.io/master
- name: Deploy mybells.github.io/master
uses: peaceiris/actions-gh-pages@v2
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
EXTERNAL_REPOSITORY: mybells/mybells.github.io #可以新建一个mybells.github.io仓库发布到master
PUBLISH_BRANCH: master
PUBLISH_DIR: docs/.vuepress/dist
with:
emptyCommits: false
# #发布到MyBlog/gh-pages 查看https://mybells.github.io/MyBlog/,需要修改base配置为MyBlog,修改图片路径
# - name: Deploy MyBlog/gh-pages
# uses: peaceiris/actions-gh-pages@v2
# env:
# ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
# PUBLISH_BRANCH: gh-pages #也可以在本项目MyBlog新建gh-pages分支,名字一定要是gh-pages这样github page设置才能识别到这个分支,其他名字识别不到。https://help.github.com/cn/github/working-with-github-pages/creating-a-github-pages-site#creating-your-site
# PUBLISH_DIR: docs/.vuepress/dist
# with:
# emptyCommits: false
以上代码的意思是:
- 当push文件到仓库上时触发流程。
- 使用actions/checkout@v1插件拉取代码。并下载依赖包npm install和打包项目npm run build。
- 使用peaceiris/actions-gh-pages@v2插件发布到相关仓库中。
GitHub Pages action
Actions推送插件使用方法可以查看传送门。
也可以在Github市场中下载使用其他一些工作流程插件。
最后的最后就可以愉快的浏览自己写的博客了。
我的项目博客地址https://github.com/mybells/MyBlog,可以参考这个项目中的配置。有帮助的点个star哟。