前言
前几天实现了用VuePress进行本地化博客网站搭建,明天介绍如何应用自动化部署我的项目到Github Pages上。
本文介绍两种自动化部署办法,一种是用sh脚本自动化部署,另外一种应用Github的GitHub Actions实现自动化部署。
sh脚本部署
sh脚本是什么
sh脚本是一种文本文件,其中蕴含一系列的命令和程序,用于在Unix/Linux零碎上主动执行工作和操作。sh是shell的简写,是Unix/Linux上默认的命令行解释器。sh脚本能够用于自动化操作、批量解决数据以及在系统启动时主动运行程序等。
部署工作
咱们在 Github 上新建一个仓库,仓库名为:myblog
。
接着批改 config.js
文件,增加 base
配置, base
的值为刚刚创立的仓库名,这个是为了前面拜访Github Pages用的。
此时config.js
的构造为
module.exports = {
// ...
base: '/myblog/',
// ...
}
在我的项目的根目录下创立一个sh脚本,命名为deploy.sh
,增加以下内容
#!/usr/bin/env sh
# 确保脚本抛出遇到的谬误
set -e
# 生成动态文件
npm run build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是公布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果公布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:by3679512/myblog.git master:gh-pages
cd -
最初执行脚本,在仓库的Settings -> Pages
中能够看到的Github Pages地址
GitHub Actions自动化部署
当初介绍如何应用GitHub Actions自动化部署我的项目到Github Pages上。
当咱们实现我的项目本地化搭建后,个别都是应用npm run buid
或者yarn build
命令进行打包
接着将打包文件近程推送到Github Pages上,拜访Github Pages地址确认是否部署胜利
在咱们打包我的项目和推送动态文件这个过程中,会发现有很多类似的重复性操作,既然是重复性的,咱们能不能把操作写成脚本,当前每次操作只有执行脚本就好呢?
GitHub很早留神到这一点,推出了GitHub Actions帮忙开发者实现这个想法。
GitHub Actions是什么?
GitHub Actions 是一个继续集成/继续部署(CI/CD)平台,能够在 GitHub 上构建、测试和部署代码。它容许开发者定义自动化的工作流程,以响应不同类型的事件,如提交代码、打标签或公布版本等。GitHub Actions 提供了一组预约义的操作和工具,也能够应用 Docker 或本人的脚本进行自定义操作。
GitHub Actions中的基本概念
- Workflow:工作流程,即定义自动化过程的 YAML 文件
- Event:事件,触发工作流程的事件类型,如 push、pull_request 等
- Job:工作,工作流程中一个独自的执行单元
- Step:步骤,工作中的一个独立操作,能够是一个 shell 命令、一个脚本或一个预约义的操作
- Action:动作,可重用的代码块,能够在多个工作流程和工作中应用
- Runner:运行者,托管工作流程的机器,能够是 GitHub 托管的虚拟机或本人的物理机器
对于YAML能够看阮一峰大大的这篇文章
搭建一个工作流
创立一个 GitHub 仓库命名为 myblog
点击Action进入工作流页面,在这里能够应用他人的工作流,也能够本人创立。
- 前期工作
在部署之前,咱们须要在本人的仓库上设置Secrets进行身份验证,而设置Secrets就须要用到Token。
进入 Github 后,点击咱们的头像,进入 Settings -> Developer settings -> Personal access tokens
,点击进入生成token
此处的Note
为用处,可随便命名,Expiration
为期限,可随便抉择,但倡议设为No expiration
,最初勾选repo
点击Generate token
生成
复制刚刚生成的Token,留神Token生成只呈现一次,刷新页面会找不到,倡议保留好
在仓库的 Settings -> Secrets
上,找到New repository secret
创立一个secret,命名肯定要为ACCESS_TOKEN
,而后在Value
填写刚刚生成的Token
,最初Add secret
。
- 创立工作流
在本人我的项目根目录创立.github/workflows/
,并在其中创立文件deploy.yaml
,文件命名随集体爱好,只有是yaml类型文件即可。
编写以下脚本
name: Build and Deploy
on: [push] #监听push动作
# 工作
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master
- name: vuepress-deploy
uses: jenkey2011/vuepress-deploy@master
env:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} #刚刚生成的secret
TARGET_REPO: by3679512/myblog #仓库地址
TARGET_BRANCH: gh-pages #指标分支,gh-pages个别用来寄存生成的动态文件
BUILD_SCRIPT: yarn && yarn build
BUILD_DIR: docs/.vuepress/dist/ #生成的动态文件寄存目录
最初将本地仓库推送到近程仓库。
- 验证成绩
关上近程仓库的Settings -> Pages
,如果看到GitHub Pages曾经生成,阐明工作流曾经胜利执行。当每次咱们在本地推送一个push
动作后,GitHub会主动执行.github/workflows/
下的脚本,进行我的项目自动化部署。当然咱们能够点击仓库中Actions
查看咱们的工作流。
至此,咱们曾经实现了我的项目的自动化部署。