从 0 搭建 Hexo + Fluid + GitHub Pages 博客

本文是一个从零开始搭建 Hexo 博客的教程，使用 Fluid 主题并部署到 GitHub Pages。适合初学者和想要快速搭建个人博客的人。➡️

1. 整体思路（先有个全局概念）

整体来说，需要做以下几件事：

  1. 安装环境：Node.js、Git

  2. 用 Hexo 生成一个本地博客

  3. 把主题换成 Fluid

  4. 写几篇文章、关于页

  5. 配好 GitHub Pages，一条命令部署到网上

2. 准备环境

  1. 安装 Node.js（必须）

  • 去 Node.js 官网下载安装 LTS 版本（一般是标着 “LTS” 那个）。

  • 装好后，打开 终端 / PowerShell / Git Bash，检查：

    1
    2
    node -v
    npm -v

    只要能看到版本号就 OK。

  1. 安装 Git（必须）

  • 去 Git 官网下载安装（一路下一步就行）。

  • 装好后检查：

    1
    git --version

    看到版本号就说明安装好了。

  1. 注册 GitHub 账号（用来放博客）

    1. 打开 GitHub，注册账号。

    2. 记住自己的 用户名（下面会用到，例如：yylustb）。

3. 安装 Hexo 并创建博客

  1. 全局安装 Hexo CLI

    在终端里执行（任意目录都可以）：

    1
    2
    npm install -g hexo-cli
    hexo -v

    第二条命令能看到版本信息就说明安装好了。

  1. 创建博客项目

    找一个你喜欢放项目的文件夹，比如 D:，在里面打开终端，执行：

    1
    2
    3
    4
    5
    6
    mkdir my-blog
    cd my-blog

    # 初始化 hexo 项目
    hexo init .
    npm install

    这一步做完后，项目结构大致是这样：

    1
    2
    3
    4
    5
    6
    7
    8
    .
    ├── _config.yml        # 站点主配置
    ├── package.json
    ├── scaffolds
    ├── source
    │   ├── _drafts
    │   └── _posts
    └── themes

  1. 本地预览一下

    在项目根目录（ my-blog ）执行：

    1
    2
    hexo g        # 生成静态文件
    hexo s        # 或 hexo server，启动本地服务

    浏览器打开：http://localhost:4000，应该能看到 Hexo 默认主题的博客页面。

    先确认这里没问题，再换主题。

4. 安装并启用 Fluid 主题（重点）

  1. 安装 Fluid 主题

    在博客根目录执行：

    1
    npm install --save hexo-theme-fluid

  1. 指定使用 Fluid 主题

    打开博客根目录的 _config.yml ，找到（或者自己加上）：

    1
    2
    theme: fluid
    language: zh-CN   # 用中文界面

    language 会影响主题的显示语言（菜单文字等）。

  1. 建议：关闭 Hexo 自带代码高亮（防止和主题冲突）

    仍然是根目录 _config.yml ，找到 highlight: 这一段，改成：

    1
    2
    highlight:
      enable: false

    主题会自己处理代码高亮，否则可能出现双行号等奇怪样式。

  1. 新建主题配置文件 _config.fluid.yml

    官方推荐：通过 npm 安装主题时，在站点根目录新建一个 _config.fluid.yml，把主题默认配置拷贝进来，这样以后升级主题不会丢配置。

    步骤：

    1. 在博客根目录新建文件： _config.fluid.yml

    2. 打开 node_modules/hexo-theme-fluid/_config.yml（这是主题自带的配置模板），

    3. 把里面的内容全部复制到根目录的 _config.fluid.yml 中。

    之后所有和主题相关的修改，都在 _config.fluid.yml 改，不去动 node_modules 里的文件。

  1. 重新生成 + 启动看看效果

    1
    2
    3
    hexo clean
    hexo g
    hexo s

    刷新 http://localhost:4000，已经是 Fluid 的样子了（顶部大 banner、Material 风格等）。

5. 基本内容：文章 + 关于页

  1. 写一篇测试文章

    在博客根目录执行：

    1
    hexo new "第一篇文章"

    Hexo 会在 source/_posts 里生成一个类似：

    1
    source/_posts/第一篇文章.md

    打开它，里面是这样：

    1
    2
    3
    4
    5
    6
    7
    ---
    title: 第一篇文章
    date: 2025-11-19 12:00:00
    tags:
    ---

    这里写正文内容，可以用 Markdown。

    随便写点内容，再：

    1
    2
    hexo g
    hexo s

    本地刷新页面就能看到这篇文章。

  2. 创建「关于」页面（Fluid 推荐）

    Fluid 文档里建议手动创建 about 页：

    1
    hexo new page about

    生成的文件在：source/about/index.md，编辑为：

    1
    2
    3
    4
    5
    6
    ---
    title: 关于
    layout: about
    ---

    这里写你的自我介绍、联系方式等等。

    注意 layout: about 这一行很重要，它告诉主题用「关于页」的布局来渲染。

6. 简单配置一下主题（让它更像“你的博客”）

打开 _config.fluid.yml，重点先改这些：

  1. 站点信息

    1
    2
    3
    4
    5
    # 站点基本信息
    title: 你的博客标题
    subtitle: 副标题（可选）
    description: 这是我的个人博客
    author: 你的名字

  2. 头像 / 图标（可选）

    把头像图片放到 source/img/avatar.png，然后在 _config.fluid.yml 里找：

    1
    2
    avatar:
    img: /img/avatar.png

  3. 导航菜单（顶部菜单）

    在 _config.fluid.yml 中找到导航相关配置（大概长这样）：

    1
    2
    3
    4
    5
    navbar:
      menu:
          首页: /
          归档: /archives/
          关于: /about/

    可以按需要增减，比如标签页 /tags/、分类页 /categories/ 等（那些页面可以之后用 hexo new page 创建）。

7. 部署到 GitHub Pages（让别人能访问）

有很多部署方式，这里给出一个 相对简单、Hexo 官方推荐的 hexo-deployer-git 方式。

  1. 在 GitHub 创建仓库

    1. 登录 GitHub

    2. 新建一个仓库，名字设置为：

      1
      你的用户名.github.io

      比如用户名是 yylustb，仓库名就叫 yylustb.github.io。

    3. 创建完成后暂时不要放东西，让 Hexo 帮你推送。

  1. 安装部署插件 hexo-deployer-git

    在博客根目录执行：

    1
    npm install hexo-deployer-git --save

  1. 配置 _config.yml 的 deploy 部分

    打开博客根目录的 _config.yml，加上（或者修改为）：

    1
    2
    3
    4
    deploy:
    type: git
    repo: https://github.com/你的用户名/你的用户名.github.io.git
    branch: main

    示例： repo: https://github.com/yylustb/yylustb.github.io.git

    这表示：

    • 使用 git 部署

    • 把生成的静态文件推到 main 分支

  1. 一键部署命令

    在博客根目录执行：

    1
    2
    3
    hexo clean
    hexo g
    hexo deploy    # 简写 hexo d

    第一次会弹出 GitHub 登录（或要求使用 Token），按提示登录即可。

  1. GitHub Pages 设置

    1. 打开 GitHub 上你的仓库 用户名.github.io

    2. 进入 Settings → Pages

    3. Source 选择 main 分支，保存。

    4. 等一会儿（几十秒到几分钟），访问：

      1
      https://你的用户名.github.io

      能看到你的博客，就成功啦 🎉

    之后每次更新文章，只要：

    1
    2
    3
    hexo clean
    hexo g
    hexo d

    GitHub Pages 上的内容就会同步更新。

8. 接下来可以玩的东西

这些就属于「慢慢折腾」的部分了，不一定一次搞完：

  • 在 _config.fluid.yml 里：

    • 开启/配置评论系统（如 Gitalk、Twikoo 等）
    • 配置访问统计、站内搜索、暗色模式等

  • 增加 tags、 categories 页面并在导航栏加入口

  • 控制“部署后是否生成/显示”

    • 在文章头部 front-matter 里加一行：
1
published: false      # 默认为 true， false ：不发布
  • 部署后仍然生成页面，但在列表里隐藏
    • 在文章头部 front-matter 里加一行：
1
2
3
hide: true            # 全站列表都不可见，但仍可通过直链访问该文章页
# 或
archive: true         # 仅在首页等索引页隐藏（更偏“归档/不在首页露出”）
  • 上面的 hide 方法是针对 Fluid 主题的
    • 如果希望“主题无关”的做法，可以用插件 hexo-hide-posts，在 front-matter 加：
1
hidden: true
  • Hexo 自带草稿机制
    • 文章放在 source/_drafts，默认不发布
    • 本地预览草稿可用：
      • hexo --draft（或 hexo server --draft）
  • 使用 note 添加框
1
2
3
{% note primary / secondary / success / danger / warning / info / light %}
这里是内容，可以写 Markdown（加粗、公式、列表等）
{% endnote %}

这里是内容，可以写 Markdown（加粗、公式、列表等）

  • 绑定自己的域名（需要买域名 + DNS 设置 + CNAME 文件）

后面想深度定制可以慢慢看 Fluid 官方文档。 祝你博客搭建顺利！🚀

编程 > Web
#github pages #fluid #Hexo
从 0 搭建 Hexo + Fluid + GitHub Pages 博客
https://nanana-szz.github.io/01-blog/
作者
John Doe
发布于
2025年11月19日
许可协议