Hexo + Obsidian + Git 搭建个人博客及编辑方案

- 一、安装Hexo
- - 1、Hexo介绍
  - 2、安装Hexo
  - - 2.1、安装要求
    - 2.2、安装Node.js
    - [2.3、注册 GitHub](#2.3、注册 GitHub)
    - 2.4、安装Git
    - [2.5、配置 GitHub SSH](#2.5、配置 GitHub SSH)
    - 2.6、安装Hexo
  - 3、Hexo命令
- 二、主题配置
- - 1、安装并指定主题
  - 2、主题配置
  - - 2.1、代码高亮
    - 2.2、行内代码颜色
    - [2.3、LaTeX 数学公式](#2.3、LaTeX 数学公式)
    - 2.4、访问人数统计
    - 2.5、评论功能
- 三、更好的文章管理方案
- - 1、文章以目录分类
  - [2、自动生成 categories 信息](#2、自动生成 categories 信息)
- [四、使用 Obsidian 来编写和管理文章](#四、使用 Obsidian 来编写和管理文章)

一、安装Hexo

1、Hexo介绍

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

2、安装Hexo

参考：Hexo 中文官方文档

2.1、安装要求

安装 Hexo 相当简单，只需要先安装下列应用程序即可：

Node.js (版本需不低于 10.13，本文使用 22.12.0 版本)
Git

2.2、安装Node.js

Node.js 为大多数平台提供了官方的安装程序

其它的安装方法：

Windows 通过 nvs（推荐）或者 nvm 安装：

建议使用 nvs 或者 nvm，以避免可能会出现的权限和多版本的问题，nvm命令nvm install 22.12.0。

安装后在 cmd 命令行输入 node -v 即可查看版本。

2.3、注册 GitHub

注册后，创建仓库：https://github.com/用户名/用户名.github.io

此时在浏览器中已经可以访问域名：https://用户名.github.io

注意，仓库名必须取 .github.io，如果仓库取了其他名字，最后访问的域名会是：https://用户名.github.io/仓库名/

2.4、安装Git

Windows下载并安装：Git 官网

安装时按照默认配置即可，其中有个 MinTTY 终端模拟器的选项会默认选上，如果不选则会使用 Windows 自带的终端 cmd 显示 Git Bash。

安装后在 cmd 命令行输入 git 即可调出功能目录。

此后就在 cmd 中配置 Git 个人基本信息（绑定 GitHub）：

bash 复制代码

$ git config --global user.name "admin"
$ git config --global user.email "123456789@qq.com"

配置完才后续才可以正常提交远程仓库（详见博客 Git 分类下其他文章）。

2.5、配置 GitHub SSH

该步骤旨在建立当前主机与 GitHub 的安全连接，以后提交/拉取仓库才不需要重复输入密码。如果你这台主机已经建立过 SSH 连接，那么可以跳过这一步。

打开 Git Bash 输入命令：

bash 复制代码

$ ssh-keygen -t rsa -C "123456789@qq.com" # 获取 SSH Key

完成后，在提示路径下找到 .ssh 文件夹中的 id_rsa.pub 公钥文件，用记事本打开拷贝。

在 GitHub 个人设置中找到 SSH，新建，输入 Key。

配置后可以用如下命令测试是否成功：

bash 复制代码

$ ssh -T git@github.com
# 运行结果出现类似如下即表示成功
# Hi hewei2001! You've successfully authenticated, but GitHub does not provide shell access.

2.6、安装Hexo

在电脑中新建 Blog 文件夹，如 D:\hexo。

在 cmd 命令行打开 D 盘，用 cd hexo 命令进入 hexo 子目录。按以下命令顺序执行。查阅 GitHub 的 Issue 发现，由于hexo最新的 8.0.0 版本存在分类和标签页面没有内容的问题，因此将hexo降为 7.3.0 版本。

bash 复制代码

#1.全局安装命令
npm install hexo-cli -g
#2.初始化部署命令
hexo init blog
#3.进入新建的博客文件夹
cd blog
#4.安装依赖，hexo降为7.3.0版本
npm install hexo@7.3.0 --save
#5.启动服务命令
hexo s

默认会生成 localhost:4000 的网址，在浏览器中可以访问

3、Hexo命令

bash 复制代码

# 启动服务器
hexo s
# 生成静态文件(public)
hexo g
# 清除静态文件(public)
hexo clean
# 本地调试，先清除静态文件，然后重新生成静态文件，最后启动服务
hexo clean & hexo g & hexo s

二、主题配置

本文采用的是 Fluid 主题

1、安装并指定主题

推荐通过 npm 直接安装，进入博客目录执行命令：

bash 复制代码

npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml，将主题的 _config.yml 内容复制过去。通过修改 Hexo 博客目录中的 _config.yml 指定主题：

bash 复制代码

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

theme: fluid  # 指定主题

2、主题配置

以下的配置在路径 blog/_config.fluid.yml 中可以实现。该文件的介绍参见 Fluid主题配置指南。以下仅介绍部分较为特殊的配置，其他内容可在指南中找到。

2.1、代码高亮

yaml 复制代码

# 代码块的增强配置
code:
  # 代码高亮
  highlight:
    enable: true

    # 代码块是否显示行号
    line_number: true

    # 实现高亮的库，对应下面的设置
    # 可选项: highlightjs | prismjs
    lib: "highlightjs"

    highlightjs:
      # 在链接中挑选 style 填入
      # 查看链接: https://highlightjs.org/demo/
      style: "Night Owl"
      style_dark: "dark"
      bg_color: true

lib: 选择生成高亮的库，可选项有 highlightjs 和 prismjs，这里选择 highlightjs，将 style 修改为 Night Owl 风格，将 bg_color 修改为 true 以适配暗色代码框。

2.2、行内代码颜色

默认的行内代码颜色和正文颜色是继承关系，且行内代码背景色也不明显，因此视觉上难以区分。但是配置文件中又没有对应选项可以修改，查阅 GitHub 的 Issue 发现，有人曾提供过一个解决方案。

打开路径 blog/node_modules/hexo-theme-fluid/source/css/_pages/_base 下的 base.styl 文件，找到 code 配置项，修改颜色为 #E05B35。

2.3、LaTeX 数学公式

1、设置主题配置

yaml 复制代码

# 文章页
post:
  # 数学公式
  math:
    # 开启后文章默认可用
    enable: true
    # 开启后，只有在文章 Front-matter 里指定 `math: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
    specific: true
    # 公式引擎选项: mathjax | katex
    engine: mathjax

specific: 建议开启。当为 true 时，只有在文章 front-matter 里指定 math: true 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度。

engine: 公式引擎，目前支持 mathjax 或 katex。

2、更换 Markdown 渲染器

由于 Hexo 默认的 Markdown 渲染器不支持复杂公式，所以需要更换渲染器。Hexo Fluid 主题官方更推荐使用 markdown-it-mathjax3 插件来处理公式渲染，搭配 hexo-renderer-markdown-it 渲染器，相比 hexo-renderer-kramed 更稳定，对 MathJax v3 的支持更友好，能有效避免公式不渲染、符号转义冲突等问题。以下是具体的配置步骤：

2.1、首先卸载可能冲突的旧渲染器，然后安装官方推荐的组合：

bash 复制代码

# 卸载旧渲染器（若有）
npm uninstall hexo-renderer-kramed --save
# 卸载原Hexo默认 Markdown 渲染器
npm uninstall hexo-renderer-marked --save
# 安装新渲染器和 MathJax 插件
npm install hexo-renderer-markdown-it markdown-it-mathjax3 --save

2.2、在 Hexo 根目录的 _config.yml 中，添加 markdown-it 及 mathjax3 的配置：

yaml 复制代码

# Hexo 根目录 _config.yml
markdown:
  render:
    html: true
    breaks: true
    linkify: true
  plugins:
    - markdown-it-mathjax3

2.3、编辑 Fluid 主题配置文件 _config.fluid.yml，确保公式渲染引擎正确启用：

yaml 复制代码

# 文章页
post:
  math:
    enable: true                # 全局启用公式渲染
    per_page: false             # 若设为 true，需在文章 front-matter 中加 math: true
    engine: mathjax             # 指定引擎为 mathjax（与插件匹配）
    mathjax:
      cdn: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js  # MathJax v3 CDN

2.4、访问人数统计

Fluid 主题提供两种网站的 PV、UV 统计数来源：LeanCloud 与不蒜子。不蒜子不需要申请账号，直接开启即可，但有时候会响应缓慢拖慢整个页面加载。LeanCloud 使用前需要申请账号，进入官网 LeanCloud 完成注册，然后在控制台创建一个项目 个人博客应用 后，在 应用凭证 中获取AppID、AppKey、服务器地址等配置信息，填入 blog/_config.fluid.yml 对应位置。

bash 复制代码

# 网页访问统计
web_analytics:
  enable: true

  # LeanCloud 计数统计，可用于 PV UV 展示，如果 `web_analytics: enable` 没有开启，PV UV 展示只会查询不会增加
  leancloud:
    app_id: 填入获取的AppID
    app_key: 填入获取的AppKey
    # REST API 服务器地址，国际版不填
    server_url: 填入获取的服务器地址
    # 统计页面时获取路径的属性
    path: window.location.pathname
    # 开启后不统计本地路径( localhost 与 127.0.0.1 )
    ignore_local: false

#---------------------------
# 页脚
#---------------------------
footer:
  # 展示网站的 PV、UV 统计数
  statistics:
    enable: true

    # 统计数据来源，使用 leancloud, umami 需要设置 `web_analytics` 中对应的参数；使用 busuanzi 不需要额外设置，但是有时不稳定，另外本地运行时 busuanzi 显示统计数据很大属于正常现象，部署后会正常
    source: "leancloud"

2.5、评论功能

Valine 是国内的一款极简风格的评论软件，也是 Fluid 支持的评论软件之一，是基于 LeanCloud 的。由于前面使用访问人数统计功能时已经注册，我们这边直接使用就行。修改 blog/_config.fluid.yml 相应的配置信息。

yaml 复制代码

#---------------------------
# 文章页
#---------------------------
post:
  # 评论插件
  comments:
    enable: true
    # 指定的插件，需要同时设置对应插件的必要参数
    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus | discuss
    type: valine

# Valine
# 基于 LeanCloud
valine:
  appId: 填入获取的AppID
  appKey: 填入获取的AppKey
  path: window.location.pathname
  placeholder: "欢迎留下你的评论 ✨"
  avatar: 'retro'
  meta: ['nick', 'mail', 'link']
  requiredFields: []
  pageSize: 10
  lang: 'zh-CN'
  highlight: false
  recordIP: false
  serverURLs: 填入获取的服务器地址
  emojiCDN:
  emojiMaps:
  enableQQ: false

三、更好的文章管理方案

1、文章以目录分类

当我们写好一篇文章后，按照 hexo 的默认配置，我们需要将其放在 source/_post 目录下，等时间长了之后，_post 目录下的文章就会变得杂乱无章，无法让我们快速的 review 到一篇文章。

那么最好的解决方案就是我们在创建文章的时候以 文章分类 作为文件夹创建我们的文章，比如：

xml 复制代码

.
└── source
    └── _post
        ├── 前端
        │   ├── Javascript
        │   │   └── Javascript原型链机制.md
        │   └── 浏览器
        │       └── 浏览器性能优化.md
        └── 后台
            ├── GoLang
            │   └── go语言简介.md
            └── Java
                └── Spring MVC 快速入门.md

2、自动生成 categories 信息

虽然我们把文章放的井井有条了，但是每个文章里的 categorys 字段还是要我们手动自己维护的，比如在 source/_post/前端/Javascript/Javascript原型链机制.md 文件中，我们要通过手写 categories 来让 hexo 知道这篇文章被放在 前端-Javascript 分类下：

html 复制代码

---
title: Javascript原型链机制
categories:
  - 前端
  - Javascript
date: 2022-06-05 12:06:47
---

这里是正文

为了省去手动维护 categorys 字段的这个问题，我们可以使用 hexo-auto-category 这个插件。这个插件在 Hexo 进行 build 的时候会去自动根据文章目录情况来自动修改文章的 categories 信息。

2.1、安装插件

bash 复制代码

npm install hexo-auto-category

2.2、修改 _config.yml 中的两处默认配置，以及添加 auto_category 配置：

yaml 复制代码

# 修改 permalink 让你的文章链接更加友好，并且有益于 SEO
permalink: :year/:month/:hash.html

# 规定你的新文章在 _post 目录下是以 cateory 
new_post_name: :category/:title

auto_category:
  enable: true               # 启用插件
  depth: 5                   # 分类层级深度（默认 3，最多显示 3 级分类）
  order_by: -date            # 文章排序方式（-date 按日期倒序，date 按日期正序，title 按标题）
  show_count: true           # 是否显示分类下的文章数量

四、使用 Obsidian 来编写和管理文章

Obsidian 是目前个人感觉使用起来最舒服的基于 Markdown 的笔记管理工具，好处不多言，用了就知道。

1、将 Hexo 项目导入 Obsidian

在欢迎面板打开你的 Hexo 项目即可：

2、使用 Obsidian 模板快速创建文章

Obsidian 是支持创建新文件时插入模板的，这就意味着我们可以不用重复写 Hexo 博客文的 Front-matter 部分。首先我们要创建模板，我们可以在 source 目录下创建 _obsidian 文件夹，并创建一篇 PostTemplate 的文章（md文件），内容为：

html 复制代码

---
title: {{title}}
date: {{date}}
math: false
categories:
category_bar: ["分类"]
tags: []
sticky: 
---

然后进入到 Obsidian 的设置面板，选择『核心插件』，并启用『模板』功能。同时点击旁边的配置按钮，进入到模板配置的设置中，将配置信息设置为：

之后，我们再创建新文章的时候，只需要点击侧边栏的『插入模板』按钮就可以快速生成 Front-matter 信息：