环境搭建

本机环境

Windows edition: Windows 11 Pro
Windows version: 10.0.22621.1
WSL version: 0.58.3.0
Kernel version: 5.10.102.1
WSLg version: 1.0.33
MSRDC version: 1.2.2924
Direct3D version: 1.601.0

所有环境都在 Windows 子系统（debian）中搭建。

安装 node.js

首先更新系统

1	sudo apt update && sudo apt upgrade

安装 nodejs 与 npm

1 2	sudo apt install nodejs sudo apt install npm

但是这样安装后发现使用 hexo 时会出现错误

1	TypeError: Object.fromEntries is not a function

将 nodejs 和 npm 升级即可

升级node.js和npm

npm 中有一个模块叫做 “n” ，专门用来管理node.js版本

更新到最新的稳定版可在命令行中打下如下代码：

1 2	npm install -g n n stable

npm升级只需要在终端中输入：

1	npm -g install npm@next

升级后检查其版本

1	node -v && npm -v

1
2
3

output
v16.15.1
8.12.1

安装 git

使用 debian 默认的包管理器安装 git

1	sudo apt install git

确认 git 是否被正确安装

1	git --version

1 2	Output git version 2.20.1

安装 Hexo

在合适的地方新建目录

1	mkdir Blog

进入新建目录并安装 Hexo

1 2	cd Blog sudo npm i hexo-cli -g #这里要加 sudo 否则会报错

验证 Hexo 是否安装成功

hexo -v

output
INFO  Validating config
hexo: 6.2.0
hexo-cli: 4.3.0
os: linux 5.10.102.1-microsoft-standard-WSL2 Debian GNU/Linux 10 (buster) 10 (buster)
node: 16.15.1
v8: 9.4.146.24-node.21
uv: 1.43.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 93
nghttp2: 1.47.0
napi: 8
llhttp: 6.0.4
openssl: 1.1.1o+quic
cldr: 40.0
icu: 70.1
tz: 2021a3
unicode: 14.0
ngtcp2: 0.1.0-DEV
nghttp3: 0.1.0-DEV

Hexo 初始化

1 2	hexo init #初始化当前目录 sudo npm install #安装必备组件

Hexo 常用命令

1
2
3

hexo g # 生成静态网页
hexo s # 打开本地服务器预览，http://localhost:4000/
hexo d # 部署网页到远端服务器

配置 github 与本地连接

在 Blog 目录下添加 github 信息

1 2	git config --global user.name "your name" git config --global user.email "your email address"

生成 SSH 密钥

1	ssh-keygen -t rsa -C "youre email address" # 一路回车即可

打开 github ，在头像下面点击 settings，再点击 SSH and GPG keys，新建一个SSH，名字随意，再填入刚刚生成的公钥即可。

使用如下命令查看公钥

1	cat ~/.ssh/id_rsa.pub

确认是否连接成功

1	ssh -T git@github.com

可以看到你的用户名即可

最后需要打开博客根目录下的 _config.yml 文件，配置部署信息，修改如下：

# vim _config.yml

deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io
  #repo: git@github.com:yourname/yourname.github.io.git #若部署时出现 Spawn failed 错误，可用这种方式解决
  branch: main

发布第一篇博客

在 Blog 根目录安装 heox-deployer-git 扩展用于将文章发布至 github

1	sudo npm i hexo-deployer-git

使用 hexo new 新建一篇文章

1	hexo new post "your article title"

命令执行后，/your/blog/path/Blog/source/_posts 目录下会生成这篇文章的 markdown 文件，可以使用 markdown 编辑器来编辑文章内容。

编写完成后，通过 hexo g && hexo s 生成静态网页文件并在本地预览，最后通过 hexo d 上传至 github，此时打开 yourname.github.io 就可以看到你发布的文章啦。

个性化配置

修改主题为 next 主题

next 主题是 Hexo 框架下最流行的主题，同时该主题也比较符合我的审美，因此将默认主题修改为 next 主题。

在 Blog 根目录下执行如下命令

1	git clone https://github.com/next-theme/hexo-theme-next themes/next

修改根目录下 _config.yml ，将默认主题改为 next 即可

1 2	## Themes: https://hexo.io/themes/ theme: next #landscape

Note: 如果没有特殊说明，以下个性化配置项目都是基于 next 主题的。

设置主页显示文章摘要

通过设置 `description` 显示部分摘要

在文章的 front-matter 中添加 description ，其中 description 中的内容就会被显示在首页上，其余一律不显示。

---
title: 让首页显示部分内容
date: 2022-06-05 22:55:10
description: 这是显示在首页的概述，正文内容均会被隐藏。
---

文章截断

在需要截断的地方加入如下代码

1	<!--more-->

首页就会显示这条以上的所有内容，隐藏接下来的所有内容。

自动生成摘要

需要在主题配置中添加如下代码

1
2
3

auto_excerpt:
  enable: true
  length: 150 # 摘要所截取的字符长度

代码高亮

修改站点配置文件 _config.yml

highlight:
  enable: true
  line_number: true
  auto_detect: true #false

主题配置文件 your/blog/path/themes/next/_config.yml 中，修改 highliht_theme 后面的值。可选值有

normal
night
night eighties
night blue
night bright

添加 busuanzi 统计功能

修改主题配置文件

# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true #false
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye