hexo - Hexo Butterfly 主题部署到 GitHub Pages 后 Gallery 相册 404 错误如何解决？

Question

我使用hexo butterfly主题进行博客搭建，并使用了gallery相册，在本地能够显示。
输入hexo clean hexo g hexo d
部署在github上后，该页面出现404.
本地文件夹如下所示：

网上仓库如下所示：

是图片路径的原因吗
百般搜索无果，便询问各位大佬
gallery相册 md代码

{% gallery [lazyload],[rowHeight],[limit] %}
![1](https://s2.loli.net/2024/09/09/snZ7ybRfBvr8Eu5.jpg)
![2](https://s2.loli.net/2024/09/09/XIzvo8PgrETHelL.jpg)
![3](https://s2.loli.net/2024/09/09/8d4sIoVMnEPZvaf.jpg)
![4](https://s2.loli.net/2024/09/09/WYUCmH4XR9OBrpZ.jpg)
![5](https://s2.loli.net/2024/09/09/FUXWExa8vSBHO9Z.jpg)
![6](https://s2.loli.net/2024/09/09/rkdFJEj3TpVwDGb.jpg)
![7](https://s2.loli.net/2024/09/09/JazWHQCwGlFqts9.jpg)
![8](https://s2.loli.net/2024/09/09/ot6Bzhru5O4kEVU.jpg)
![9](https://s2.loli.net/2024/09/09/8yXFnaIOrPRwe4J.jpg)
{% endgallery %}

Answer 1

问题找到了，gallery文件下的index.html原来是这样的：

<div class="gallery-group-main">
    {% galleryGroup '旅游风光' '自己拍摄的图片' '/gallery/fuji/' https://s2.loli.net/2024/09/09/snZ7ybRfBvr8Eu5.jpg %}
    {% galleryGroup '我和我的朋友们' '欢乐时光' '/gallery/happy/' https://s2.loli.net/2024/09/09/s1hpRzojLSDGOVr.jpg %}
    {% galleryGroup '日常记录' '生活中的琐碎' '/gallery/life/' https://s2.loli.net/2024/09/09/jbOG7LqN14uneCo.jpg %}
    </div>

但我在引用地址时多打了个“/",本来应该是"/gallery/fuji".
这就是问题所在，删掉/后问题解决。

Answer 2

当你在使用 Hexo 和 Butterfly 主题部署到 GitHub Pages 后遇到 Gallery 相册 404 错误时，通常是因为图片资源的链接路径在部署后没有正确设置或更新。以下是一些可能的解决步骤：

1. 检查 _config.yml 配置

确保你的 _config.yml 文件中关于图片和其他静态资源的配置是正确的。特别是关于 url 和 root 的设置，这些在部署到 GitHub Pages 时需要特别注意。

• url: 这应该是你的 GitHub Pages 仓库的 URL（例如 https://yourusername.github.io/）。
• root: 通常设置为 /，除非你的站点位于 GitHub Pages 下的某个子目录。

2. 检查图片路径

确保你的 Markdown 文件或模板中引用的图片路径是正确的。GitHub Pages 要求所有资源都应该是相对路径或者绝对路径（但必须是基于你的 GitHub Pages URL）。

• 本地路径: 在本地开发时，你可能使用的是相对路径（如 ../images/photo.jpg）。这通常没问题，但在部署到 GitHub Pages 后，路径可能需要调整。
• GitHub Pages 路径: 确保路径是相对于你的 GitHub Pages 仓库的根目录。

3. 检查 GitHub Pages 的构建和部署设置

• 确保你的 GitHub 仓库设置为了 GitHub Pages 的源。这通常在仓库的 Settings -> Pages 部分设置。
• 确保你的分支设置正确，通常是 master 分支（或 main 分支，取决于你的 GitHub 仓库设置）。

4. 清除缓存

有时候，浏览器缓存或 CDN 缓存可能导致你看到的是旧的部署结果。尝试清除浏览器缓存或使用无痕模式查看你的网站。

5. 检查 .gitignore

确保你的 .gitignore 文件没有忽略掉需要上传的图片或其他资源文件。

6. 查看网络请求

使用浏览器的开发者工具（通常可以通过按 F12 打开）查看请求的图片资源的 URL 是否正确，以及是否返回了 404 错误。

7. 重新生成和部署

在完成上述检查后，重新运行 hexo clean、hexo g 和 hexo d 来清理、生成和部署你的网站。

如果以上步骤都不能解决问题，可能需要更详细地检查你的 Hexo 和 Butterfly 主题的配置，或者考虑在 GitHub Pages 的 Issues 页面或相关社区中寻求帮助。