我的Github博客：www.jimmy-wang.com

我的公众号：Jimmy嘚啵嘚

欢迎关注，点star~

1 hexo是什么

Hexo是一个博客框架，使用markdown语法写作，一键编译生成静态文件，一键部署到github或gitlab或gitee等同性交友网站，实现博客搭建，是居家旅行、吹牛装逼的必备工具。

2 初始化hexo博客项目

首先安装node环境（自己百度解决吧，有空再补一篇文章讲它），然后全局安装 hexo-cli ：

cnpm install -g hexo-cli

安装成功后，使用 hexo init 命令初始化项目：

hexo init myblog  # 会在当前目录下创建一个myblog目录

3 创作文章

进入myblog目录，执行以下命令可以创建一篇新文章，标题为test：

hexo new test

hexo会在source/_posts目录下创建一个test.md文件，我们在这里使用markdown语法写博客即可：

---
title: test
date: 2022-04-22 21:17:39
tags: hexo
categories: 教程
---

# 一级标题

## 二级标题

这里开始我们的写作吧

上面文件最上方以---分隔的区域，用于指定文章属性（Front-matter | Hexo），常用的属性就是title, date, tag, categories，分别指定文章标题、建立日期、标签和分类。其中标题和建立日期都是自动生成的，我们不用管。tag和categories一般是由我们自己设置的。

hexo中的分类categories和标签tag的区别在于：categories编译后对应的是一个分类目录，而tag只是一个标记：

一篇文章只能包含一个分类，但是可以包含多个标签。

在我的博客中，我会根据文章类型不同，设置“随笔”、“读书”、“课程”、“技术教程”、“产品分析”五个分类；再根据文章内容添加一些标签，例如“python”、“人工智能”、“区块链”、“生鲜电商”、“供应链”等标识技术领域的关键字。

细心的同学已经观察到了，我们使用hexo new 命令创建的文章，是被放到了source/_posts目录下。事实上，post是hexo文章的一种布局，hexo一共支持3种布局方式：post、page、draft，使用下面的命令可以创建指定布局的文章：

hexo new post <title>
hexo new page <title>
hexo new draft <title>

其中post布局的文章会被创建到source/_posts目录下，表示这是要被发表的文章；page布局的文章会在source目录下创建一个以命名的文件夹，在文件夹下再创建一个index.md，这是个啥意思我也不懂，但是我们一般不用它，因为我们已经使用了tag和categories，就没法使用page了；draft布局的文章会被创建到source/_drafts目录下，表示这是一个草稿，当使用hexo generate命令编译时，不会被编译成静态页面。

如果我们想预览草稿，可以在编译时添加--draft参数：hexo generate --draft。如果我们想把草稿发布，可以使用hexo publish 命令。

写完文章后，我们先使用hexo clean命令清除之前编译的站点页面。

然后使用hexo generate命令编译出静态站点页面（保存在source/public中）。

最后使用hexo server命令就可以在本地预览：

访问http://localhost:4000：

小提示：在hexo3中新增了hexo-server，支持hexo监视文件变动并自动更新，无需重启服务器：

cnpm install hexo-server --save
hexo server

4 部署到Github

hexo最牛逼的地方在于，可以把博客部署到github、gitlab、gitee、gitcode等git代码网站上，利用它们提供的pages服务提供博客服务。

这是因为hexo编译生成的是一个静态网站，而pages服务就是提供静态网站访问服务的。

1、创建一个github仓库，开通pages服务。

2、安装 hexojs/hexo-deployer-git: Git deployer plugin for Hexo. (github.com)

cnpm install hexo-deployer-git --save

3、修改博客配置（_config.yml）:

deploy:
  type: git
  repo: git@github.com:xxxx/xxxx.github.io.git
  branch: master

4、生成站点文件并推送至远程仓库：

hexo clean  # 保险起见，每次我们都清空一下
hexo deploy --generate

5、登入 Github/BitBucket/Gitlab，请在库设置（Repository Settings）中将默认分支设置为_config.yml配置中的分支名称。稍等片刻（github后台在使用Travis CI自动部署），您的站点就会显示在您的Github Pages中。

此外，如果您的 Github Pages 需要使用 CNAME 文件自定义域名，请将 CNAME 文件置于 source 目录下，只有这样 hexo deploy 才能将 CNAME 文件一并推送至部署分支。

更多参考：部署 | Hexo

5 配置博客

为了是我们的博客更加美观易用，我们还需要做一些配置工作。

5.1 插入图片到本地

一般来说，我们在使用markdown笔记写作最大的痛点就在于图片的保存。我们可以使用在线图床保存图片，然后直接插入一个图片链接，这种方式的缺点在于需要使用稳定图床（一般付费），否则过段时间可能图片就没了。

亦或者可以把图片插入到本地，使用相对路径访问（使用typora可以很方便把图片插入到本地指定目录，具体可以参考 mp.weixin.qq.com/s/1Cl86o2ni… 这篇文章中的配置方法。这种方式的缺点在于，当我们使用hexo部署时，会出现图片访问不到的情况。

其实我们是可以把图片插入到本地，让hexo把它编译成静态资源，同我们的blog一同部署，可以省去使用在线图床的额外费用开支，同时也方便我们的文章数据迁移。

1、安装hexojs/hexo-renderer-marked: Markdown renderer for Hexo (github.com)

cnpm install hexo-renderer-marked --save

2、配置hexo（_config.yml）

post_asset_folder: true  # 打开资源文件管理功能，每次创建文章时，会在文章同目录下创建一个同名资源文件夹
marked:  # 使用hexo-renderer-marked修正图片链接
  prependRoot: true
  postAsset: true

Once enabled, an asset image will be automatically resolved to its corresponding post’s path. For example, “image.jpg” is located at “/2020/01/02/foo/image.jpg”, meaning it is an asset image of “/2020/01/02/foo/“ post, will be rendered as .

至此，我们就可以把图片放置到资源文件夹里，给文章使用了：

clean && generate后，重新访问博客，可以看到图片被完美显示：

但是，这里还有一个问题：每次插入图片时过于繁琐，能不能直接像word那样复制粘贴，就完成图片的插入？

答案是可以的，这里我们使用vscode+Paste Image插件实现（Paste Image可以实现把图片放置到本地指定目录下，同时图片链接可以设置为指定格式，目前这是typora做不到的）。

1、在vscode下安装Paste Image插件：

2、在vscode配置文件中修改Paste Image配置参数：

这两个配置，一个表示将剪切板中的图片放到当前文件夹下的文件同名文件夹内，一个表示设置插入连接格式为图片名称。

保存配置后，用vscode打开我们的hexo博客文件夹，打开一个markdown文章，就可以使用Ctrl+Alt+V 或Cmd+Alt+V快捷键将图片自动插入文章资源文件夹并修改图片链接为图片名称了：

从此，妈妈再也不用担心我写博客插入图片了。

备注：我一般用typora记录本地笔记，用百度网盘或nas多设备同步；用vscode写hexo博客。

更多参考：资源文件夹 | Hexo

5.2 配置站点信息

修改_config.yml:

# Site
title: Jimmy嘚啵嘚
subtitle: 'JimmyWang的个人博客'
description: '主要涉猎内容为开发技术、架构设计、产品设计、商业分析等内容，不想当CEO的程序员不是好程序员'
keywords: 
author: 'Jimmy Wang'
language: zh-CN
timezone: ''

5.3 配置主题

hexo的默认主题一言难尽，不是那么好看。

这里我们选用张凯强大佬与人合作开发的主题： fluid-dev/hexo-theme-fluid: 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo (github.com)

无他，就是文档全中文，该有的全都有了，最重要的是整合了LaTeX和mermaid的支持，层次性也优于Next这种扁平化的设计，对于结构强迫症患者来说是福音。

这主题的逼格是不是一下就上去了。

安装上，我选择直接下载release源码，解压到hexo项目themes目录下，重命名为fluid，然后修改hexo配置文件_config.yml:

theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

具体安装可以参考：开始使用 | Hexo Fluid 用户手册 (fluid-dev.com)

配置可以参考配置指南 | Hexo Fluid 用户手册 (fluid-dev.com)，文档是中文的，很方便。

这里给出我在用的部分配置：

1、创建about页

fluid主题默认是没有设置about页面的，需要我们手动添加。

先在hexo项目中创建about页面：

hexo new page about

创建成功后修改 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

---
title: 标题
layout: about
---

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

2、用自定义配置覆盖主题默认配置

这里主要是避免更新主题造成原有主题目录内我们配置好的配置被覆盖。

我们只需要在hexo博客目录下创建_config.fluid.yml文件，把主题的_config.yml全部配置复制过去即可。只要hexo目录下有了_config.fluid.yml文件，主题目录下的_config.yml就会失效，这是覆盖式的。

关于主题的升级：

可以从主题github上下载最新的release源码，解压到博客themes目录下，替换原有主题目录。

建议升级前先备份原有主题，用于升级失败进行回退。

如果某些配置发生了变化（改名或弃用），release 的说明里会特别提示，同步修改原配置文件即可。

3、修改banner_img

默认每个页面头部是一张紫色的背景，这其实是在配置文件中的banner_img字段中配置，默认指向的是fluid主题目录下的source/img/default.png。因为每一个页面都要设置banner_img，我为了偷懒，直接找了一张我喜欢的图片，替换掉了default.png，注意要压缩下大小，别一个图片几MB，用户加载时就要骂娘了。

其次，这张banner_img显示的太大了，我把所有页面的banner_img_height都设置为了30，减小了图片高度。

4、修改页面标题和一些图标

进入到fluid配置页，可以看到各个页面的配置项，一目了然，一一修改对应的字段即可，因为涉及到的内容非常多，这里不再一一赘述，如果有不明白的地方去查询官方配置说明。

5、开启mermaid支持

我曾经在《使用typora画图》中介绍了mermaid库，可以让我们的markdown笔记方便实现各种图绘制。

fluid支持mermaid绘图，但是默认是关闭的，需要修改配置打开：

in _config.fluid.yaml

  # 流程图，基于 mermaid-js，具体请见：https://hexo.fluid-dev.com/docs/guide/#mermaid-流程图
  # Flow chart, based on mermaid-js, see: https://hexo.fluid-dev.com/docs/en/guide/#mermaid
  mermaid:
    # 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `mermaid: true`
    # If you want to use mermaid on the custom page, you need to set `mermaid: true` in Front-matter
    enable: true  # 这里修改为true

    # 开启后，只有在文章 Front-matter 里指定 `mermaid: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
    # If true, only set `mermaid: true` in Front-matter will enable mermaid, to load faster when the page does not contain mermaid
    specific: true  # 这里修改为true，目的是提高不包含公式的页面的加载速度

    # See: http://mermaid-js.github.io/mermaid/
    options: { theme: 'default' }

注意，如果设置了specific: true，则需要在文章 Front-matter里指定 mermaid: true 才会在文章页启动流程图渲染，以便在页面不包含流程图时提高加载速度。例如：

6、开启LaTeX数学公式

fluid默认支持LaTeX数学公式，但是需要配置才能开启：

# 数学公式，开启之前需要更换 Markdown 渲染器，否则复杂公式会有兼容问题，具体请见：https://hexo.fluid-dev.com/docs/guide/##latex-数学公式
# Mathematical formula. If enable, you need to change the Markdown renderer, see: https://hexo.fluid-dev.com/docs/en/guide/#math
math:
  # 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `math: true`
  # If you want to use math on the custom page, you need to set `math: true` in Front-matter
  enable: true

  # 开启后，只有在文章 Front-matter 里指定 `math: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
  # If true, only set `math: true` in Front-matter will enable math, to load faster when the page does not contain math
  specific: true

  # Options: mathjax | katex
  engine: mathjax

这里同mermaid，如果设置了specific: true，则需要在文章 Front-matter里指定 math: true 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度。

engine: 公式引擎，目前支持 MathJax | Beautiful math in all browsers. 或 KaTeX – The fastest math typesetting library for the web 。

7、开启评论

这里直接使用utterances插件（使用github的issues存储评论），fluid也帮我们内置好了，直接修改fluid配置文件即可：

# 评论插件
  # Comment plugin
  comments:
    enable: true
    # 指定的插件，需要同时设置对应插件的必要参数
    # The specified plugin needs to set the necessary parameters at the same time
    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis
    type: utterances

#---------------------------
# 评论插件
# Comment plugins
#
# 开启评论需要先设置上方 `post: comments: enable: true`，然后根据 `type` 设置下方对应的评论插件参数
# Enable comments need to be set `post: comments: enable: true`, then set the corresponding comment plugin parameters below according to `type`
#---------------------------

# Utterances
# 基于 GitHub Issues
# Based on GitHub Issues
# See: https://utteranc.es
utterances:
  repo: user-name/repo-name  # 按照这种格式设置repo
  issue_term: pathname
  label: utterances
  theme: github-light
  theme_dark: github-dark
  crossorigin: anonymous

注意，在让utterances生效之前，还需要在我们的github上安装utterances app：

打开utterances官网：utteranc.es/

小提示：如果设置后评论模块没有显示，说明配置没有完成，或者配置有误出现报错（请在浏览器控制台查看具体报错）

6 如何删除一篇文章？

我们可以直接在source/_posts目录下删除一篇文章（包括它的同名asset文件架），然后先执行hexo clean清除编译结果，然后重新使用hexo generate命令编译静态页面。

如果我们不使用clean命令直接generate，会发现我们删除的文章还在静态页面里。因为这个generate是一个增量编译，仅新增或更新，不会全部替换。

7 增加域名解析

github提供的域名一般是repo-name.github.io的形式。也可以绑定自己购买的域名，具体操作如下：

1、在博客项目的source目录下创建CNAME文件：

www.jimmy-wang.com

这样每次hexo generate时，hexo都会把CNAME文件重新放置到public目录下，这样就可以随着其他站点文件一起上传github。

小提示：直接在github项目的settings->options->github pages的custom domain中设置域名，本质上是由github帮你在仓库根目录下创建一个CNAME文件，但是每次重新hexo delpoy后会把由github创建的CNAME文件删除。

2、进入我们的域名服务商控制台，配置域名解析：

等几分钟域名解析生效后，就可以使用我们购买的域名访问博客了。

提示：如果无法访问，一方面要检查你的解析项配置，另一方面要检查你的域名有无实名认证。实在不行，就给你的域名服务商提技术支持工单吧，让他们给你看看解析问题。

8 最后的提示：备份hexo项目

至此为止，我们已经得到了一个看起来还不错的、写起来也很方便的博客。

虽然我们已经把博客发布到了github，但是我们的博客项目本身还没有备份。

项目文件备份有2个比较方便的办法：

一个是使用百度网盘同步空间或NAS同步，直接把我们的项目同步到网盘上去。

另一个是使用github，我们可以把项目源码上传到我们的主页仓库的source分支上去。

具体用哪个，就是仁者见仁、智者见智的事情了。

这里提示一点，如果选择了使用github同步，一定要在你的.gitignore文件里把node_modules和public文件夹添加进去，因为这俩货上传了也没啥用。