【教程】hexo 更换主题后，部署在 Github Page 无 CSS 样式

前言

最近更换了 hexo 的主题后，重新部署到 Github Page 上发现不显示 CSS 样式，但在本地启动时又是正常的效果。此外，检查资源请求，发现多个 .css 文件请求 404，判断可能部署后路径除了问题。

本文先讲一下如何更换主题，然后讲一下如何修改路径，让样式能够被正确请求。

环境

hexo 版本：7.2.0

hexo 更换主题

第一，进入 hexo 目录下的 theme文件夹，通过 git clone的方式下载目标主题到 theme文件夹中（目标主题的链接如下图所示），例如

git clone https://github.com/HCLonely/hexo-theme-webstack.git

此外，也可以通过下载 release 等方式获取目标主题。

完成上述步骤后，会在你的 theme文件夹内下载好需要的目标主题，其中目录的结构如下图所示。

在这里，主题所在目录的名称可以更改，例如上图左图中，我将原始的目录名字 hexo-theme-webstack更改为了 webstack。

第二，修改 hexo 根目录下 _config.yml配置文件中的主题配置，如下所示我注释了默认的 landscape主题，并修改为了 webstack主题：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# theme: landscape
theme: webstack

第三，至此，主题就切换完成了。而对主题本身的配置则根据相应主题的官方文档，对 hexo 根目录下的 _config.XXX.yml文件进行修改（XXX 即目标主题的名字，如 hexo 默认的 _config.landscape.yml），这里就不展开了。

解决部署到 Github Page 后无 CSS 样式的问题

方法很简单，在 hexo 根目录下 _config.yml配置文件中，找到对 URL 部分的配置，其他配置选项不动，仅修改 url 选项，如下：

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://eternaldeath.github.io/你的仓库名/

• url 放置完整的路径，如果你是在 Github Page 上部署自己的博客，那么则无需添加“你的仓库名”部分，如果你是对某个仓库创建的 Github Page，则需要加上你的仓库名

【注】我观察到一些教程还要求修改 root 选项，然而在我的 hexo 版本（7.2.0）中并无 root 选项，且上述步骤在仅修改 url 的情况下也可以实现
【注】如何查看你的 hexo 版本：进入你的 hexo 根目录，在命令提示符（power shell 无效）下输入 hexo version，找到下图所示字段即可

然后再重新执行如下指令，即可产生效果

hexo clean
hexo g
hexo d # 部署至上线，如 Github Page