Hexo GitHub搭建博客时，如何解决部署后页面空白的问题？

Question

在使用Hexo与GitHub搭建博客时，部署后页面空白是一个常见问题。主要原因可能包括：1) _config.yml配置文件中的url和base设置错误；2) GitHub仓库名称不符合hexo-deployer-git的要求（应为username.github.io）；3) 部署命令执行不完整，导致生成的文件未正确上传。 解决方法如下：首先确认_config.yml中url和base路径与实际域名一致；其次检查本地生成的public文件是否完整，若缺失需重新运行`hexo clean && hexo g`清理并生成静态文件；最后确保正确执行`hexo d`完成部署。若问题依旧存在，可通过浏览器开发者工具查看具体报错信息，进一步定位问题根源。此外，核实GitHub仓库权限及分支设置也是重要环节。

Answer 1

1. 问题概述

在使用Hexo与GitHub搭建博客时，部署后页面空白是一个常见问题。这可能由多种原因导致，包括配置文件设置错误、仓库命名不符合要求以及部署命令执行不完整等。

• _config.yml中的url和base路径设置错误。
• GitHub仓库名称不符合hexo-deployer-git的要求（应为username.github.io）。
• 部署命令执行不完整，导致生成的静态文件未正确上传。

以下是逐步分析和解决此问题的方法。

2. 配置文件检查

首先需要确认Hexo的主配置文件_config.yml是否正确设置：

# Example _config.yml settings
url: https://yourusername.github.io
base: /

确保url字段与你的实际GitHub Pages域名一致。如果使用自定义域名，则需要额外配置CNAME文件。同时，base字段应根据项目目录结构进行调整，通常默认为“/”。

3. 检查本地生成的静态文件

运行以下命令清理并重新生成静态文件：

hexo clean && hexo g

检查public目录下是否生成了完整的HTML、CSS和JS文件。如果文件缺失或内容异常，可能是由于插件冲突或模板文件损坏引起的。

4. 部署流程验证

完成静态文件生成后，确保通过以下命令正确部署：

hexo d

该命令会将public目录下的所有文件推送到指定的远程仓库分支。如果部署失败，可以通过查看终端输出的日志信息定位问题。

5. 浏览器开发者工具排查

若页面仍然空白，可以利用浏览器开发者工具进一步排查：

1. 打开开发者工具（F12），切换到“Network”标签。
2. 刷新页面，观察是否有资源加载失败的提示。
3. 检查控制台（Console）中是否存在JavaScript错误。

这些信息可以帮助你更精准地定位问题所在。

6. GitHub仓库权限与分支设置

最后，核实GitHub仓库的权限和分支设置是否正确：

检查项	正确值
仓库名称	username.github.io
默认分支	main 或 gh-pages
访问权限	Public

确保仓库名称符合规范，并且静态文件被正确推送到默认分支。

7. 流程图总结

以下是整个排查流程的可视化表示：

graph TD;
    A[开始] --> B{检查_config.yml};
    B --是--> C{检查public目录};
    C --否--> D[重新生成文件];
    D --> E[执行部署];
    E --> F{页面是否正常};
    F --否--> G[检查浏览器报错];
    G --> H[检查GitHub设置];