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

前言

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

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

环境

hexo 版本：7.2.0

hexo 更换主题

第一，进入 hexo 目录下的 theme文件夹，通过 git clone的方式下载目标主题，例如

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

完成上述步骤后，会在你的 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

第三，至此，主题就切换完成了。而对主题本身的配置则根据相应主题的官方文档，对_config.XXX.yml文件进行修改，这里就不展开了。

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

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

# 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，则需要加上你的仓库名

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

hexo clean
hexo g
hexo d