利用Github Actions自动部署Vuepress博客

2024/9/3 前端VuePress

# 前言

随着自己的博客网站内容更新越来越多(虽然没人看,只是记录知识方便自己查看),每次都要手动部署比较麻烦,虽然早就听说github可以自动部署,但还没试过,今天就来玩一下。

# 准备

首先需要到github的设置里面新建一个Personal access tokens,用来自动化部署,想让服务器自己帮你部署,总得有个密钥吧。

设置路径是 点击你的头像->Settings->Developer Settings->Personal access tokens->Tokens (classic),然后点击右上角的 Generate new token生成,选classic

然后进入生成界面,填写一些信息,如这个token是干什么的,token有效期是多久,建议选不会过期,不用折腾。

下面选择这个token的权限,一般勾选整个repo就够了,其他的看着选,后面也可以更新权限的。

最后点击生成,生成之后的token记得复制保存,下一步有用,最好存到本地。

然后去到你的项目源码仓库,去创建一个仓库的secrets,就需要用到上面的token。路径为:你的仓库页面->Settings->Secrets and variables->Actions->New repository secret

然后填入名称和token即可。

# 编写Action

进入项目的Actions页面,找到New workflow按钮,然后直接选择set up a workflow yourself创建自己的工作流。

默认名称是main.yml,可以修改,而默认路径官方也给你设置好了。接下来就是编写这个文件了,工作流可以完成的内容很多,但我们本次部署按照下面的配置就能完成,有兴趣的可以去找相关的资料。

# name 可以自定义
name: Deploy GitHub Pages

# 在 push 到 main 分支后触发
on:
  push:
    branches:
      - main

# 任务
jobs:
  build-and-deploy:
    # 服务器环境:最新版 Ubuntu
    runs-on: ubuntu-latest
    steps:
      # 拉取代码
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false
      # 安装node16环境
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 16
          
      # 生成静态文件
      - name: Build
        run: npm install && npm run blogs:build

      # 部署到 GitHub Pages
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 也就是我们刚才生成的 secret
          BRANCH: gh-pages # 部署到 gh-pages 分支,因为 main 分支存放的一般是源码,而 gh-pages 分支则用来存放生成的静态文件
          FOLDER: public # vuepress 生成的静态文件存放的地方
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

注意修改配置来适配自己的项目,比如push触发的分支,node的版本,构建打包的语句和打包生成后的存放的文件夹等等。

在我这个配置中,push触发的分支为main,node版本为16,构建的语句为npm run blogs:build,打包生成后的存放的文件夹为在根目录下的public

然后提交这个文件就会触发工作流了,可以在Actions中看到构建的情况。

通常第一次都会失败(doge),但是不要慌,看看报了什么错误,比如我一开始没设置node环境报错,然后打包生成后的存放的文件夹不存在报错,一般看提示就知道问题出在哪。

部署到gh-pages分支后还要等网站部署更新,一般提交后等个几分钟网站就更新好啦。

# 结尾

好了,本次分享就到这里,虽然没有图片(绝对不是因为我懒),但是文字描述得也很清晰呢~

如果对项目本身有什么疑惑的可以看我的Vuepress博客搭建篇~

Last Updated: 2024/10/7 15:51:07