写在前面

关于我为什么使用 Hexo，其实还挺戏剧性的，一开始我使用的是 Halo 建站，相当傻瓜式，非常推荐大家使用，各种功能也非常全。但是最近服务器厂商应急把服务器关了，差点导致博客丢死，另一个租用的服务器也快到期了，于是我就产生了对文章存档的想法（虽然确实每几篇文章）, 因为其实当今市面上的开源博客系统其实也蛮多的，常见的有：Hexo，Hexo、Hugo、Typecho、Wordpress 等。其中最著名的就是 Hexo，而且他有个特点就是：可以直接搭建在 github 仓库中。等于不需要服务器就能直接访问，而且甚至非常稳定且终身不丢，于是就想着搭建一个 Hexo 博客作为副站使用。

本篇文章就谈一谈我建站的过程吧，把一些搭建细节给保留下来，如果有人想要搭建，希望能靠这篇帮到访问的你。更多还是方便日后自己解决问题，本人使用的是 Windows 10，Mac 与 Liunx 系统请另寻其他文章

关于搭建 Hexo 博客前需要知道的事：

  1. 你需要有一个 github 账号
  2. 你需要大致明白 Markdown 的写法（一些语法）
  3. Hexo 每个页面都是一个静态的网页
  4. Hexo 不支持在线编写，只能在本地编写文章后上传

Hexo 官网：https://hexo.io/zh-cn/index.html

安装前的准备

  1. 安装Node.js

Node.js: https://nodejs.org/en/

  1. 安装git

git download for windows: https://git-scm.com/download/win

默认下一步，安装后右键会出现:

  • Git GUI Here
  • Git Bash Here

初次使用需要设定用户名及绑定邮箱。

  • 设置用户名

    1
    git config --global user.name 用户名

  • 绑定邮箱

    1
    git config --global user.email 邮箱地址

    这两个设置对于轻度使用的用户来说按照喜好填写就行，不会有什么后续影响。

安装Hexo

Hexo 本身拥有的特点就是离线性，搭建的过程完全依赖于本地，后期就只是编写后上传仓库。所以我们需要先在本地搭建起 Hexo。

全局安装Hexo

  1. 打开cmd输入以下指令，全局安装Hexo

    1
    npm install hexo-cli -g

  2. 安装完全后，使用以下指令验证安装是否成功

    1
    hexo -v

创建本地Hexo项目

在本地新建一个文件夹作为 Hexo 项目的地址。在项目文件夹得目录下打开 cmd：

  1. 初始化Hexo项目（得到博客系统文件）

    1
    hexo init hexoblog

    初始化完成后会出现项目的基本结构，后续一些博客的基础设置修改根据根目录下的_config.yml 文件来实现。

  2. 安装npm（已安装可跳过）

    1
    npm install

  3. 启动Hexo

    1
    hexo server

    本地启动后的地址为： http://localhost:4000/

    正常来说会出现以下画面:

修改博客基础设置

  1. site基础设置

    进入Hexo项目文件夹（简称根目录），打开_config.yml（配置文件），找到如下内容

    1
    2
    3
    4
    5
    6
    7
    8
    # Site
    title: ''
    subtitle: ''
    description: ''
    keywords: ''
    author: ''
    language: ''
    timezone: ''

    这就是网站的基础设置项，这里只讲一些基础参数的修改：

    • title：网站标题
    • subtitle：网站副标题
    • description：网站摘要
    • author：博主昵称
    • language：默认语言，默认是en（default）
      • 中文简体：zh-CN
      • 中文繁体为：zh-TW
    • timezone：时区

  2. 主题修改

    这个在下面[安装博客主题](# 安装博客主题)时再讲。

安装博客主题

  1. 下载主题文件

    hexo 一开始是 default 主题。如果不满意的话，肯定需要自己更换主题，可以直接到Hexo官方的主题仓库选择。

    Hexo-theme：https://hexo.io/themes/

    下载后的主题放入博客根目录的 themes 文件夹中，或者直接在 themes 文件中使用 git 的命令进行下载。

  2. 修改博客设置

    修改博客根目录下_config.yml 配置文件中的 theme 参数，修改为主题的名字（一般来说，如果出错可以直接去看各主题博主写的设置文章）

    以下以butterfly主题为例：

    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: butterfly

  3. 启动博客

    1
    hexo serve

    可以缩写为：

    1
    hexo s

将博客上传到Github或者Gitee

将 hexo 博客上传到个人的 github 仓库后，可以直接通过仓库名来访问博客，这就等于白嫖了 github 仓库作为服务器，可以零成本搭建博客且文件不会丢失，小代价是有时可能无法正常访问，这时候可以考虑搭建全站 CDN（Content Delivery Network）提高访问的速度（网上都推荐 jsDelivr），当然也不能保证 CDN 不会崩（jsDelivr 貌似崩了半年），所以看个人的需求吧。

放到 gitee 上也是一个好选择，访问速度有了保障，但是代价是 gitee 可能哪天就不支持静态页面托管了（有先例），因此还是首先推荐搭建到 github 仓库。

上传到Github仓库

生成SSH密匙

目录打开命令行，输入以下代码生成密匙：

1
ssh-keygen -t rsa -C "xxxxx@xxxxx.com"

其中xxxxx@xxxxx.com输入你GitHub的邮箱，实际上这只是一个名称，不是最关键的。接下来的选项一路回车即可。

然后到C:\Users\用户名\.ssh，其中之后便会生成id_rsa和id_rsa.pub。其中 SSH 密匙在id_rsa.pub中。

登陆 github → 点击头像 → setting → SHH and GPG keys → New SSH key 把 id_rsa.pub 复制到其中即可。

输入一下代码进行确认绑定

1
ssh -T git@github.com

输入yes后就会收到绑定成功邮件。

创建博客仓库

登陆 github → ＋号（头像旁边） → New repository

仓库名字命名必须为：github用户名.github.io, 然后将仓库设为Public，例如本网站的仓库名为：ldm0715.github.io

修改博客配置文件

打开博客根目录下的_config.yml, 找到deploy, 格式为：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: github仓库地址  例如：https://github.com/OliverLoki/OliverLoki.github.io.git 
  branch: main

上传文件到github仓库

输入上传代码（需要安装插件，详见：[生成和上传页面指令](# 生成与上传页面指令)）

1
hexo d

刷新即可看到仓库中出现了博客文件（因为网络问题可能会失败，失败就多试几次）

上传到Gitee仓库

上传Gitee与上传Github只有一些不一样，下面只说说不一样的地方，具体流程和上传Github一样。

生成SSH密匙

跟Github不同，我们需要输入以下指令：

1
ssh -T git@gitee.com

输入yes即可。

创建博客仓库

和github创建仓库的要点一样，要把仓库名设置为gitee用户名，然后初次创建的时候是不能直接设置为Public的，需要在创建了仓库之后去“管理”中更改为”开源“。

修改博客配置文件

在Gitee的仓库中，默认分支不再是main，而是master，因此修改如下：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: gitee仓库地址  例如：https://gitee.com/OliverLoki/OliverLoki.gitee.io.git 
  branch: master

上传文件到gitee仓库

1
hexo d

开启静态页面托管服务

跟Github不同，Gitee没有默认使用静态托管页面，因此我们需要手动开启静态托管页面的功能（此功能需要实名认证）

之后勾选强制https，然后点击更新。

（2023.4.23）家人们，谁懂啊，还是老老实实用Github吧。

Hexo系统基础命令

建立好博客之后，还需要学会一些 Hexo 的一些日常操作指令，这样才能方面后续使用。

新建文章

文章默认生成在.\source\_posts文件夹下，且默认格式为 Markdown

1
hexo new "文章名字"

按照路径打开文章后内容如下：

这种方法不常用，不如直接右键生成.md文件

生成和上传页面指令

因为 Hexo 是由一些静态的网页组成的，因此在编写完页面或者文章后，需要手动生成静态网页，也需要手动上传到指定的服务器。

生成静态页面和上传功能首先需要安装 hexo-deployer-git 插件。

1
npm install hexo-deployer-git --save

  1. 清除页面缓存（有些设置需要清除缓存之后才能显示）

    1
    hexo clean

    缩写为：

    1
    hexo cl

  2. 生成静态页面（上传页面时才需要这么做）

    1
    hexo g

  3. 上传页面

    1
    hexo d

  4. 一键部署

    1
    hexo cl && hexo g --d

创建新的页面

1
hexo new page “页面名”

需要注意的是，生成的页面默认在项目的 source 文件夹下 (例如：F:\Hexo\source)，默认生成的网页地址为 你的网址/页面名/，所以页面名要与_config.yml文件中设置的页面名保持一致。

稍微总结一下生成的相关操作：

操作 路径 需要知道的
hexo new “文章名” .\source\_posts 这种方法不常用
hexo new page “页面名” .\source\页面名 默认生成的网页地址为网址/页面名/，所以页面名要与_config.yml 文件中设置的页面名保持一致。

hexo三连

如果你觉得一条条写命令麻烦，你可以使用&&来连接这些命令，在更改了网页之后，我们一般要先清除缓存，生成界面，上传页面，一条一条敲的话很麻烦，这时候你就可以这样写：

1
hexo cl && hexo g && hexo d

文章属性快速设置

文章拥有很多属性，如：标题，摘要，tags，类别等。那么就需要学会如何在 md 文件中编写YAML格式（文章头）让系统识别到这是设置的属性。

文章基础属性设置

在 md 文件开头写入如下格式（YAML）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: 文章标题
date: 创建文章时间
tags:
- 标签1
- 标签2
categories: 
- 类别1
- 类别2
description: 摘要
cover: 文章封面（图片地址）
top-img: 文章顶部图（图片地址）
comments: 是否开启评论(true or false)
---

写入后在相应的主题中打开相应设置就能看见这些设置。

给文章加密

有些人可能会拿博客写日记、账号密码等私密内容，这些内容肯定不能直接公开，最直接的保密方法就是给文章加密（当然会不会给轻松破解就不清楚了）

  1. 安装插件

    1
    npm install --save hexo-blog-encrypt

  2. 加密YAML格式

    YAML写法为

    1
    2
    3
    4
    5
    6
    7
    ---
    title: password
    password: 自己设置的密码
    message: 密码文本框提示 例如：您好, 这里需要密码.
    wrong_pass_message: 错误信息提示 例如：抱歉, 这个密码看着不太对, 请再试试.
    wrong_hash_message: 校验失败提示 例如：抱歉, 这个文章不能被校验
    ---

  3. 加密成功提示

文章置顶（Butterfly主题）

hexo-generator-index 从 2.0.0 开始，已经支持文章置顶功能。你可以直接在文章的 front-matter 区域里添加 sticky: 1 属性来把这篇文章置顶。数值越大，置顶的优先级越大。

1
2
3
4
---
title: test
sticky: 1
---

添加版权提醒

自己写的文章有时候不太希望随便给人 copy，这时候就需要添加版权信息提示，一般来说主题都包含这项功能（去主题配置文件打开即可），但有时候我们不一定全局都开启版权声明（比如搬运文章），这时候就需要单独给一些文章添加版权信息。

可以在YAML中加入以下内容：

1
2
3
4
5
6
---
copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版权归xxxxx所有，如有转载，请注明来自原作者
---

另外，你可以在主题设置中打开复制附加版权信息，这样或许更有作用。

插件推荐

Hexo拥有许多插件，并且有着自己的插件仓库，安装一些实用的插件可以让我们的体验大大提升。

Hexo插件仓库：https://hexo.io/plugins/

本地搜索插件

这个插件可以提供站内文章搜索功能，非常推荐安装

  1. 安装指令

    1
    npm install hexo-generator-search --save

  2. 修改配置

    那么在博客配置文件_config.yml中新增以下配置项：

    1
    2
    search: path: search.xml;
    field: post;

文章字数统计

这个插件能在文章的标题下面显示文章字数

  1. 安装指令

    1
    npm i --save hexo-wordcount

  2. 修改配置

    在博客配置文件_config.yml中新增以下配置项：

    1
    2
    3
    4
    5
    6
    7
    post_wordcount:
      date: true # 发布日期
      update: true # 更新日期
      wordCount: true # 文章字数统计
      totalCount: true # 站点总文章字数
      min2read: true # 文章阅读时长
      readCount: true # 文章阅读次数

中文链接转拼音

对于中文使用者来说，文章标题都是中文的，因为 hexo 会默认将文章标题作为网页链接的一部分，这就可能会出现一些不便。例如：

修改前：http://localhost:4000/2022/11/19/python 编程中遇到的一些问题 /

你会发现链接无法正常被识别完整，这可能导致一些场合无法直接点击跳转，因此网页链接中最好不要出现中文，这时候就可以安装此插件。

这个插件安装配置好后会生成拼音和”-“来代替连接中的中文

修改后：http://localhost:4000/2022/11/19/python-bian-cheng-zhong-yu-dao-de-yi-xie-wen-ti/

  1. 安装指令

    1
    npm i hexo-permalink-pinyin --save

  2. 修改配置

    1
    2
    3
    permalink_pinyin:
      enable: true
      separator: '-' # default: '-'

文章加密插件

顾名思义，可以给文章加密。

  1. 安装指令

    1
    npm install --save hexo-blog-encrypt

  2. 用法

    具体可见上文内容[给文章加密](# 给文章加密)

文章隐藏插件

顾名思义，可以将文章隐藏。

  1. 安装指令

    1
    npm install hexo-hide-posts --save

  2. 用法

    在文章的YAML中加入

    1
    2
    3
    4
    ---
    title: hello world
    hidden: true
    ---

RSS插件

  1. 安装插件

    1
    npm install hexo-generator-feed --save

  2. 在博客根目录_config.yml中添加如下配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    feed:
      enable: true
      type: atom
      path: atom.xml
      limit: 20
      hub:
     content:
     content_limit: 140
     content_limit_delim: ' '
     order_by: -date
     icon: icon.png
     autodiscovery: true
     template:

    其实默认即可，但是如果想改的话建议查看官网：

    https://github.com/hexojs/hexo-generator-feed

  3. 在主题的_config.yml中添加如下配置

    1
    rss: /atom.xml

  4. 添加（或者修改）social处的配置

    1
    fas fa-rss: 你的博客地址/atom.xml

最终生成效果如下，地址为博客地址 + /atom.xml：

ssh连接错误

2024年1月29日，我使用hexo指令上传博客时，出现了如下报错：

1
2
3
4
5
6
7
8
Please make sure you have the correct access rights
and the repository exists.
FATAL Something’s wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Error: Spawn failed
at ChildProcess. (E:\Gzz\blog-github\node_modules\hexo-util\lib\spawn.js:51:21)
at ChildProcess.emit (node:events:520:28)
at ChildProcess.cp.emit (E:\Gzz\blog-github\node_modules\cross-spawn\lib\enoent.js:34:29)
at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)

不明白是什么原因的我于是尝试重新生成ssh密匙进行连接，但是当进行到ssh -T git@github.com时，出现如下问题：

1
ssh: connect to host github.com port 22: Connection timed out

我以为是网络问题，但是尝试了好几次都无法接上，搜索了相关问题后初步判断是端口22失效，于是找到了如下方法。

  1. 检查443端口是否可用

    1
    ssh -T -p 443 git@ssh.github.com

    如果出现Hi XXXX! You've successfully authenticated, but GitHub does not provide shell access.那就证明端口可以连接，可以进行下一步。

  2. 在c\用户\用户名\.ssh文件夹下创建一个config文件，在文件中写入如下配置：

    1
    2
    3
    Host github.com
      Hostname ssh.github.com
      Port 443

    让ssh默认走443端口。

  3. 重新运行ssh -T git@github.com指令，得到回复为Hi xxxxx! You've successfully authenticated, but GitHub does not provide shell access.

  4. 之后再运行hexo三连正常上传。

如果有其他问题参考:https://segmentfault.com/a/1190000041909858