从零开始:Hexo 搭建与 Stellar 主题的 Git 进阶配置

终于把博客折腾好啦!这次选择了简约的 Stellar 主题,特点是带有知识库wiki功能

记录一下具体的踩坑和配置过程,希望能帮到同样在折腾的你。


1. Hexo 环境初始化

首先,确保你的电脑里已经安装了 Node.js 和 Git。在想要存放博客的文件夹下打开终端:

Bash

1
2
3
4
5
6
7
# 安装 Hexo 脚手架
npm install -g hexo-cli

# 初始化博客文件夹
hexo init my-blog
cd my-blog
npm install

2. 使用 Git Submodule 引入 Stellar 主题

很多小伙伴是直接下载主题包解压,但我更推荐用 Submodule(子模块) 的方式。这样你的博客主仓库和主题仓库是分离的,方便跟随原作者更新。

在博客根目录下运行:

Bash

1
git submodule add https://github.com/xaoxuu/hexo-theme-stellar.git themes/stellar

运行完这个命令后,你会发现根目录下多了一个 .gitmodules 文件,里面记录了主题仓库的地址和路径。这也就是为什么我们不需要手动创建它,Git 会自动帮我们打理好一切。

小贴士:如果你是从 GitHub 拉取现有的博客仓库,记得运行 git submodule update --init --recursive 来同步下载主题文件。


3. 启用 Stellar 主题

修改博客根目录下的 _config.yml 文件:

YAML

1
2
# 找到 theme 配置项
theme: stellar

同时,Stellar 建议将主题的配置文件提取到根目录,这样即使更新主题,你的配置也不会被覆盖。在根目录下新建一个 _config.stellar.yml,内容可以直接参考 themes/stellar/_config.yml


4. 关键配置修改

在 Stellar 中,有一些地方是必改的,能让你的博客瞬间有“灵魂”:

基础信息

_config.stellar.yml 中修改:

  • Site Info: 你的头像、站点图标、底部版权信息。
  • Menu: 导航栏菜单,比如首页、归档、关于等。

侧边栏与小部件

Stellar 的特色就在于极其强大的侧边栏系统。你可以配置 widgets

  • recent_posts: 最近文章。
  • gh_repo: 甚至可以直接展示你的 GitHub 仓库卡片。

5. 常用指令小结

配置好之后,就是熟悉的“三部曲”啦:

Bash

1
2
3
4
hexo clean    # 清理缓存
hexo g # 生成静态文件
hexo s # 本地预览 (localhost:4000)
hexo d # 部署到远程 (如 GitHub Pages)

5. 借助Cloudflare部署

1.设置搜索pages,点击构建应用程序,在弹出的界面选择这个

  1. 在新节目选择用Github部署(提前把Hexo项目上传到github)

3.

3.构建配置按照下面这样填写就好了。version根据你nodejs本地版本填写

4.解析来就结束了!可以自己绑定自定义域名