Hexo+NexT+GitHub+CloudFlare Blog初体验

官方教程:https://hexo.io/zh-cn/
实战参考:https://zhuanlan.zhihu.com/p/44213627

第一部分 安装

  • 安装Git
  • 安装Node.js
  • 安装Hexo
  • GitHub创建个人仓库
  • 生成SSH并添加到GitHub
  • 将hexo部署到GitHub
  • 设置个人域名
  • 发布文章

Tips:

  1. 生成SSH添加到GitHub很重要,细心点。
  2. branch: master要记得修改为main。
  3. 个人域名的设置需要考虑,如果决定用Cloudflare,可考虑将主域名绑定到CloudflarePages,辅域名绑定到GitHub,确保访问速度。

第二部分 配置

Tips:

  1. 一定要用UTF-8的编辑器(Typora可以)。
  2. 站点信息:
 title: 网站名称
 subtitle: '子标题'
 description: '网站描述'
 keywords:
 author: 你的名字(昵称)
 language: zh-CN
 timezone: 'Asia/Shanghai'
  1. URL: 这个配置项可以留空或不设置,会默认生成“相对链接”,这正是多站部署想要的。但 Hexo 官方明确建议将 relative_link 设置为 false(即生成绝对链接)。因为如果开启 relative_link 来生成相对路径,通常会引入新的问题:资源夹加载失败、功能异常。经实践,直接配置为CDN的域名是可行的,git到GitHub,GitHubPages是自有域名,CloudFlare部署的站点就是主域名(原理不清楚)。注意 url 的书写格式,不要以斜杠 / 结尾,例如写成 https://example.com 而不是 https://example.com/。
  2. root:/
  3. permalink: 如 :year/:title.html 就挺好,自己控制文件名称,按年分目录存储静态页面。
  4. Front-matter:常用
title: 
date:
updated:
categories: 
tags: 
  1. 合理使用<!--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去使用它。

  1. 在博客根目录下,找到站点配置文件 _config.yml
  2. 用任何文本编辑器打开它,找到 theme 这个字段。
  3. 将它的值修改为 next
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
  1. 保存并关闭文件。

💡 小提示:请一定注意区分两个 _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的基础上,让主内容区和侧边栏在宽屏下居中显示,整体更平衡。 双栏,居中 追求视觉平衡感和现代感的用户,是目前比较受欢迎的默认选择之一。

🖼️ 风格速览与选择建议

  • MuseMist:它们都属于“单栏”流派。Muse 是经典的起点,Mist 则通过增加留白让版面更显优雅。如果你的博客以长篇文字内容为主,希望读者能完全沉浸,可以从这两者中选。

  • PiscesGemini:它们是“双栏”流派。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