1 安装Hexo

安装Node.js

首先下载稳定版 https://nodejs.org/en/download/

安装选项全部默认，一路点击Next。最后安装好之后，按Win+R打开命令提示符，输入node -v和npm -v，如果出现版本号，那么就安装成功了。

添加国内镜像源

npm config set registry https://registry.npm.taobao.org

安装Git

为了把本地的网页文件上传到github上面去，我们需要用到分布式版本控制工具

Git - Downloading Packagegit-scm.com

安装选项还是全部默认，只不过最后一步添加路径时选择Use Git from the Windows Command Prompt，这样我们就可以直接在命令提示符里打开git了。

安装完成后在命令提示符中输入git --version验证是否安装成功。

连接Github步骤参考网上教程

2 搭建

全局安装 hexo

# 如果 npm 安装缓慢可以使用淘宝镜像加速：npm config set registry https://registry.npm.taobao.org
npm install -g hexo

安装以后命令行终端输入 hexo -v，如果显示 hexo 信息，则安装成功。

接下来初始化 hexo，在空文件夹（不能有任何文件，包括隐藏文件）执行命令 hexo init。成功后的目录结构：

│  .gitignore
│  package.json
│  yarn.lock
│  _config.yml
├─node_modules
├─scaffolds
│     draft.md
│     page.md
│     post.md
├─source
│  └─_posts
│       hello-world.md
└─themes

安装 fluid 主题

下载最新版并解压到 themes 目录下，重命名为 fluid，然后在博客 _config.yml 设置如下：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: fluid

3 配置

推荐使用覆盖设置功能，可以在主题目录之外自定义 config，不用担心更新主题时丢失配置。

在博客 source 目录中新建 _data 目录（不是主题的 source），再新建两个配置文件：

fluid_config.yml    # 主题配置在这里修改
fluid_static_prefix.yml # 静态资源配置在这里修改

这样主题就会有两个配置文件：

  1. /source/_data/fluid_config.yml
  2. /themes/fluid/_config.yml

1 的优先级高于 2，即 1 中的配置会覆盖掉 2 中同名配置项。

本地调试

第一次运行应用先要安装依赖

# 下面二选一
npm install

yarn install

（演示将以 yarn 作为安装工具，可自行替换为 npm）启动服务，用于调试

# 三选一
npm run server
yarn run server
hexo s # hexo server 的简写

生成

hexo clean && hexo g

压缩（可选）

可以使用 hexo-all-minifier 插件对生成的文件和图片进行压缩，大致步骤：

先安装插件：

npm i hexo-all-minifier --save

# Mac 系统还需要额外安装
brew install libtool automake autoconf nasm

然后在博客配置中加入：

all_minifier: true

这样即可快速使用。

具体的细节配置可参考官方文档

使用 jsDelivr 服务（可选）

插入来自 Github 仓库的图片，由于网络情况可能会出现加载慢和无法加载的情况，我们可以使用 jsDelivr 来加速图片文件等媒体文件的加载。

通常情况下，可以新建一个仓库来存放这些文件，目前已知的有图片、视频和引用的相关文件可以使用，Github 仓库最大上传文件为 25M，请注意文件大小。

使用方法（文件的绝对地址）

https://cdn.jsdelivr.net/gh/user/repo@version/file

相关实例（博客仓库下 master 分支里 favicon 图片文件）

https://cdn.jsdelivr.net/gh/fluid-dev/hexo-theme-fluid@master/source/img/favicon.png

4 部署

这里演示如何部署到 GitHub Pages 中。

在博客配置中设置部署仓库，参考如下：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  - type: git
    repo: git@github.com:username/username.github.io.git
    branch: master

将你的 ssh 密钥上传到远程仓库，如果未设置则需要手工输入用户名和密码。然在终端命令行：

hexo d

5 更新主题

方法一

TIP

适用于没有自行修改任何代码的情况（配置文件除外）

  1. 将自己的配置文件备份（如果完整使用覆盖配置功能可忽略此步骤）
  2. 将 fluid 文件夹全部删除，重新下载 release 并解压
  3. 如果某些配置发生了变化（改名或弃用），release 的说明里会特别提示，同步修改原配置文件即可。

方法二

TIP

适用于自定义了一些代码，或想体验 master 分支的情况

  1. 确定自己的 fluid 目录已经开启 git，并且所有改动都已 commit
  2. 把 fluid 仓库的 master 分支拉取到自己的分支上（可新建一个分支再拉取）
git pull https://github.com/fluid-dev/hexo-theme-fluid.git master
  1. 解决代码冲突，保留自己修改的部分（如何解决冲突可自行搜索）

5 加快网页加载

  • 对于所有用户，将各种第三方库配置公共 CDN 是最有效的方式，可以通过配置 _static_prefix.yml 来链接（默认已经使用 staticfile CDN，国内用户可不做改动）；
  • 如果你的域名已备案，可以使用七牛云、阿里云、腾讯云等大厂的 OSS 服务并绑定域名，将生成后的 public 目录下全部上传到 OSS，然后你不仅可以无服务器部署博客，加载速度也将无可比拟；
  • 没有备案，也可以通过香港及海外地区的云，或者私有 CDN 等方式进行加速，推荐一份 CDN 使用指南。
  • 如果图片是存在 source 目录中，建议搭配 hexo-all-minifier 插件，可自动对图片进行压缩；
  • 如果是存放在外部的图片，建议先使用 tinypng 进行压缩。

6 改造更多功能

TIP

部分功能需要修改主题源代码，可能对今后更新造成困扰，请根据自己需求使用，并检查是否有冲突，建议提前做好备份

网站运行时间统计

本段代码来源于网络。在主题目录 fluid/layout/_partial/footer.ejs 文件中对应位置添加相关代码。

<div>
  <span id="timeDate">载入天数...</span>
  <span id="times">载入时分秒...</span>
  <script>
  var now = new Date();
  function createtime(){
      var grt= new Date("02/14/2017 00:00:00");//此处修改你的建站时间或者网站上线时间
      now.setTime(now.getTime()+250);
      days = (now - grt ) / 1000 / 60 / 60 / 24;
      dnum = Math.floor(days);
      hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
      hnum = Math.floor(hours);
      if(String(hnum).length ==1 ){
          hnum = "0" + hnum;
      }
      minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
      mnum = Math.floor(minutes);
      if(String(mnum).length ==1 ){
                mnum = "0" + mnum;
      }
      seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
      snum = Math.round(seconds);
      if(String(snum).length ==1 ){
                snum = "0" + snum;
      }
      document.getElementById("timeDate").innerHTML = "本站安全运行&nbsp"+dnum+"&nbsp天";
      document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
  }
  setInterval("createtime()",250);
  </script>
</div>

一言

一言在博客网站中非常常见，正如它所说，用代码表达言语的魅力。在页面中，使用直接添加添加如下代码即可。在主题目录 fluid/layout/_partial/footer.ejs 文件中对应位置添加相关代码。以下代码为默认使用示例，如需要定制，请到 hitokoto developer 中查看详情。

<p id="hitokoto">:D 获取中...</p>
<script>
  fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
      const hitokoto = document.getElementById('hitokoto')
      hitokoto.innerText = data.hitokoto
      })
      .catch(console.error)
</script>

在新建页面添加评论

目前，主题配置文件只能在文章页面添加评论，如果需要在新建的页面添加评论插件，请在打开评论插件的情况下，在文章页面查看评论插件对应的 HTML 代码，并添加到页面的 Markdown 文件中。

7 Front-matter概念

来源于https://hexo.io/zh-cn/docs/

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数描述默认值
layout布局
title标题文章的文件名
date建立日期文件建立日期
updated更新日期文件更新日期
comments开启文章的评论功能true
tags标签（不适用于分页）
categories分类（不适用于分页）
permalink覆盖文章网址
keywords仅用于 meta 标签和 Open Graph 的关键词（不推荐使用）

分类和标签

只有文章支持分类和标签，您可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

categories:
- Diary
tags:
- PS3
- Games

分类方法的分歧

如果您有过使用 WordPress 的经验，就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法：

categories:
  - Diary
  - Life

会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。

categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。

8 主题设置节选

来源：https://hexo.fluid-dev.com/docs/guide/

文章页

文章在首页的略缩图

在文章开头 Front-matter 中配置 index_img 属性。

---
title: 文章标题
tags: [Hexo, Fluid]
index_img: /img/example.jpg
date: 2019-10-10 10:00:00
---
以下是文章内容

和 Banner 配置相同，/img/example.jpg 对应的是存放在 /source/img/example.jpg 目录下的图片（目录也可自定义，但必须在 source 目录下）。

也可以使用外链 Url 的绝对路径。

文章页顶部大图

默认显示主题配置中的 post.banner_img，如需要设置单个文章的 Banner，在 Front-matter 中指定 banner_img 属性。

本地图片存放位置同上。

---
title: 文章标题
tags: [Hexo, Fluid]
index_img: /img/example.jpg
banner_img: /img/post_banner.jpg
date: 2019-10-10 10:00:00
---
以下是文章内容

文章内容图片

本地图片存放位置同上。

![](/img/example.jpg)