六虎

如何使用hexo搭建我们自己的博客系统

作者：

努力奋起的女码农

在

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

我的大众号：Jimmy嘚啵嘚

image.png

欢迎关注，点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仅仅一个符号：

image.png

一篇文章只能包括一个分类，可是能够包括多个标签。

在我的博客中，我会依据文章类型不同，设置“漫笔”、“读书”、“课程”、“技能教程”、“产品分析”五个分类；再依据文章内容添加一些标签，例如“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指令编译时，不会被编译成静态页面。

image.png

假如咱们想预览草稿，能够在编译时添加–draft参数：hexo generate –draft。假如咱们想把草稿发布，能够运用hexo publish 指令。

写完文章后，咱们先运用hexo clean指令铲除之前编译的站点页面。

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

最终运用hexo server指令就能够在本地预览：

image.png

拜访http://localhost:4000：

image.png

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

cnpm install hexo-server --save
hexo server

4 布置到Github

hexo最牛逼的当地在于，能够把博客布置到github、gitlab、gitee、gitcode等git代码网站上，运用它们供给的pages服务供给博客服务。

这是由于hexo编译生成的是一个静态网站，而pages服务便是供给静态网站拜访服务的。

image.png

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 .

至此，咱们就能够把图片放置到资源文件夹里，给文章运用了：

image.png

clean && generate后，从头拜访博客，能够看到图片被完美显现：

image.png

可是，这儿还有一个问题：每次刺进图片时过于繁琐，能不能直接像word那样仿制粘贴，就完结图片的刺进？

答案是能够的，这儿咱们运用vscode+Paste Image插件完结（Paste Image能够完结把图片放置到本地指定目录下，一同图片链接能够设置为指定格局，现在这是typora做不到的）。

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

image.png

2、在vscode装备文件中修正Paste Image装备参数：

image.png

image.png

image.png

这两个装备，一个表明将剪切板中的图片放到当时文件夹下的文件同名文件夹内，一个表明设置刺进衔接格局为图片称号。

保存装备后，用vscode翻开咱们的hexo博客文件夹，翻开一个markdown文章，就能够运用Ctrl+Alt+V 或Cmd+Alt+V快捷键将图片自动刺进文章资源文件夹并修正图片链接为图片称号了：

image.png

从此，妈妈再也不必忧虑我写博客刺进图片了。

备注：我一般用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这种扁平化的规划，对于结构强迫症患者来说是福音。

image.png

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

装置上，我挑选直接下载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 才会在文章页发动流程图烘托，以便在页面不包括流程图时进步加载速度。例如：

image.png

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/

image.png

image.png

image.png

image.png

小提示：假如设置后谈论模块没有显现，阐明装备没有完结，或者装备有误呈现报错（请在浏览器控制台查看详细报错）

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、进入咱们的域名服务商控制台，装备域名解析：

image.png

等几分钟域名解析收效后，就能够运用咱们购买的域名拜访博客了。

提示：假如无法拜访，一方面要查看你的解析项装备，另一方面要查看你的域名有无实名认证。实在不行，就给你的域名服务商提技能支撑工单吧，让他们给你看看解析问题。

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

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

虽然咱们现已把博客发布到了github，可是咱们的博客项目自身还没有备份。

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

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

另一个是运用github，咱们能够把项目源码上传到咱们的主页库房的source分支上去。

详细用哪个，便是仁者见仁、智者见智的工作了。

这儿提示一点，假如挑选了运用github同步，一定要在你的.gitignore文件里把node_modules和public文件夹添加进去，由于这俩货上传了也没啥用。

更多文章