在使用 VuePress 搭建个人博客并部署到 GitHub Pages 的过程中,我遇到了一个颇为棘手的问题:本地打包一切正常,但在 GitHub Actions 自动执行打包流程时,却提示找不到 README.md 文件,导致整个流程失败。经过一番深入排查和尝试,终于成功解决了这个问题,在此将整个过程记录下来,希望能帮助到遇到类似情况的开发者。
一、问题出现
我的 VuePress 项目在本地运行 npm run docs:build 时,一切都按预期进行,顺利生成了静态文件,并且我自定义的将根目录下的 README.md 文件复制到构建输出目录的操作也毫无问题。然而,当我将代码推送到 GitHub 仓库后,GitHub Actions 工作流启动,却在执行到复制 README.md 文件这一步时出错,日志中清晰地显示:
这让我十分困惑,因为 README.mdR 文件确实就存在于项目的根目录下,本地能正常识别,为何在 GitHub Actions 中就找不到了呢?
二、排查过程
(一)初步怀疑文件未正确检出
首先,我怀疑是 GitHub Actions 在检出代码时出现了问题,导致 README.md 文件没有被正确下载到运行环境中。我检查了工作流中的 actions/checkout 步骤,发现并没有明显的配置错误。不过,为了确保完整检出仓库历史,我在该步骤中添加了 fetch-depth: 0 参数,重新推送代码触发工作流,结果问题依旧存在。
(二)考虑路径差异
接着,我意识到本地和 GitHub Actions 的运行环境可能存在路径差异。在本地开发时,我习惯了特定的文件路径结构,但 GitHub Actions 运行在 Ubuntu 环境下,其工作目录可能与我预期的不同。为了验证这一点,我在复制文件的 copy-readme.js 脚本中添加了打印当前工作目录的语句:
console.log('当前工作目录:', __dirname);
重新运行工作流后,从日志中看到工作目录为 /home/runner/work/vivien-blog-code/vivien-blog-code,这与预期相符,说明路径结构本身没有问题。
(三)关注分支情况
我又想到可能是分支的问题。也许我在本地测试时使用的分支和 GitHub Actions 触发工作流的分支不一致,而 README.md 文件只存在于我本地测试的分支中。仔细检查了工作流配置中的 on.push.branches 字段,发现配置的正是我本地使用的 main 分支,排除了分支不一致的可能性。
(四)检查缓存及权限
考虑到缓存可能带来的影响,我在工作流中添加了清除 node_modules 缓存的步骤,重新运行后问题仍然没有解决。同时,我也检查了文件权限,在复制文件前添加了设置文件权限的命令 chmod -R 755.,但依旧未能成功。
(五)发现文件名大小写问题
在几乎排查了所有可能的常规问题后,我突然想到在 Linux 环境下文件名是大小写敏感的。我仔细检查了本地的 README.md 文件,发现文件名中的 .md 部分实际上是大写的,即 README.MD。而我的 copy-readme.js 脚本和 package.json 中的构建脚本都是按照 README.md
来查找文件的,这很可能就是问题的根源!
三、问题解决
(一)修改文件后缀
我立即将 README.MD 文件名修改为 README.md
但这里有个问题,git 是不区分大小写的,所以我改了后缀后推送,发现远程仓库中的文件依然是 README.MD。
于是,我先把 README.MD 文件给删了,推送一次,再重新创建一个 README.md,推送一次,完美解决
此时远程仓库中的 README.md 文件也正确了。
(二)重新推送验证
修改完成后,我将代码重新推送到 GitHub 仓库。这次,GitHub Actions 工作流顺利运行,成功完成了打包过程,并且 README.md 文件也被正确地复制到了构建输出目录中。困扰我许久的问题终于得到了解决。
四、总结与启示
这次解决问题的经历让我深刻认识到在跨环境开发和部署过程中,一些看似微不足道的细节可能会引发严重的问题。文件名大小写敏感就是一个很容易被忽视的点,尤其是在本地开发环境(如 Windows)对文件名大小写不敏感的情况下。
同时,详细的日志记录和逐步排查问题的方法也非常重要,它们能帮助我们快速定位到问题的关键所在,提高解决问题的效率。