Hexo 系列 - 2. 搭建网站并安装 Fluid 主题

1. 利用 hexo 建站

在指定文件夹中新建所需要的文件 

1
2
3
4
hexo init <folder> # 1. 在当前路径下创建文件夹 <folder>
                   # 并在 <folder> 中初始化 hexo 项目
cd <folder>        # 2. 进入 hexo 项目文件夹 <folder>
npm install        # 3. 在项目文件夹中安装 hexo 引擎

执行 hexo init myblog 后，文件夹目录如下 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
MYBLOG
├── .github/                 # （可选）GitHub 相关配置
├── node_modules/            # npm 安装的所有依赖包
    └── hexo-theme-landscape/   ← 主题完整代码
├── scaffolds/               # 新建文章/页面的模板
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source/                  # 你真正写内容的地方
│   └── _posts/              # 博文目录（文章都放这里）
│       └── hello-world.md   # 示例文章
├── themes/                  # 主题目录（每个主题一个子文件夹）
│   └── .gitkeep             # 占位文件，保证 themes 目录能被 git 提交
├── .gitignore               # Git 要忽略的文件/文件夹
├── _config.yml              # 站点的主配置文件（最重要）
├── _config.landscape.yml    # landscape 主题的专用配置（按主题命名）
├── package-lock.json        # 锁定依赖具体版本
└── package.json             # 项目信息 & npm 依赖 & 常用脚本

1.1 博客内容

  • source/_posts/
    • 是默认的文章目录
    • 除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。 Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
    • 之后写的博客文章 .md 都放在这里。
    • hexo new "my-first-post" 会自动在 source/_posts/ 下面生成一个 my-first-post.md
    • Hexo 会把 source 里的内容“编译”成静态网页输出到 public/（执行 hexo g 后才会出现 public 目录）
  • scaffolds/
    • 博客模板目录，新建文章/页面时用的“初始模板”。
    • post.md：使用 hexo new post 创建 “标题” 时的模板
    • page.md：使用 hexo new page 创建 “about” 时的模板
    • draft.md：使用 hexo new draft 创建 “草稿标题” 时的模板
    • 可以改这些文件，让每篇新文章自动带上固定的 front-matter（比如作者、分类等）。

1.2 设置

  • _config.yml：整个站点的主配置文件。包括：

    • 站点标题、副标题、语言

    • URL、permalink 结构

    • 主题

    • Markdown / 部署等配置

    • Hexo 相关设置

  • _config.landscape.yml：和主题名字对应的主题配置文件

    • 是 Hexo 的一种“按主题拆分配置”的写法。

    • 使用 theme: landscape 时，这个文件会作为 landscape 主题的配置生效。

    • 换成 Fluid 主题时，可以也搞一个 _config.fluid.yml。

  • node_modules/

    • npm 安装的所有依赖包都在这里（hexo 核心、插件、主题依赖等）。
    • 非常大但不用管，不需要手动修改。
    • 一般不会提交到 git（被 .gitignore 忽略）。

  • package.json

    • 项目的“说明书 + 依赖清单”。

    • 内容包括：

      • “scripts”：给 Hexo 命令起别名 

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        "scripts": {
          # 把 source/ 的内容编译后输出到 public/ 目录
          "build": "hexo generate",
          # 清理缓存和 public/ 输出目录，遇到奇怪问题时重置
          "clean": "hexo clean",
          # 把生成好的 public/ 部署到远端（例如 GitHub Pages）。
          # 具体怎么部署，要配置 _config.yml 里的 deploy
          "deploy": "hexo deploy",
          # 启动本地预览服务器，默认地址 http://localhost:4000
          "server": "hexo server"
        }
        npm run build = hexo generate npm run clean = hexo clean npm run deploy = hexo deploy npm run server = hexo server

      • dependencies：依赖哪些 npm 包 

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        "dependencies": { 
          # Hexo 的核心引擎
          "hexo": "^8.0.0",
          # 生成器（generators）：负责生成不同页面类型
          "hexo-generator-archive": "^2.0.0", 
          "hexo-generator-category": "^2.0.0", 
          "hexo-generator-index": "^4.0.0", 
          "hexo-generator-tag": "^2.0.0", 
          # 渲染器（renderers）：把模板/Markdown/CSS 变成最终网页
          "hexo-renderer-ejs": "^2.0.0", 
          "hexo-renderer-marked": "^7.0.0", 
          "hexo-renderer-stylus": "^3.0.1", 
          # Hexo 自带的本地预览服务器：hexo server / hexo s 就靠它。
          "hexo-server": "^3.0.0", 
          # 默认自带的主题 landscape
          "hexo-theme-landscape": "^1.0.0" 
        }

1.3 主题

  • themes/：每个主题一个子文件夹，如 themes/landscape。

    • 现在只有一个 .gitkeep 占位文件，说明没有真正的主题文件夹。

    • _config.yml 配置了 theme: landscape，Hexo 需要判断

      • 有 themes/landscape/ → 用这份（本地主题）

      • 没有 themes/landscape/ → 用 npm 安装的 node_modules/hexo-theme-landscape/

      • 优先级：本地主题 > npm 安装的主题

      • node_modules 里的主题当作“依赖包”，不要直接改，避免以后 npm install 覆盖你的修改。

1.4 Git 相关

  • .gitignore 告诉 Git 哪些文件不要提交，比如：

    • node_modules/

    • public/

    主要作用是避免仓库变得又大又乱。

  • .github/

    专门提供给 GitHub 使用的配置目录，比如：

    • GitHub Actions 工作流

    • issue 模板等

    对 Hexo 本身没影响，有需要再用即可。

2. 更换 Hexo 默认主题为 Fluid 主题

2.1 安装 Fluid 主题

安装 Fluid 主题的 npm 包 

1
npm install --save hexo-theme-fluid
会在 node_modules/hexo-theme-fluid/ 文件中安装 Fluid 主题的代码。

更新主题 

1
npm update --save hexo-theme-fluid
## 2.2 配置 Fluid 主题 然后在 _config.yml 里改： 
1
2
theme: fluid     # 指定主题
language: zh-CN  # 指定语言
项目根目录下创建空的 _config.fluid.yml，作为 Fluid 主题的配置文件。

2.3 创建“关于”页面

  • 执行 hexo new page about 会在 source/about/ 下创建一个 about.md 文件。
  • 编辑 about.md，添加 front-matter： 
    1
    2
    title: 关于
    layout: about

3. 本地发布并访问

进行 Hexo 三件套就可以本地发布并访问 

1
2
3
hexo clean
hexo g
hexo s

4. 部署到 GitHub Pages

github 建立一个空项目

注意，部署到 GitHub Pages 时，需要在 _config.yml 里配置： 

1
2
3
4
deploy:
  type: git
  repo: https://github.com/yourusername/yourusername.github.io.git
  branch: master
并且需要安装 hexo-deployer-git 
1
npm install -g hexo-deployer-git

本地git 克隆github空项目

然后执行部署三件套 

1
2
3
hexo clean
hexo g
hexo d

code > Hexo
#Hexo #Fluid
Hexo 系列 - 2. 搭建网站并安装 Fluid 主题
http://yylustb.github.io/2025/11/15/code/HEXO/hexo_2/
作者
yylustb
发布于
2025年11月15日
许可协议