官方教程:https://hexo.io/zh-cn/
实战参考:https://zhuanlan.zhihu.com/p/44213627
第一部分 安装
- 安装Git
- 安装Node.js
- 安装Hexo
- GitHub创建个人仓库
- 生成SSH并添加到GitHub
- 将hexo部署到GitHub
- 设置个人域名
- 发布文章
Tips:
- 生成SSH添加到GitHub很重要,细心点。
- branch: master要记得修改为main。
- 个人域名的设置需要考虑,如果决定用Cloudflare,可考虑将主域名绑定到CloudflarePages,辅域名绑定到GitHub,确保访问速度。
第二部分 配置
Tips:
- 一定要用UTF-8的编辑器(Typora可以)。
- 站点信息:
title: 网站名称
subtitle: '子标题'
description: '网站描述'
keywords:
author: 你的名字(昵称)
language: zh-CN
timezone: 'Asia/Shanghai'
- URL: 这个配置项可以留空或不设置,会默认生成“相对链接”,这正是多站部署想要的。但 Hexo 官方明确建议将 relative_link 设置为 false(即生成绝对链接)。因为如果开启 relative_link 来生成相对路径,通常会引入新的问题:资源夹加载失败、功能异常。经实践,直接配置为CDN的域名是可行的,git到GitHub,GitHubPages是自有域名,CloudFlare部署的站点就是主域名(原理不清楚)。注意 url 的书写格式,不要以斜杠 / 结尾,例如写成 https://example.com 而不是 https://example.com/。
- root:/
- permalink: 如 :year/:title.html 就挺好,自己控制文件名称,按年分目录存储静态页面。
- Front-matter:常用
title:
date:
updated:
categories:
tags:
- 合理使用
<!--more-->标记,让首页不至于太臃肿。
<!--more--> 之前的内容 → 显示在首页作为摘要
<!--more--> 之后的内容 → 被隐藏,点击“阅读全文”后才显示
第三部分 主题
更换Hexo主题主要分三步:安装主题文件、修改站点配置、重新生成并预览。以NexT主题为例,整个过程非常简单。
安装
📥 第一步:安装NexT主题
打开终端,进入你的Hexo博客根目录(就是包含_config.yml的那个文件夹),然后选择下面任意一种方法安装即可。
| 安装方式 | 适用场景与命令 | 优点 |
|---|---|---|
| 通过 npm 安装 (推荐) | 适合绝大多数用户,特别是Hexo版本在5.0及以上。npm install hexo-theme-next |
安装简单,后续更新方便(直接用npm update)。 |
| 通过 Git 克隆安装 | 适合开发者,或你想获取最新的开发版代码。git clone https://github.com/next-theme/hexo-theme-next themes/next |
可以随时通过git pull获取最新更新,方便参与开发。 |
⚙️ 第二步:在配置文件中启用主题
主题文件安装好后,你需要告诉Hexo去使用它。
- 在博客根目录下,找到站点配置文件
_config.yml。 - 用任何文本编辑器打开它,找到
theme这个字段。 - 将它的值修改为
next。
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
- 保存并关闭文件。
💡 小提示:请一定注意区分两个
_config.yml文件。一个是博客根目录下的站点配置文件,另一个是安装后位于/themes/next/目录下的主题配置文件,千万别搞混了。
🚀 第三步:验证主题是否更换成功
修改完配置后,就可以在本地启动博客来查看效果了。
在博客根目录下,依次执行以下命令:
# 1. 清除当前生成的文件和缓存
hexo clean
# 2. 重新生成静态文件
hexo generate
# 或使用简写: hexo g
# 3. 启动本地服务器预览
hexo server
# 或使用简写: hexo s
现在,打开浏览器访问 http://localhost:4000,你应该就能看到NexT主题全新的界面了。
✨ 换装之后:快速个性化设置
主题启用后,你还可以进行一些简单的个性化设置,让博客更符合你的心意。
-
切换主题风格:NexT提供了四种不同的外观(Muse, Mist, Pisces, Gemini)。你可以在主题配置文件 (
/themes/next/_config.yml) 中搜索Schemes字段,然后只保留一种你喜欢的风格前面的#号。# Schemes scheme: Pisces # 例如,想用Pisces风格就保留这一行,并把其他行注释掉 # scheme: Muse -
修改主题配置:NexT官方强烈建议不要直接修改
/themes/next/里的文件,因为这样会在未来更新主题时导致冲突或配置丢失。比较推荐的做法是使用**“Alternate Theme Config”**,即在博客根目录下创建一个叫_config.next.yml的文件,把你对主题的所有个性化设置都写在这个文件里。 -
保持更新:为了体验新功能和修复补丁,建议定期更新主题。通过npm安装的话,执行
npm install hexo-theme-next@latest即可。
风格
🎨 NexT 四种外观风格对比
| 外观名称 | 特点 | 布局结构 | 适合人群 |
|---|---|---|---|
| Muse | 最初版本,简洁紧凑,所有内容放在左侧,右侧留有大量空白。 | 单栏,左对齐 | 喜欢极简风格、博客内容以文字为主、不希望有太多干扰元素的博主。 |
| Mist | 在Muse基础上优化了间距和字体,页面留白更多,阅读呼吸感更强。 | 单栏,左对齐 | 追求清晰阅读体验,希望文章段落和模块之间有足够区分的读者。 |
| Pisces | 双栏布局,在左侧或右侧固定显示用户头像、菜单、站点信息等侧边栏。 | 双栏,侧边栏固定 | 希望在浏览文章时,侧边栏的个人信息和导航菜单始终可见的用户。 |
| Gemini | 在Pisces的基础上,让主内容区和侧边栏在宽屏下居中显示,整体更平衡。 | 双栏,居中 | 追求视觉平衡感和现代感的用户,是目前比较受欢迎的默认选择之一。 |
🖼️ 风格速览与选择建议
-
Muse 与 Mist:它们都属于“单栏”流派。Muse 是经典的起点,Mist 则通过增加留白让版面更显优雅。如果你的博客以长篇文字内容为主,希望读者能完全沉浸,可以从这两者中选。
-
Pisces 与 Gemini:它们是“双栏”流派。Pisces 高效实用,Gemini 在视觉上更现代、平衡。如果你希望侧边栏的个人信息、分类目录等能一直显示,方便读者导航,那么双栏会是更好的选择。从社区反馈来看,Gemini 是目前比较受欢迎的默认选项。
⚙️ 如何切换与验证
在博客根目录下的主题配置文件(/themes/next/_config.yml 或 /source/_data/next.yml)中,找到 Schemes 部分:
# Schemes
scheme: Gemini # 👈 修改这里,替换为你想要的外观名称(如 Muse, Mist, Pisces)
#scheme: Muse
#scheme: Mist
#scheme: Pisces
修改后,通过 hexo clean && hexo g -s 即可在本地预览新效果。
建议先从 Gemini 开始体验,因为它兼顾了功能性与视觉平衡。上手后,你可以随时在这四种风格间切换,找到最令自己舒适的一款。
这些风格对移动端(手机访问)的适配都很好,都会自动调整为适合手机浏览的单栏布局。
文末版权声明
主题配置文件中直接搜索并且修改以下内容即可:
creative_commons:
license: by-nc-sa
sidebar: true
post: true
language: zh-CN