折腾Stellaris主题踩坑

网上冲浪的时候发现了一位大大自己改的Stellar主题，叫做Stellaris，还蛮好看的，打算敲到新博客上看看，以下是踩坑记录。

1. 环境准备

安装Hexo

1

npm install -g hexo-cli

初始化项目

1
2
3

hexo init "项目名称"
cd "项目名称"
npm install

安装Stellaris

错误解决方案

使用npm安装

1

npm install hexo-theme-stellaris --save

在_config.yml中修改theme为stellaris，然后hexo clean && hexo g，寄。

1
2
3
4
5
6
7
8
9

ERROR
Error: E:\JimmyfaBlog\node_modules\hexo-theme-stellaris\layout\index.styl:1:9
   1| @import 'partial/*'
--------------^
   2| @import 'tag-plugins/*'
   3| @import 'sidebar/*'
   4| @import 'widgets/*'

failed to locate @import file partial/*.styl

正确解决方案

Git安装子模块

1
2
3
4
5

npm install react react-dom hexo-renderer-jsx html-react-parser --save

npm install node-fetch@2 --save

git submodule add https://github.com/chiyuki0325/hexo-theme-stellaris.git themes/stellaris

坑：要先初始化项目文件夹为Git仓库 我是猪

1

git init

使用Git安装前需要先执行这个

同样的，在_config.yml中修改theme为stellaris，再生成一遍，成功解决问题，不过新的BUG又出现了

1
2

ERROR
Error: HeaderAvatar(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

按照作者在主题Github仓库的一个Issue中的回复，需要先设置一个头像才能使用。

需要设置头像。
本主题毕竟只是我改来自用，有些适配的毛病正常。
欢迎 pr。

在_config.yml中添加

1

avatar: /images/avatar.jpg

然后在source/images（没有这个文件夹的要先新建）中放入avatar.jpg，再次生成，搞定。

2. 个性化

首先需要建立主题的配置文件。在根目录下新建对于配置文件的撰写这里不再过多赘述，可以参考官方文档。（没有特殊需求可以直接抄作者的默认配置文件）

侧边栏的配置同理参照官方文档

3. 部署

我们使用Cloudflare的Pages服务来进行部署，可以连接到Github仓库，自动更新，在国内的访问速度比Github Pages好很多。

先将网站部署到Git上，在将网站部署到Github的方面可以可以参考一下这篇文章

在Cloudflare注册一个账号，在右上角找到语言设置，选择简体中文。在仪表盘左侧栏找到Workers 和 Pages进入，点击创建应用程序，选择Pages标签栏，选择连接到Git，跟着流程将你部署网站的Git仓库连接到Cloudflare上。如果你有域名在Cloudflare上，还可以在自定义域中添加你的域名。

4. 结语

第一次正经写Blog （你管这叫BLOG？），尽量写好一些了 虽然还是史。这篇文算是记录一下自己在折腾的过程中踩的坑，希望能帮到有需要的人。