2024年Web前端最全Vuepress + GitHub Actions 实现博客自动部署！(1)，最新前端面试题整理

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

编写 Action

---

进入项目的的 Actions 选项，然后新建一个 workflow（我是因为已经建立过了，所以才是下面的界面），默认新建的 workflow 名字是 main.yml 这个可以自己自定义，根据你自己喜好来就行了。

生成后的 main.yml 位于项目的 .github/workflows 目录下。

接下来是在 main.yml 中填入如下信息即可，具体实例的可以参考我的博客实例：

https://github.com/cunyu1943/cunyu1943.github.io/

name 可以自定义

name: Deploy GitHub Pages

触发条件：在 push 到 main/master 分支后，新的 Github 项目 应该都是 main，而之前的项目一般都是 master

on:

push:

branches:

• main

任务

jobs:

build-and-deploy:

服务器环境：最新版 Ubuntu

runs-on: ubuntu-latest

steps:

拉取代码

• name: Checkout

uses: actions/checkout@v2

with:

persist-credentials: false

生成静态文件

• name: Build

run: npm install && npm run docs: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: docs/.vuepress/dist # vuepress 生成的静态文件存放的地方

验证

---

经过上面的的步骤配置好之后，就可以点击仓库的 Actions 来查看部署情况了。

如果是绿色的，说明自动部署成功了，如果是红色，那就说明部署失败。这个时候我们可以点进去看看部署失败的日志信息。

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-dlcf6Joj-1715380732610)]