使用 Action 自动部署 VuePress 到 GitHub Pages

⚙️ 成果：

• 框架：VuePress 2 + @vuepress/plugin-blog
• 打包工具：Vite（viteBundler）
• 包管理：pnpm
• CI/CD：GitHub Actions
• 部署方案：
  • 源码仓库：urfread1010/mind-elevation
  • 打包结果推送到：urfread1010/urfread1010.github.io 的 main 分支
  • GitHub Pages 启用 main 作为 站点源
• 访问地址： https://urfread1010.github.io

---

简单说下现在的效果：

• 现在再想更新文章了，只需要改改本地的文档或者源码，在推送到管源码的仓库的时候，就能自动触发工作流，进行打包，并且能把打包出来的资源推送到负责展示网页的仓库。特别方便。

思路

首先就是找做文档网站比较简单易上手的框架，很容易就找到VuePress2了。然后稍微操作一下，看看是不是真的自己会用。

然后再找一下部署方案，免费的 GitHub Pages 也是很容易就能搜到。因为之前已经试过了，所以这次也用的它。

稍微不一样的是，这次用的是框架，不是光静态资源，所以在存源码上边动了下脑筋，把它分成两个仓库了。.io结尾的乃个仓库专门负责展示网页，而另一个仓库则专门负责管理源码。

命令

（有待整理）

遇到的小问题

因为要跨仓库操作，需要一点小配置。

因为本地账号和仓库主人也不是一个号，所以研究了一下怎么授权。

刚开始不让推送，后来发现是网络和加密的问题。

补充

VuePress官方就有自动化部署的工作流脚本，就不贴我的了。

乃个脚本大概的工作就是，告诉 GitHub 编译这个项目需要什么环境、执行什么命令、部署到哪里。