使用Hexo搭建博客的完整教程

基础教程

0.前言

网上一堆这种教程，但我希望我根据我亲身经历的事情写一个教程，帮助更多的人搭建自己的博客。

1.搭建博客之前你应当知道

Hexo是一个基于Node,js的静态博客框架，因此，在建站之前，您应当了解一下：

JavaScript
HTML
CSS
此外，Hexo使用Markdown语法编写文章，因此，您应当了解Markdown语法。版本控制系统需要使用Git，因此您需要了解他。
对于以上技术，您有最基本的了解即可。

2.准备工作

安装Node.js

到 Node.js 官方下载页面下载并安装 Node.js。不过对于使用Ubuntu的用户，请不要从系统自带的应用商店里安装，否则版本太旧，无法正常使用。
安装完成后，运行一下命令：

node -v
npm -v

如果安装成功，则应当输出版本号。npm是Node.js的包管理器，后续步骤将用于安装Hexo。

安装Git

到 Git 官方下载页面（或使用包管理器）下载并安装 Git。
安装完成后，运行一下命令：

git --v

如果安装成功，则应当输出版本号。

安装Hexo

执行：

npm install hexo-cli -g

对于中国大陆网络环境：
由于Hexo的服务器在国外，因此，在中国大陆网络环境下，可能会出现网络问题。
您可以使用cnpm代替npm，cnpm是npm的中国镜像，速度更快。
执行：
npm install -g cnpm --registry=https://registry.npmmirror.com
安装完成后，接下来的步骤里您可以使用cnpm代替npm。

初始化博客

新建一个您用来存储博客的文件夹，在其中执行：

hexo init

注意：文件夹必须空白才能正常执行命令。此步骤需要连接到 Github ，因此请确保您的网络环境可以正常访问 Github，实在不行就用 FastGithub。

然后您得等一会…..
好，现在咱来看看文件夹里有什么结构：

├─node_modules// 博客依赖的模块
├─scaffolds // 文章模板
├─source // 博客源文件
├─_config.yml // 博客配置文件
└─themes // 博客主题
(仅展示部分主要文件)

3.配置博客

配置主题

下载主题文件到themes文件夹，（或者克隆仓库）对于 Ekinosoba 主题，执行：

git clone https://github.com/oldhelps/ekinosoba.git themes/ekinosoba

然后，更改配置文件。接下来说一个特别重要的点：

在下载了主题文件后，会用到两个配置文件：

_config.yml ：以下简称 站点配置文件

themes/your_theme_name/_config.yml ：以下简称 主题配置文件

在站点配置文件里，您可能要更改以下几个信息：


# Site
title: oldhelps blog # 博客标题
subtitle: '分享技术和OpenBVE游戏相关内容' # 博客副标题
description: '老帮帮博客，分享技术和OpenBVE游戏相关内容。' # 博客描述
keywords: oldhelps # 博客关键词 （字符串或者数组）
author: oldhelps # 博客作者
language: zh-CN # 博客语言(这将影响浏览器的翻译功能)
timezone: 'Asia/Shanghai' # 博客时区(这将影响时间显示)

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://oldhelps.eu.org # 博客地址
permalink: :year/:month/:day/:title/ # 文章链接格式
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

关于YAML语法的小知识点
# 开头的是单行注释
欲使用数组，请这样书写：
>key:
 - value1
 - value2
或者：
>key: [value1, value2]
我个人更倾向于写第二种，与JS语法相近。

注意请为搜索引擎优化（SEO）着想。SEO超出了本文的范畴，您可阅读《SEO实战密码》这本纸质书籍。

然后修改站点配置文件里的theme为您下载的主题名称：

theme: ekinosoba

关于主题配置文件
主题配置文件的位置在 themes/your_theme_name/_config.yml ，各个主题的配置文件不尽相同，敬请参考您使用的主题文档。

4.写文章与本地预览

写文章

hexo使用Markdown语法写文章。
Markdown语法很简单，您可以参考Markdown语法参考。
使用以下命令新建文章：

hexo new post_name

关于Front-Matter
Front-Matter是Markdown文件的开头部分，用于定义文章的元数据。
Front-Matter的格式为：
>---
>title: 文章标题
>date: 文章发布时间
>---
Front-Matter的内容会被hexo解析，您可以在主题配置文件里定义哪些元数据会被解析。不同主题可能会定义不同的Front-Matter，参见 Hexo 官方文档 - Front-Matter。

本地预览：

首先生成静态文件：

hexo generate

然后启动本地服务器：

hexo server

简写

>hexo g #enerate

>hexo s #erver

现在本地服务器应该已经在运行了，您可以在浏览器里访问 http://localhost:4000 来预览您的博客。

提示

确保同时只有一个预览服务在进行，否则可能面临如下错误：

FATAL Port 4000 has been used. Try other port instead.
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Error: listen EADDRINUSE: address already in use :::4000
    at Server.setupListenHandle [as _listen2] (node:net:1940:16)
    at listenInCluster (node:net:1997:12)
    at Server.listen (node:net:2102:7)
    at E:\oblog\node_modules\hexo-server\lib\server.js:68:12
    at Promise._execute (E:\oblog\node_modules\bluebird\js\release\debuggability.js:384:9)
    at Promise._resolveFromExecutor (E:\oblog\node_modules\bluebird\js\release\promise.js:518:18)
    at new Promise (E:\oblog\node_modules\bluebird\js\release\promise.js:103:10)
    at checkPort (E:\oblog\node_modules\hexo-server\lib\server.js:65:10)
    at module.exports (E:\oblog\node_modules\hexo-server\lib\server.js:17:10)
    at Hexo.tryCatcher (E:\oblog\node_modules\bluebird\js\release\util.js:16:23)
    at Hexo.<anonymous> (E:\oblog\node_modules\bluebird\js\release\method.js:15:34)
    at Hexo.call (E:\oblog\node_modules\hexo\dist\hexo\index.js:215:28)
    at C:\Users\oldhelps\AppData\Roaming\npm\node_modules\hexo-cli\dist\hexo.js:56:21)
    at tryCatcher (C:\Users\oldhelps\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\.store\bluebird@3.7.2\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (C:\Users\oldhelps\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\.store\bluebird@3.7.2\node_modules\bluebird\js\release\promise.js:547:31)
    at Promise._settlePromise (C:\Users\oldhelps\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\.store\bluebird@3.7.2\node_modules\bluebird\js\release\promise.js:604:18)
    at Promise._settlePromise0 (C:\Users\oldhelps\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\.store\bluebird@3.7.2\node_modules\bluebird\js\release\promise.js:649:10)
    at Promise._settlePromises (C:\Users\oldhelps\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\.store\bluebird@3.7.2\node_modules\bluebird\js\release\promise.js:729:18)
    at _drainQueueStep (C:\Users\oldhelps\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\.store\bluebird@3.7.2\node_modules\bluebird\js\release\async.js:93:12)
    at _drainQueue (C:\Users\oldhelps\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\.store\bluebird@3.7.2\node_modules\bluebird\js\release\async.js:86:9)
    at Async._drainQueues (C:\Users\oldhelps\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\.store\bluebird@3.7.2\node_modules\bluebird\js\release\async.js:102:5)
    at Async.drainQueues (C:\Users\oldhelps\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\.store\bluebird@3.7.2\node_modules\bluebird\js\release\async.js:15:14)
    at process.processImmediate (node:internal/timers:485:21)

若要停止本地服务器，您可以按下 Ctrl + C 。

5.插件&脚本

请注意，一些功能（如加密文章、RSS 订阅和网站地图）需要使用插件才能完成。Hexo 有许多插件，可以实现许多强大的功能。前往 Hexo 插件列表。
其安装过程大致就是安装NPM包然后对应的修改配置文件即可。
如果只是一点想要实现的功能的话，就写脚本。脚本用Node.js写，放在博客根目录的scripts目录下。您要是会Javascript，是时候大显身手了。

6.部署

Hexo生成的是静态网页，放在public目录里头。想办法把他部署到服务器上，供大家访问。目前主流的方法有：

部署到 GitHub

使用此方法需要拥有 GitHub 账户，并在本地完成验证，参见相关教程。

配置GitHub仓库

创建仓库

在GitHub上新建一个名为 用户名.github.io 的仓库（例如：test.github.io）。

配置Hexo部署

打开 /_config.yml 站点配置文件，找到 deploy 部分，添加以下内容：

deploy:
type: git
repo: git@github.com:用户名/用户名.github.io.git
branch: main

安装部署插件：

npm install hexo-deployer-git --save

部署

hexo d #eploy

部署到Vercel

注意：
实测此方法对大陆网络环境不是很友好，此处不详细介绍，参照相关教程。

部署到Netlify(推荐)

此方法是本网站目前使用的方法。
安装官方CLI（命令行工具）：

npm install netlify-cli -g

注意
请全局安装，并且不要使用cnpm或者镜像源。更新时使用同样的命令。

然后执行：

netlify login

在浏览器里登录账户，无需手机验证码。
然后博客根目录执行：

netlify init --manual

注意
这一步输入的项目名称会成为Netlify分配的免费域名的一部分。部署目录（deploy directory）默认是public，如果您的博客放在其他目录下，需要修改。

然后发布时，执行：

netlify deploy --prod --dir=public

终端会输出部署到的域名，如果想要使用自定义域名，您可以在Cloudflare之类的DNS解析服务中添加以下DNS记录：

假设
我们假设：

您使用的根域名（您注册的域名）为example.blog

您想要把博客部署到a.example.blog
在网页控制台->在 Netlify 控制台 → Domain management → Add custom domain里，输入您的域名；
在DNS解析服务中添加以下DNS记录：

记录类型记录名记录值

CNAME a （若要部署到根域名，请填入@）部署到的域名

记录类型	记录名	记录值
CNAME	a （若要部署到根域名，请填入`@`）	部署到的域名

然后等几分钟，就可以在a.example.blog访问到您的博客了。Netlify将会为您分配免费的HTTPS证书。恭喜，现在网站可以访问了。

7.流量监测

网站可以访问后，您应当对数据进行监测。以下是几种解决方案：

不蒜子
这种监测服务部署在别人的服务器上，会向您提供一串代码，您将它放到网站中即可。
Microsoft Clarity
可以为您提供热区地图和流量录制，具体方法：
到Microsoft Clarity注册登录（使用微软账户）；
创建一个项目，Microsoft将会为您提供一串代码，把他放到主题目录下layout目录里的layout.ejs（或者对应的layout.pug）文件里的<head>部分（对于ejs文件来说，就是<head>和</head>之间的部分）。48小时后，即可查看数据。