Github Pages上animate.css无法识别的问题求助

问题背景 #

部署作品集项目到Github Pages后，本地正常的animate.css动画在站点上失效，但其他目录的style.css可正常加载。已执行npm install gh-pages --save-dev但未修改package.json，Github Pages配置为master分支、/root目录。

排查与解决步骤 #

• 检查CSS引入路径
  若直接引用node_modules中的animate.css（如./node_modules/animate.css/animate.min.css），Github Pages默认不会部署node_modules目录，会导致资源请求404。两种替代方案：

  1. 改用CDN引入：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  2. 手动复制animate.min.css到项目静态资源目录（如/css），修改引用路径为./css/animate.min.css

• 配置gh-pages部署脚本
  打开package.json添加以下配置，确保部署资源正确上传：

  "scripts": {
    "deploy": "gh-pages -d ."
  },
  "homepage": "https://al3xxrs.github.io/aprilia-website/"
  

  之后执行npm run deploy重新部署项目。

• 验证动画类名正确性
  animate.css v4版本类名格式为animate__animated animate__[动画名]，若使用旧版的animated [动画名]格式，线上会不生效，需同步调整HTML中的类名。

• 触发重新部署
  若Github Pages存在缓存，可提交空commit触发重新部署：

  git commit --allow-empty -m "触发重新部署"
  git push origin master
  

内容的提问来源于stack exchange，提问作者Alex