Hexo本地搭建

现在开始，我们可以开始搭建博客了，当然这里仅介绍本人使用的Hexo，使用其他博客框架的读者可以自行在互联网上寻找教程。第一步，我们先以在本地搭建第一个页面为目标，再考虑后续的部署，服务器配置等问题。

参考文档：

文档 | Hexo

Hexo教程，看这一篇就够了- How to系列-CSDN博客

¶环境准备

Hexo是基于Node.js搭建的博客框架，首先我们需要将对应的环境都安装好。

¶Node.js

官网：Node.js — 在任何地方运行 JavaScript

安装过程不必多说，疯狂下一步即可。

安装完成后可以用命令行来验证：

在任意文件夹目录打开Powershell或者cmd，不会的同学可以按Win+R，输入powershell或者cmd再回车即可。输入如下指令，出现了版本号就说明已经安装成功。

PS C:\Users\username> node -v
v22.14.0
PS C:\Users\username> npm -v
11.1.0

PS：如果安装完毕但是命令行仍显示无法识别，可能是环境变量还没有载入，可以重启电脑试试，还不行的话请检查系统-高级系统设置-环境变量-系统变量-path的路径中有没有nodejs目录，如果没有请上网搜索“如何配置nodejs环境变量”。

¶Git

Git是一个开源的版本控制工具，如果要将你的本地项目远程推送至服务器或者github，git是必备的。

Hexo本身支持一键部署功能，可以自动调用git来部署至远程服务器，仅从这看的话你可能用不到太多git本身的命令，但是本人强烈建议花费一点时间，主动学习一下git的基本工作原理和常用指令，了解它是如何对我们的日常开发和团队协作起到巨大帮助作用的。

话不多说，接下来继续安装Git

Git官网：Git

安装过程中有很多选项，一般不懂的话过就可以，如果安装过程出现问题，还是那句话，善用搜索引擎！

安装完成后，还是照例查看一下版本号，确认安装成功后可以先配置一下账号和密码，也可以不设置，等需要的时候再设。

git -v
git config --global user.name "你的git用户名"
git config --global user.email "你的git登录邮箱"
git config --global user.password "你的git密码"

¶安装Hexo

Hexo是基于nodejs开发的，因此使用自带的npm安装起来十分方便快捷。

还是那个Powershell(amd)，输入:

npm install -g hexo-cli

还是那个验证安装：

hexo -v

¶项目初始化

¶新建项目

进入你想要创建项目的目录，powershell中可以使用cd指令来跳转，创建完成后使用npm install命令来构建项目。

hexo init <folder>
cd <folder>
npm install

也可以手动新建文件夹后，进入目录直接创建：

hexo init
npm install

PS D:\Java_project\blog_test> hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
fatal: unable to access 'https://github.com/hexojs/hexo-starter.git/': Failed to connect to github.com port 443 after 21087 ms: Couldn't connect to server
WARN  git clone failed. Copying data instead
INFO  Install dependencies
INFO  Start blogging with Hexo!
PS D:\Java_project\blog_test> npm install

added 2 packages, and audited 241 packages in 2s

28 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS D:\Java_project\blog_test>

初始化后，项目文件夹目录应如下所示：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

¶打开第一个页面!

使用你自己的coding软件打开项目目录，博主使用的是VScode，后续也是按照VScode来说明~

首先我们来更改根目录的_config.yml文件，Hexo的大部分配置都在这里修改，如果应用了主题则主题目录的配置文件优先级更高，当然我们现在还没有。

我们先来看前面两段，更改一些基本信息

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com
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

我们现在只需要修改第一部分的基本信息就可以了，其他的配置具体怎么设，可以参考官方的配置文档：配置 | Hexo。目前URL及以下部分暂时还可以不改，我们先本地跑起来再说！

Site部分的字段描述如下：

设置	描述
`title`	网站标题
`subtitle`	网站副标题
`description`	网站描述
`keywords`	网站的关键词。支持多个关键词。
`author`	您的名字
`language`	网站使用的语言。大陆用户为zh-CN，香港zh-HK，澳门zh-MO，台湾zh-TW
`timezone`	网站时区。 Hexo 默认使用您电脑的时区。一般可以不填，或者填国内一般填“Asia/Shanghai”即可。请参考时区列表进行设置

下面是博主自己填的：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: KIASite
subtitle: '天天开心！'
description: '相信的心就是你的魔法'
keywords:
author: 'KIASAMA'
language: zh-CN
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com
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

PS：亲身踩坑经历，有空格的字符串请用引号包起来，否则可能会有各种各样的问题……

然后执行如下命令（已经启动过了记得关闭服务器）

清理静态文件：

hexo clean
#或者 hexo cl

重新生成静态文件：

hexo g

启动服务器

hexo s

注：建议每次重启服务器都执行一遍上述流程，避免出现未知错误

博主在VScode终端中的执行过程如下：

PS D:\Java_project\blog_test> hexo cl
INFO  Validating config
PS D:\Java_project\blog_test> hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 496 ms
INFO  Generated: archives/index.html
INFO  Generated: archives/2025/03/index.html
INFO  Generated: fancybox/jquery.fancybox.min.css
INFO  Generated: css/style.css
INFO  Generated: index.html
INFO  Generated: js/script.js
INFO  Generated: archives/2025/index.html
INFO  Generated: fancybox/jquery.fancybox.min.js
INFO  Generated: css/images/banner.jpg
INFO  Generated: js/jquery-3.6.4.min.js
INFO  Generated: 2025/03/04/hello-world/index.html
INFO  11 files generated in 321 ms
PS D:\Java_project\blog_test> hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

最后的 localhost:4000 即为Hexo在我们本地端口上开启的服务器地址了，直接打开看看

image-hexo-initial

恭喜，到此总算是走出了勇敢的第一步，接下来我们将逐步丰富我们的网站内容，并将其部署到服务器上。万事开头难，让我们收拾收拾再出发。

¶主题配置

一般来说，我们要为网站挑选一款主题，如果你是前端大佬，可以自行设计一个主题，我们这边当然还是选择站在巨人的肩膀上，选择别人已经构建好的主题。

在官网上有很多主题，Themes | Hexo，官网的主题一般都很简单，你也可以选择其他民间大佬制作的主题。

当找好主题后，一般你可以在其文档中找到安装方法，绝大部分是使用git安装。

这里以本站使用的主题butterfly为例。

官网：Butterfly - A Simple and Card UI Design theme for Hexo

在你的项目根目录运行以下命令：

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

安装完毕后，请一定要设置应用主题，打开 Hexo 根目录下的 config.yml, 找到以下配置项，把主题改为anzhiyu

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

部分主题安装应用后还需要安装渲染器，比如anzhiyu主题就需要。

安装 pug 和stylus渲染插件

npm install hexo-renderer-pug hexo-renderer-stylus --save

无法安装可以使用cnpm进行安装

npm install hexo-renderer-pug hexo-renderer-stylus --save --registry=http://registry.npmm

再次申明，主题安装请以该主题的官方文档为准，博主这里的介绍只是以本站使用的主题为例子，仅提供参考。

另外，主题的配置文件（如/thems/butterfly/_config.yml）的优先级大于Hexo根目录的配置文件，大部分配置你应该可以在主题的文档中进行，关于主题的配置博主仅抛砖引玉，后续的配置和DIY请大家尽情自行尝试吧！

¶新增内容

到此为止，网站的基本框架已经搭建好了，当然，个人博客最重要的东西应该是你的文章和内容，这里介绍一下Hexo是如何新建文章和页面的。

（注：以下及后续命令都是在项目根目录运行）

hexo new [layout] <title>

title是你想创建内容的标题

layout是布局，Hexo 有三种默认布局：post、page 和 draft。每个布局创建的文件会被保存到不同的路径。

布局	解释	路径
`post`	文章	`source/_posts`
`page`	页面	`source`
`draft`	草稿	`source/_drafts`

（注：如果没有设置 layout 的话，默认使用 config.yml 中的 default_layout 参数代替，如果标题包含空格的话，请使用引号括起来）

¶Post

使用布局post来创建一个文章，也就是一篇博客，可以直接像这样：

hexo new post

post可以自由更改，新建后会在根目录/source/_post中创建一个“文章名.md”的文件，然后我们再在这个文件中任意编写我们的博客内容就可以啦。

¶Draft

使用布局 draft 来创建草稿，title为草稿的名字

hexo new draft title

draft也就是草稿，新建后会在根目录/source/_drafts中创建一个“title.md”的文件，hexo generate命令不会将这个目录下的文件编译到public 目录下，所以也不会部署发布到博客网站上。当然，这只是默认情况，我们可以在运行 Hexo 时添加 --draft 选项或在 _config.yml 启用 render_draft 设置来渲染草稿。

当我们写完整篇文章时，可以将草稿发布为正式文章，使用publish命令将草稿移动到 source/_posts 文件夹，这样就转成了正式文章。publish 工作方式类似于 new 命令。

hexo publish title
#或者 hexo p title

¶page

使用布局 page 来创建页面，title为页面的名字

hexo new page title

执行后，Hexo 会创建一个以title为名字的目录，并在目录中放置一个 index.md 文件。

也可以使用 --path 参数自行决定文件的目录：

hexo new page --path about/me "About me"

以上命令会创建一个 source/about/me.md 文件，同时 Front Matter 中的 title 为 "About me"

注意title是必须指定的，官方文档中给出了一个例子：
hexo new page --path about/me
此时 Hexo 会创建 source/_posts/about/me.md，同时 me.md 的 Front Matter 中的 title 为 "page"。这是因为在上述命令中，hexo-cli 将 page 视为指定文章的标题、并采用默认的 layout。