Hexo配置博客实战教程

发表于 2024-11-30

本博客已经持续写了三四年了，最初根据网上的教程安装好后就把各种配置写到了自动化脚本 diary.sh 中，然而最近发现升级脚本后会有一串由node.js发出的错误。为了解决这个错误，不断的排除各种小问题，最终决定重新写一下配置博客的基本教程。

Node.js 和 Hexo 简介

Node.js是作为 Hexo程序的依赖而安装的，但是它报错了，经过网络搜索后发现，这是由于我的电脑中安装了最新的Node.js导致的。官网介绍：Node.js® 是一个免费、开源、跨平台的 JavaScript 运行时环境, 它让开发人员能够创建服务器 Web 应用、命令行工具和脚本。而 Hexo 是一个部署博客的工具，而博客也是发布于网络上的一个 Web 页，所认这个依赖关系就清楚了。

Hexo 的作用是: 把作者写好的 Markdown 文件，使用Node.js渲染成 Web 页，进而可以在网站服务器上部署，实现网络访问的目标。

安装依赖软件

使用 pacman 安装的软件

1	sudo pacman -S nodejs-lts-iron npm git pandoc

git 是一个在github上管理源码的必备工具，详细使用请稳步： Git 教程
nodejs共有三个版本，分别是nodejs 23.1.0-1(最新版)、nodejs-lts-iron（最新长期支持版）、nodejs-lts-hydrogen(旧的长期支持版). 由于最新版不断有功能添加，其相当不稳定，今天的错误就是由它造成的。旧的长期支持版，又可能不兼容最新的软件，所以安装最新长期支持版就是一个最佳选择。
npm 是一个nodejs包管理器，使用它可以安装各种模块，这就很容易为博客添加新的功能。
pandoc If you need to convert files from one markup format into another, pandoc is your swiss-army knife.

使用 nodejs 包管理器安装的软件

npm 切换国内源

# 国内 淘宝 镜像源
npm config set registry https://registry.npmmirror.com/
# 官方镜像源
npm config set registry https://registry.npmjs.org/

阿里更换了淘宝镜像的域名，原域名https://registry.npm.taobao.org的 SSL 证书已经过期了（2024/01/22），所以我们需要更换最新的源.

安装更好用的包管理器 yarn

# 通过 pacman 安装
sudo pacman -S yarn
# 通过 npm 安装
sudo npm install yarn -g

注意：npm是JavaScript自带的包管理器，拥有庞大的包注册表，但在性能和安全性方面相对较弱, 特别是下载安装模块的速度相当感人。Yarn 是由 Facebook、Google 等公司共同创建的，旨在解决 npm 的一些痛点，提供更快、更安全、更可靠的包管理体验, 其下载模块非常迅速，所以值得推荐。此外还有pnpm包管理器，但是由于它为了节省硬盘空间而做出了相当大的改变，这导致一些依赖问题不是很好解决，因此不推荐。这三个的区别和优缺点细节，请大家参考本文末的参考文章。

配置 hexo

设置 yarn 的国内源

# 国内 淘宝 镜像源
yarn config set registry https://registry.npmmirror.com/
# 官方镜像源
yarn config set registry https://registry.yarnpkg.com/

安装 nrm 镜像源工具

1	sudo yarn global add nrm

nrm使用方法，请参考本文末参考文章。使用nrm test列出各源，并给出源的网速，使用nrm use huawei切换到速度最快的华为源。

安装 hexo 命令

推荐使用速度更快的 yarn

# 使用yarn 安装
sudo yarn global add hexo-cli
# 使用 npm 安装
sudo npm install hexo-cli -g

设置本地博客站点

配置 hexo 默认站点

mkdir hexo-source
cd ./hexo-source
hexo init
hexo s

完成上面的操作后，在浏览器地址栏输入上述命令生成的本地地址 localhost:4000 就可以看到默认的博客了。

安装 Next 主题

cd hexo-source
git clone https://github.com/next-theme/hexo-theme-next themes/next
cd themes/next
git checkout $(git describe --tags $(git rev-list --tags --max-count=1))

切换为 Next 主题

Like all Hexo themes, after you download it, open Hexo config file, find theme option, and change its value to next (or another theme directory name).

hexo-source/_config.yml

1 2	cd hexo-source theme: next

2024年11月30日, 在测试上述步骤时，发现启动报错 Cannot find module 'css', 据github上的信息，解决方法是：css 应该被作为 stylus 的依赖包安装。你可以试试重新安装 hexo-renderer-stylus

cd hexo-source
yarn add hexo-renderer-stylus
# 也可以使用 npm
npm i hexo-renderer-stylus

本地启动检测

1
2
3

hexo clean 
hexo g
hexo s