使用 Hexo + Fluid 搭建个人博客

搭建篇

瞎白话

每个程序员都应该有一个属于自己的博客，一方面可以提升自己的知名度，另一方面可以锻炼自己的写作能力。对于程序员来说，能做、能写、能讲是非常重要的。我在搭建自己的个人博客时，遇到了很多的坑，写这篇文章是为了记录下我搭建博客的过程。一方面是记录一下防止以后遗忘，另一方面也希望通过这篇文章帮助更多想要搭建博客的同学少走弯路。

废话不多说，下面开始上才艺。

Hexo

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

这里需要说明 Hexo 的几点好处：

1. 搭建简单而且免费。
2. Hexo 可以将 Markdown 生成纯静态网页，我们只需要按照规则写 Markdown 文档，它能帮助我们生成网站的页面。纯静态网站的好处是可以零成本（付费方面）部署。
3. 配置简单且配置文件有中文注释，官方还提供中文文档。有些复杂的配置是因为要对 Hexo 二次开发或使用某些主题比较复杂，如果没有这些诉求，整个搭建过程是非常简单的。

最后提供一个官方文档的地址

官方中文文档：https://hexo.io/zh-cn/docs/index.html

前提条件

Hexo 安装之前需要一些环境的支持。下面我用列表给大家整理出来了。

软件名	用途
Node.js	Hexo 是基于 Node.js 开发的，因此需要安装 Node.js 环境。官方说 Node.js 版本需不低于 10.13，我建议使用 Node.js 12.0 及以上版本或安装最新的。
Git	Git 是一个分布式的版本控制软件，Hexo 会使用 Git 从 GitHub 上下载一些资源。
Yarn	（可选）Yarn 是一个 Node.js 的包管理器，我本人比较习惯使用 Yarn。

这里就不介绍 Node.js 和 Git 的安装了，如果这两个都不会使用，建议还是先学习一下再来阅读本文。另外，后面的安装过程我会提供 npm 和 yarn 两种命令的安装方式，自己按需选择就好。

安装 Hexo 客户端

基本环境安装完成后，就可以使用 npm 安装 Hexo 了。

NPM 安装命令

npm install -g hexo-cli

Yarn 安装命令

yarn install -g hexo-cli

注意：由于网络环境的问题，中国大陆访问官方仓库比较慢，想要提速就需要科学上网。因此，我们需要将 npm 或 yarn 的镜像源改成国内镜像源。修改方法可以自己去查询相关资料。

Hexo 客户端的安装非常简单，一行命令就搞定了。

初始化项目

注意：如果你给全局的node_modules目录设置过环境变量，那么可以直接使用hexo命令，否则可以在命令前面加上npx。最好的办法就是在命令终端输入hexo，看看能不能找到命令，如果不行就使用npx hexo。

1. 新建博客项目的目录

   mkdir -p <目录名>

   -p 的作用是如果没有则新建一个目录，比如我们创建目录的命令是mkdir -p ~/blog/github，如果blog目录不存在，则会新建。

   如果你使用的是 Windows 系统，可以手动创建目录，也可以使用 Git Bash 命令窗口。Git Bash命令窗口中可以使用 Linux 命令。

2. 使用 hexo 初始化项目

   我这里创建了一个hexo-demo作为项目目录。

   # 进入目录
   cd hexo-demo
   
   # 初始化项目
   hexo init

   初始化时会提示以下信息

   -- console log --
   INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
   INFO  Install dependencies
   warning hexo > warehouse > cuid@2.1.8: Cuid and other k-sortable and non-cryptographic ids (Ulid, ObjectId, KSUID, all UUIDs) are all insecure. Use @paralleldrive/cuid2 instead.
   warning hexo-renderer-stylus > stylus > css > source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
   INFO  Start blogging with Hexo!

   信息中出现了两个警告，可以不用管他，不影响使用。

   初始化完成后，我们使用 ls 命令或打开目录查看，会看到下面这些文件：

   文件名	说明
   _config.landscape.yml	Hexo 主题配置文件，landscape 是 Hexo 默认主题。
   _config.yml	Hexo 的主配置文件。
   node_modules	Hexo 项目的包。
   package.json	包配置，所有基于 Node.js 的项目都会有这个文件。
   scaffolds	Hexo 的模版目录，它用于定义创建文件时的模版。
   source	Hexo 资源目录，资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
   themes	Hexo 主题目录，我们使用到的一些第三方主题会放到这里。Hexo 会根据主题配置来生成静态页面。

3. 启动项目

   hexo server --debug

   启动成功后，会在下方看到这样一条日志

   03:43:26.937 INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

   我们可以使用浏览器访问http://localhost:4000/来查看我们的博客。如图：

   

至此，我们的博客就搭建成功了。

Hexo 个性化定制

前面我们成功搭建了一个博客，但这个博客是官方默认的例子。我们想要打造自己的博客，还需要进行一些定制。

基本定制

我们需要修改博客目录下的_config.yml文件，如下：

# 网站标题
title: 技术社区
# 副标题
subtitle: 好记性不如烂键盘
# 网站简介
description: 随便写写
# SEO 关键词（可选）
keywords:
    - 技术
    - Java
    - Spring
# 网站作者
author: Hello Kiti
# 网站语言，zh-CN: 简体中文
language: zh-CN
# 时区（可选）
timezone: ""

以上是部分需要修改的配置。

配置修改完成后，重启项目刷新页面会看到如下界面：

这个界面中我们可以看到我们刚才修改的配置生效了。这里需要说明，官方默认模版的导航没有被国际化。其实也无所谓，因为官方主题是在太难看了，我们后面会使用一个第三方的主题。

使用主题

本次我使用的主题是 Fluid。这纯属我的个人喜好，如果想要使用其他主题，可以去官方文档找。

官方主题地址：https://hexo.io/themes/

Fluid 官方文档地址：https://hexo.fluid-dev.com/docs/

安装主题

Fluid 安装有两种方式：

方式一：使用包管理器

# npm
npm install --save hexo-theme-fluid

# yarn
yarn add hexo-theme-fluid

方式二：下载最新 release

下载地址：https://github.com/fluid-dev/hexo-theme-fluid/releases

下载完资源文件后，将资源文件解压到博客目录下的themes目录中，并将解压出的目录重命名为fluid。

这两种方式更推荐使用方式一，但如果想要对模版进行二次修改和定制，就最好选择方式二。否则将来重新迁出项目代码时，之前的修改就不存在了。如果没有定制化需求，就无所谓了。

配置主题

主题安装完成后，开始进行配置。

1. 复制主题目录下的_config.yml到博客根目录并命令为_config.fluid.yml，注意不要将默认配置覆盖了。如果不放心可以先创建好文件，然后将主题的配置内容复制到新文件中。

2. 修改_config.yml主配置文件，以下是要修改的内容：

   # 修改模版为 fluid
   theme: fluid

3. 创建关于页面

   Fluid 需要一个关于页面，这个页面在 Hexo 初始化的时候是没有的，需要手动创建。

   # 使用创建命令
   hexo new page about

   此时，Hexo 会在 source 目录下创建一个 about 目录，其中包含一个 index.md 的 Markdown 文件，这个文件就是我们的关于页面。

   创建后，修改内容如下：

   ---
   title: 标题
   layout: about
   ---
   
   这里写关于页的正文，支持 Markdown, HTML

4. 修改主题配置文件_config.fluid.yml，如下：

   ---
   #---------------------------
   # 页头
   # Header
   #---------------------------
   
   # 导航栏的相关配置
   # Navigation bar
   navbar:
       # 导航栏左侧的标题，为空则按 hexo config 中 `title` 显示
       # The title on the left side of the navigation bar. If empty, it is based on `title` in hexo config
       blog_title: 技术社区
   
   #---------------------------
   # 首页
   # Home Page
   #---------------------------
   index:
       # 首页副标题的独立设置
       # Independent config of home page subtitle
       slogan:
           enable: true
   
           # 网站副标题
           text: 好记性不如烂键盘

配置完成后重启服务，此时的界面如下：

这样，我们就更换好了主题，是不是漂亮多了。

开始你的创作

搭建好博客之后，我们就可以愉快的写文章了。

特别说明

_Markdown 无需插入图片的请跳过_。

使用 Markdown 编写文档时，难免会用到一些图片。这些图片本地查看倒是没什么问题，如果放到公网环境就访问不到了。因此最好是将图片上传到某个地方，然后再链接进来。也可以直接使用图床。

我平时使用的是 Typora 写文档，图床我用的是 PicGo + Git（Gitee 或 GitHub）。这里提一句，Gitee 有防盗链，本地文件可以显示，但博客中无法显示。

新建文章

hexo new 这是我的第一篇文章

此时会在source/_posts目录下自动创建一个这是我的第一篇文章.md的文档。

编写内容

你可以选择任意一款自己喜欢 Markdown 编辑器，编写的内容如下：

---
title: 这是我的第一篇文章 哈哈哈哈
date: 2023-04-20 12:46:25
tags: 番外篇
categories: 番外篇
index_img: https://d33wubrfki0l68.cloudfront.net/5997a40576f3beca7bbbd86fe79a795e9d520d8e/87f88/themes/screenshots/landscape.png
---

这里是正文，请开始你的表演。

文档头部参数说明：

• title：文档标题，会显示在列表中和文档详情页中。
• date：文档创建日期，页面会根据时间降序。
• tags：文档标签，访客可以通过标签来查找同标签文档。
• categories：文档分类，访客可以通过分类来查找同类型文档。
• index_img：首页图片，也就是封面图，它会显示在首页的文档列表中。图片最好是远程图片，否则可能无法加载。

修改文档是不需要重启服务的，此时我们刷新一下页面就可以看到新内容了。如图：

部署篇

发布到 GitHub

我们将使用 GitHub Pages 来部署我们的个人博客。至于为什么是 GitHub，我的回答是：“不知道”。如果你非要问，我只能说：“因为大家都这样干”。你品，你细品！

说明

如果你无法使用 GitHub，请自行查阅其他部署方法。比如 Gitee。Gitee 的部署方法与此类似。另外，推送站点到 GitHub 需要科学上网。如果没有可以找一找其他的梯子，国内有人专门提供了上传 GitHub 的镜像网站。

创建仓库

没有账户的自己去注册一个，其他就不多说了。登录到 GitHub 找到头像左边的加号图标，点击会弹出一个下拉菜单，选择New repository新建一个仓库。仓库名格式为：<GitHub用户名>.github.io，必须是这个名字，否则无法访问。仓库的访问策略设置成Public。

创建 SSH 密钥

ssh-keygen -t rsa -C "<GitHub注册时的邮箱>"

Windows 可以使用Git Bash工具。生成密钥时会有一些要填写的信息，一路回车就可以了。

生成好之后，可以使用cat ~/.ssh/id_rsa.pub查看并复制公钥。

配置密钥到 GitHub

在 GitHub 页面点击头像，在下拉菜单中选择Settings。然后在左侧的列表中找到SSH and GPG keys，如果换名字了，可以找一下 SSH 相关的选项。进入页面后点击New SSH key按钮来新建一个密钥。如图：

• Title：这里填写的是密钥的标题，便于我们区分各种密钥。标题最好用英文。
• Key type：密钥类型，默认就好。
• Key：密钥，此处填写的就是我们在本地生成好的密钥内容（上一步复制的）。

点击Add SSH key按钮，保存新密钥。

Hexo 部署配置

安装插件

如果想要使用 Hexo + Git 自动部署，则需要安装hexo-deployer-git插件。

# NPM
npm install --save hexo-deployer-git

# yarn
yarn add hexo-deployer-git

修改部署配置

编辑_config.yml主配置文件，主要修改内容如下：

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
		# 修改为 Git
    type: git
    # 新增，配置内容为 GitHub 的仓库地址
    repo: git@github.com:<GitHub用户名>/<GitHub用户名>.github.io.git
    # 新增，配置内容为 main，就是 GitHub 的 master 分支
    branch: main

开始部署

# 清除旧的打包
hexo clean

# 生成新的包
hexo generate

# 发布到 GitHub
hexo deploy

也可以将命令简化写到一行来执行，比如：

hexo clean && hexo g && hexo d

这条命令会先清理，然后打包，最后推送到 GitHub。部署完成后，进入到 GitHub 仓库，会看到推送上去的站点文件。

测试访问

我们在浏览器输入：https://<GitHub用户名>.github.io.git，就会看到我们的博客了。如果访问出现 404，那可能是因为 GitHub 在进行认证和检查。等待一段时间刷新页面就可以了。如果长时间 404，那就需要检查一下，是不是哪里配置不对。或者去网上找一找有没有类似的解决办法。

总结

总体来说，搭建个人博客没有什么技术难度。无非是网络环境的各种不支持导致无法正确搭建。

本文主要是讲解了博客的搭建和部署过程，至于一些私人定制的东西还是尽可能的去参考官方文档或一些网络资料。根据自己的需求逐步去完善。