什么是 Hexo？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

准备

如果你没有安装 Node.js，请百度一下，安装好Node.js再回来。

还有 你的双手和大脑

安装

1
2
yarn global add hexo-cli
# npm install -g hexo-cli

搭建Hexo静态博客Fluid主题

建站

安装好 Hexo 后，直接进入主题。

新建一个项目

1
2
hexo init han-hexo
# han-hexo 是我的项目名称

这里有个坑，安装好如果出现这个错误提示

搭建Hexo静态博客Fluid主题

请到你的 npm 安装目录删除 hexo.ps1 文件即可。
默认安装目录 ： C:\Users\用户名\AppData\Roaming\npm

搭建Hexo静态博客Fluid主题

执行完毕后，如图所示，即运行成功。

搭建Hexo静态博客Fluid主题

安装依赖

1
2
3
cd han-hexo
yarn
# npm install

搭建Hexo静态博客Fluid主题

至此，Hexo已经安装完毕并创建了一个名为 han-hexo 的项目。

主题安装

这里我用的是优雅的 Fluid Hexo主题

安装

1
2
yarn add hexo-theme-fluid
# npm install --save hexo-theme-fluid

搭建Hexo静态博客Fluid主题

设置主题为 Fluid

将项目根目录的 _config.yml 中的 theme 的值设置为 fluid
顺便把语言设置成中文 language 为 zh-CN

搭建Hexo静态博客Fluid主题

顺带提一下SEO优化URL地址

搭建Hexo静态博客Fluid主题

配置主题文件

在博客目录下创建 _config.fluid.yml 文件，将主题的 _config.yml ( opens new window )内容复制过去。

搭建Hexo静态博客Fluid主题

创建主题自带的「关于页面」

1
hexo new page about

搭建Hexo静态博客Fluid主题

创建成功后修改 /source/about/index.md ，添加 layout 属性。
修改后的文件示例如下：

1
2
3
4
5
6
---
title: 标题
layout: about
---

这里写关于页的正文，支持 Markdown, HTML

搭建Hexo静态博客Fluid主题

写文章

万事俱备，只差文章

1
2
hexo new hexo-in-cloudflare-workers
# hexo-in-cloudflare-workers 为文件名，随意取

搭建Hexo静态博客Fluid主题

文章支持 HTML MarkDown 语法

编译静态文件

直接终端输入

1
hexo generate

搭建Hexo静态博客Fluid主题

本地测试

1
hexo server

搭建Hexo静态博客Fluid主题

恭喜你，完成Hexo博客胎教级教学