Use Hexo to Build a Personal Blog Website

一、安装 Hexo 并初始化博客

找到博客文件夹，在根目录输入以下命令安装 Hexo 库依赖：

1

npm install -g hexo-cli

安装完成后，输入以下命令初始化博客：

1

npx hexo init

如果将 hexo 添加到环境变量，则无需输入 npx 指令，只需要 hexo init 即可，下同。

初始化成功后，输入以下命令进行静态部署：

1

npx hexo generate # 可简写为 npx hexo g

如果想要查看部署好的博客，可以通过以下命令打开本地服务器：

1

npx hexo server # 可简写为 npx hexo s

然后打开 http://localhost:4000 即可查看部署好的博客效果。

二、将博客文件夹连接到 GitHub 仓库

在博客文件夹根目录输入以下命令安装 Git 部署插件：

1

npm install hexo-deployer-git --save

找到 _config.yml 文件（这是 Hexo 的项目配置文件），找到 deploy 部分，添加如下内容：

1
2
3
4

deploy:
  type: git
  repo: https://github.com/AstridStark25963/AstridStark25963.github.io.git # 填入自己的仓库地址
  branch: main

分别输入以下命令以将本地更改的内容提交到 GitHub 远程仓库：

1
2
3

npx hexo clean # 清除缓存文件 db.json 和已经生成的静态文件 public 文件夹
npx hexo generate # 生成网站静态文件到默认设置的 public 文件夹
npx hexo deploy # 自动生成网站静态文件，并部署到设定的仓库（可简写为 npx hexo d）

过一段时间，就能在 GitHub 仓库中看到提交的网页内容，也能在相应的网址访问网站的更新内容。

不需要每次修改网站时都执行 clean 操作。clean 命令主要用于清理生成的文件，通常在需要完全重建站点时使用，比如当你遇到一些构建问题，或者想清理临时文件、缓存等情况时才需要执行。如果只是对内容或配置进行小的更新，一般不需要执行 clean，只需要执行 generate 或 server 命令即可。

如果遇到网络问题，deploy 操作无法完成，则需要修改 Git 的代理配置并使用代理来提交修改。

输入以下命令为 Git 设置全局代理：

1
2

git config --global http.proxy http://127.0.0.1:10809
git config --global https.proxy http://127.0.0.1:10809

端口设置根据本机代理进行设置，常用的如 v2ray 使用 10809 端口，Clash 使用 7890 端口

输入以下命令查看设置是否成功：

1

git config --list

如果需要取消全局代理设置，则输入以下指令进行取消：

1
2

git config --global --unset http.proxy
git config --global --unset https.proxy

三、Hexo 文件夹结构介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

C:\Users\lenovo\AstridStark25963.github.io
├── .deploy_git          # Git 相关的部署文件夹，可能包含部署信息
├── .github              # GitHub 相关的配置文件夹，通常包含GitHub Actions等配置
├── db.json              # 存储数据的 JSON 文件，可能包含站点的配置或数据
├── node_modules         # Node.js 项目依赖库文件夹，存储了所有的依赖包
├── package-lock.json    # 确保每次安装依赖时都使用相同版本的依赖，锁定依赖版本
├── package.json         # Node.js 项目的配置文件，包含项目名称、版本、依赖等信息
├── public               # 存放公共资源的文件夹，通常是网站的静态文件
├── scaffolds            # 用于存放模板或框架的文件夹，通常存放默认的页面或文章模板
├── source               # 存放网站源代码的文件夹
│   ├── images           # 存放图片资源的文件夹
│   ├── _data            # 存放数据文件的文件夹，通常包含配置信息或内容数据
│   └── _posts           # 存放博客文章或页面的文件夹
├── themes               # 存放主题相关文件的文件夹
│   └── redefine         # 主题文件夹，包含自定义的主题设置
├── yarn.lock            # Yarn 的依赖锁定文件，确保依赖的版本一致
├── _config.redefine.yml # 自定义主题的配置文件，通常包含主题的设置和参数
└── _config.yml          # 网站的全局配置文件，包含站点标题、作者、主题等基本信息

由于本网站使用 Redefine 主题，故以此主题示例，下同。

在平时的使用中，重点关注 source 文件夹以及根目录下的 _config.yml、_config.redefine.yml 两个配置文件即可。

在新建页面时，输入以下命令：

1

npx hexo new page test # test 替换为实际页面名称

即可在 source 文件夹下新建同名页面，默认路由设置为 /test。

source 文件夹下符合模板的所有文件都会被复制到 public 文件夹下的相应位置，包括 .md 等格式的文件将被渲染为 .html 文件后复制到 public 文件夹下。如果想要复制模板以外的文件，或者不想渲染/复制某些文件，只需要在根目录的 _config.yml 文件中的 include 和 exclude 部分输入文件夹/文件名称即可。

_config.yml 为 Hexo 项目的默认配置文件，可以在这个文件中对网站进行个性化设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 网站设置
title: Astrid's Fantasy World # 网站标题
subtitle: '' # 网站副标题
description: '' # 网站描述
keywords: # 网站关键词（可选）
author: Astrid Stark # 网站作者
language: en # 网站语言
timezone: 'Asia/Shanghai' # 时区设置

# URL 配置
url: https://1lya.com
permalink: /archives/:name/ # 文章的 URL 格式
permalink_defaults:
pretty_urls:
  trailing_index: false # 设置为 false 来移除 URL 末尾的 'index.html'
  trailing_html: false # 设置为 false 来移除 URL 末尾的 '.html'

_config.redefine.yml 为 Redefine 主题的默认配置文件，可以在这个文件中对主题外观进行个性化设置。

四、使用个性化 Hexo 主题

Hexo 的个性化主题可以在 Themes | Hexo 找到，而主题的安装和使用方式一般可以在其 GitHub 仓库的 README 文件中找到。

例如，Redefine 主题的安装方式如下：

Redefine 主题的使用教程可以在 Redefine Docs 中找到。

五、文章配置项

在 Hexo 中，front-matter 是一块位于每篇文章或页面顶部的元数据区域，通常用于配置该篇文章的标题、分类、标签、日期、摘要等信息。它是一个 YAML 格式的区域，在文章的开头，通常由三个 --- 符号包围。Hexo 使用这个信息来生成文章的 URL、封面、分类、标签等。

常见 front-matter 配置项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---
title: # 文章标题
subtitle: # 文章副标题
date: # 创建时间
updated: # 更新时间
author: # 作者名
keywords: [] # 关键词
description: # 文章描述
cover: # 文章封面
excerpt: # 文章摘要
tags: [] # 文章标签
categories: # 文章分类
comments: true  # 是否开启评论功能
sticky: true  # 是否让文章置顶，值越大置顶权重越高
draft: false  # 是否为草稿（true 或 false）
---

在部分由主题提供的布局模板页面中可以使用 layout 配置项， 默认为 post，可以指定为其他布局来使用布局模板。