如何使用 Hexo+Next 搭建一篇博客

发表于 2023-11-26 更新于 2024-10-15 分类于实用工具，博客阅读次数：本文字数： 4.8k 阅读时长 ≈ 9 分钟

前言

蒟蒻乱写的建立博客方式，针对新手。神犇勿喷。

前置配件

FastGitHub

由于本篇博客大部分使用 GitHub 下载资源，故建议搭一个好用的梯子。这里推荐使用 FastGitHub（这里使用我的 GitHub 仓库，发布者的原仓库不知为何用不了）。
解压后，Windows 直接点击 FastGithub.UI.exe 即可。

Git Bash

用于推送的工具。官网下载过慢，安装包可以在阿里镜像下载，也可以在 here。
下载时直接无脑点击 next 即可。（不过在 Custom Setup 这一步记得选 Add to PATH ,这样你就不用自己去配置电脑上环境变量了）。（若自己已了解过，也可使用其他方式。不再赘述）

Node.js

使用 Node.js 配置 Hexo。安装包在官网上，也可在 here。

使用 Hexo 创建博客

简单介绍下 Hexo。

快速、简洁且高效的博客框架

如其所言，我们可使用 Hexo 快速生成博客网站模板，并部署为我们自己的博客。
现在我们来看如何安装并使用 Hexo。

安装 Hexo

首先在任意盘里创建 Hexo 文件夹（特别说明，本篇博客中我的所有路径并不存在 Hexo 文件夹，即直接创建在 E:/ 盘中）。
然后我们对着空白地方点击鼠标右键，选择 Git Bash Here。我们将在 git 环境下安装并使用 Hexo。

关于 windows 系统上禁止运行脚本

在设置里查找 powershell，找到并打开“允许本地 powershell 脚本在未签名的情况下运行”。

打开后是一个黑窗口。

依次输入

Code

npm install hexo-cli -g
hexo init Blog
cd Blog
npm install
hexo s

依次是：安装 Hexo 插件，建立 Hexo 模板文件夹 Blog，进入 Blog 文件夹，加载 npm 信息，启动本地服务器。
这样就会生成 Blog 文件夹，且包含各种文件信息。
简单介绍一下

scaffolds：生成文章的一些框架
node_modules: 依赖包，模板
public：存放生成的页面，其中包含你的本地静态网站
themes：主题
source：用来存放你的文章，数据
然后再输入以下内容：
Code
1
hexo g && hexo s
Git Bash 窗口就会弹出以下信息：
Code
1
2
3
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000. Press Ctrl+C to stop.
这代表我们能在本地网站 localhost:4000 看见我们的初始默认博客。使用 Ctrl+C 强制终止 Git Bash 运行本地网站。
打开浏览器，网址输入 localhost:4000 就能看见美妙的一页。

当然，这只是一个 离线静态网站，即只有你自己能够看见。现在我们设法把它上传到 Github 上。

建立 GitHub 仓库

已经建立的同学可直接跳下一步。
首先得有一个 GitHub 账号（雾）。在主页选择创建 new 仓库。仓库名字采用 yourname.github.io 的形式。下面以我的作为例子。

记得勾选 Public 选项建立公共仓库。
然后我们回到 Git Bash 中，逐条输入以下命令（yourname 改为你的GitHub 的用户名， youremail 改为你注册 GitHub 时的邮箱）:

Code

1 2	git config --global user.name "yourname" git config --global user.email "youremail"

GitHub 就能检查到这个用户属于你了。

创建 ssh，输入命令，然后一直回车。

Code

1	ssh-keygen -t rsa -C "youremail"

接着我们在 C:/ 盘找到 ssh 的路径。参考我的：C:\Users\admin\.ssh
打开其中的 id_rsa.pub 文件（注意后缀，会有两个文件，一个 id_rsa，一个 id_rsa.pub），复制里面的内容。
然后我们在 GitHub 仓库的 Setting 里找到 Deploy keys（部署密钥，或是 SSH ans GPG keys），点击 Add Deploy key，Title 随便取一个，Key 里就直接粘贴之前复制的文件内容。最后勾选一下 Allow write access，点 Add key 就创建完了。

修改 Hexo 基本信息

在 Blog 文件夹里找到 _config.yml 文件，我们称它为 根目录下的配置文件。打开它（VSCode 或其他编辑器、记事本都可以）。
其中大部分都是不用改的，我们只需要改基本信息。

Code

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

title 是博客标题，subtitle 是副标题，description 选择你喜欢的一句话，keywords 是关键字，越多越好，关键词之间用逗号隔开，author 改为你自己的名字，language 改成 zh-CN（在你的文件夹里搜索一下，如果有 zh-CN 文件就用 zh-CN，如果只有 zh-Hans 就改成 zh-Hans），timezone 改为 Asia/Shanghai。url 则改为 http://yournames.github.io。

关于保存为 UTF-8

对于 markdown 文件（.md）保存时，找到保存键左边的编号，选项改为 UTF-8，方便使用中文。

Hexo 部署到 GitHub 仓库

现在博客的基本信息已经修改完了，我们来看部署。
在 根目录下 的配置文件最后加上这样一段话（如果已经有了就直接修改）：

Code

## Deployment
### Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io.git
  branch: master

其中类型是 git，远程 ssh连接是你的 repo 输入项，branch 输入gh-pages。然后保存文件。
打开 Git Bash，输入以下命令安装 git 部署工具：

Code

1	npm install hexo-deployer-git --save

然后你就可以通过命令 hexo g -d部署到 GitHub 了，这样大家都能在 yourname.github.io 上看见你的博客了。

Hexo 命令

基本类型

hexo clean
清除缓存文件（db.json）和已生成的静态文章（public 文件夹），适用于某些时候，你发现某些更改怎么都起不了作用，可能需要运行该命令。

hexo generate
生成静态文章（即根据源代码生成 public 文件夹，如果已经有了则会更新），缩写为 hexo g。

选项	描述
-d, –deploy	文件生成后立即部署网站
-w, –watch	监视文件变动
-b, –bail	生成过程中如果发生任何未处理的异常则抛出异常
-f, –force	强制重新生成文件 Hexo 引入了差分机制，如果 public 目录存在，那么 hexo g 只会重新生成改动的文件。使用该参数的效果接近 hexo clean && hexo generate
-c, –concurrency	最大同时生成文件的数量，默认无限制

hexo server
生成本地静态网站（这样你就可以在 localohost:4000 访问了，方便调试），缩写为 hexo s。

选项	描述
-p, –port	重设端口（后将一串数字表示网址变更为：localhost:xxxx）
-s, –static	只使用静态文件
-l, –log	启动日记记录，使用覆盖记录格式

hexo deploy
部署到 GitHub 网站上，能被大家看见，缩写为 hexo d。

参数描述

-g, –generate 部署之前预先生成静态文件
组合使用
重新构建网站
Code
1
hexo clean; hexo g -d
访问离线端口（debug):
Code
1
hexo g && hexo s

参数	描述
-g, –generate	部署之前预先生成静态文件

编写文章

在 Git Bash 中输入：

Code

1	hexo new "博客名称"

就会在 ~\Blog\source\_posts 文件夹里找到一篇新的 markdown 文件。然后我们就可以在里面愉快的编写了。
在博客开头两个分割线中间可以增加博客设置。如：

Code

---
title: 如何使用 Hexo+Next 搭建一篇博客  
date: 2023-11-26 10:03:00  
tags: 博客  
categories: 实用工具

---

添加 Next 插件

在网上可以搜寻到各式的主题插件。这里使用 Next 主题。
Next 是一款非常简洁舒服的主题，并且可支持的插件非常多，功能也很强大，可以直接搜索 next，然后点击 GitHub 的地址，进入下载。
根据它的下载提示，直接在 Git Bash 窗口中输入，即可下载 next 主题。
使用 git 下载 Next 到路径 E:\Blog\themes\next。（如果使用 npm 下载，则在 E:\Blog\node_modules\hexo-theme-next，本文中统一使用前者作为参考）

Code

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

下载完成后打开根目录下的配置文件，搜索 theme，把默认主题 landscape 改为 next 即可。保存后就可以查看新的主题了。

添加博客功能

创建新的菜单

打开 ~/themes/next 下的 _config.yml，我们称它为 主题下 的配置文件。
打开后搜索 menu，把下面想要的菜单栏前的 # 号去掉（建议开 home 主页、archives 归档、tags 标签、categories 分类、about 关于）。
在 Git Bash 中输入：

Code

1	hexo new page tags

打开 Blog 下的 source 文件夹，你就可以看见 tags 文件夹，里面有一个 markdown 文件。修改里面内容：

Code

---
title: 标签
date: 2023-11-20 20:55:05
type: "tags"
---

这样博客就能识别该文件为 tags 页面文件了。建立 categories 页面同理。

添加搜索功能

下载插件：

Code

1	npm install hexo-generator-searchdb

接着在 主题下 的配置配件中搜索 local_search，把 enable 改为 true 即可。
接着在 根目录下 的配置文件结尾加上这样一段话：

Code

## hexo-generator-searchdb
search:
  path: search.xml
  field: post
  format: html
  limit: 10

写在最后

这样，博客的基本框架就搭建好了。
可以在这里查看更多的博客个性化设置内容。
参考：link。