2021-10-04发表2024-11-02更新tools / hexo1 小时读完 (大约6716个字)

使用 Hexo 快速搭建自己的博客系统

在开始博客写作之前，一个重要的决定就是选择合适的博客框架进行独立部署。博客框架主要分为两种：动态博客和静态博客。除此之外，如果不愿意独立部署，还有一些一站式的博客平台可以选择。

1. 什么是静态博客？

静态Web网站是指主要由静态页面组成的网站，这些静态页面通常包括HTML、CSS、JavaScript、图片等文件，它们直接存储在服务器上，并在用户请求时由服务器发送给用户的浏览器进行显示。与动态Web网站相比，静态Web网站不依赖于服务器端脚本或数据库来生成页面内容，而是直接展示预先设计好的页面。

静态博客是指将博客内容（如文章、页面等）通过生成工具将作者书写的博文直接编译成 HTML、CSS、JS 等静态web技术支持的博客形式，并通过静态服务器进行托管和访问的博客系统。

1.1. 工作原理

作者使用 Markdown、HTML 等标记语言编写文章，并通过生成工具（如 Hexo、Hugo 等）将文章编译成静态的 HTML 文件。这些文件随后被部署到静态服务器上，用户通过浏览器访问这些静态文件来浏览博客内容。

本文原文位于使用 Hexo 搭建自己的博客网站, 如需获取最近更新，以及遇到 markdown 排版问题，请访问原文，以获得最佳阅读体验。

1.2. 静态博客的优点

访问速度快：由于静态文件直接由服务器提供，无需经过复杂的后端处理，因此访问速度通常较快。
资源消耗少：静态博客不需要运行后端程序和数据库，因此占用的服务器资源较少，成本也相对较低。
安全性高：由于静态文件不包含可执行代码，因此相比动态博客更不容易受到攻击。
专注于内容：静态博客的设计初衷是专注于内容创作和分享，避免了复杂的功能和插件干扰，使得博主能够更专注于写作。
可高度定制化：通过修改 HTML、CSS、JS 等文件，静态博客可以实现高度的定制化，满足博主的个性化需求。

1.3. 静态博客生成工具

Hexo：一款快速、简洁且高效的博客框架，支持 Markdown 语法，具有丰富的插件和主题资源。
Hugo：另一个流行的静态网站生成器，以其高性能和易用性著称，适合构建个人博客、文档站点等。
Jekyll：由 GitHub 开发并维护的静态网站生成器，支持 Markdown 语法，并与 GitHub Pages 紧密集成，方便用户托管和发布博客。
Zola 是一个使用 Rust 编写的静态网站生成器，力求简单且快速，是一个保持简单并专注于提供高速生成的工具。
Astro 是一个前端框架，用于构建快速、优化的网站和应用。Astro 允许你编写现代的 JavaScript 或 TypeScript，同时通过只在顾客端发送最小静态 js 脚本，确保了更优的性能。
Gatsby 是一个基于 React 的静态站点生成器，可以创建快速、安全、高质量的网站和应用。
Next.js 是一个基于 React 框架的服务端渲染应用框架，也支持静态网站生成。
Docsify 是一个轻量级的 JavaScript 文档网站生成器，使用 Markdown 文本文件来生成静态站点。
VuePress 是一个基于 Vue.js 的静态网站生成器，主要用于快速搭建文档型网站。
Statty 是一款简洁高效的静态博客生成器，由开发者 Vesparny 创建。
InkPaper 是一款由 Golang 编写的静态博客生成器，专为 Markdown 写作打造。

1.4. 常见的静态Web服务器有哪些？

Apache HTTP Server
Apache是最流行的开源HTTP服务器软件之一，可在多种操作系统上运行，包括Windows、Linux和macOS。
它提供了稳定可靠的静态网站托管方案，并支持各种自定义配置和强大的模块。
Nginx
Nginx是一款高性能的开源HTTP和反向代理服务器，也常用于托管静态网站。
它的设计目标是处理大量并发请求，对静态文件的传输非常高效。
Nginx还支持反向代理、负载均衡、SSL加密等多种功能。
Microsoft Internet Information Services (IIS)
IIS是微软提供的Web服务器软件，专为Windows操作系统设计。
它支持静态网站托管，并提供与其他Microsoft产品的集成和兼容性。
Lighttpd
Lighttpd是一个轻量级的Web服务器，专注于高性能和低资源消耗。
它也支持静态文件服务，并且由于其轻量级特性，在资源受限的环境中特别有用。
Caddy
Caddy是一个现代化的Web服务器，以易用性和安全性著称。
它提供了自动的HTTPS、HTTP/2支持以及简化的配置选项，也适用于托管静态网站。
GitHub Pages
GitHub Pages是GitHub提供的免费静态网站托管服务。
它支持通过git进行版本控制，并与GitHub仓库关联，方便开发者将静态网站发布到互联网。
Amazon S3
Amazon Simple Storage Service (S3)是亚马逊提供的对象存储服务，也可以用来托管静态网站。
用户可以将静态文件上传到S3桶中，并通过配置相应的访问权限和域名解析来实现网站的访问。

2. 什么是动态博客？

动态博客是最常见的博客形式。WordPress、Typecho、Ghost, Laravel, ThinkPHP 等动态博客系统在服务器上动态生成网页，这意味着每当用户访问博客时，内容都会动态生成，然后发送到浏览器。

优点：

易于使用：动态博客系统通常提供用户友好的界面，让你无需编程知识就可以方便地发布和编辑内容。
功能丰富：动态博客系统提供了丰富的插件和扩展，可以很方便地添加新功能，比如社交媒体分享、评论系统、分析工具等。
灵活性：动态博客系统可以方便地进行定制和修改，满足不同的需求。

缺点：

运行速度：由于每个页面都是实时生成的，因此加载速度可能会稍慢。
需要数据库：动态博客系统需要数据库来存储和检索内容，这可能增加了配置和管理的复杂性。
安全性问题：动态博客系统由于其复杂性，可能更容易受到安全攻击。

3. 选择博客生成工具需要考虑哪些因素？

3.1. 需求匹配

博客类型与目的：明确博客的定位，是营销网站、出版网站、文档网站、博客、个人作品集、Landing page、社区网站以及电子商务网站等。不同类型的博客可能需要不同的功能和特性。
功能需求：确定需要哪些功能，如评论系统、分类、标签、搜索、SEO 优化、多语言支持等。
定制化需求：是否希望独立定制博客的样式和布局，以及是否需要插件或扩展来增强功能。

3.2. 学习曲线

易用性：选择易于安装、配置和使用的博客生成工具，减少搭建过程中的学习成本和时间。
学习曲线：考虑自己的技术背景，选择适合自己技术水平的工具。如果技术基础较弱，可以选择那些文档齐全、社区活跃的博客生成工具。

3.3. 扩展性与插件支持

扩展性：博客生成工具应该具备良好的扩展性，以便在需要时添加新的功能或插件。
插件支持：查看工具的插件生态系统是否丰富，是否有足够多的插件来满足未来的需求。

3.4. 成本与许可

成本：考虑工具的使用成本，包括是否需要购买许可、支付托管费用等。
许可协议：了解工具的许可协议，确保自己的使用方式符合规定。

3.5. 维护与更新

更新频率：查看工具的更新频率，以了解其开发者的活跃度和对工具的重视程度。
兼容性：确保工具与当前及未来的浏览器、操作系统等平台兼容。

4. 为什么选择 Hexo？

Hexo 搭建博客具有快速且简单、功能强大且灵活、静态网页的优势、官方支持和社区活跃以及易于维护和优化等优势。这些优势使得 Hexo 成为众多博主和开发者搭建博客的首选工具之一。

以下是选择 hexo 的一些理由：

简洁的 Markdown 支持：Hexo 原生支持 Markdown，这种轻量级标记语言使得撰写博客文章变得既快捷又方便。Markdown 的简洁语法让内容创作者能够专注于内容本身，而无需过多关注格式排版。
丰富的主题选择：Hexo 拥有庞大的主题库，从简约到华丽，从学术到个人博客，应有尽有。用户可以轻松找到符合自己风格的主题，并且这些主题大多数都支持自定义配置，满足个性化需求。
高效的性能：Hexo 生成的是静态网页，这意味着在访问时不需要经过服务器端的渲染，直接由浏览器加载显示，从而提高了网站的访问速度和性能。这对于提升用户体验至关重要。
可扩展性强：Hexo 支持通过插件来扩展功能。无论是添加新的部署方式、优化 SEO、集成评论系统还是实现其他自定义功能，都可以通过安装和使用插件来实现。
社区支持强大：Hexo 拥有活跃的社区和大量的用户，这意味着当你遇到问题时，很容易在社区中找到解决方案或者得到他人的帮助。社区中的分享和交流也能帮助你更快地学习和成长。
文档完善：Hexo 的官方文档非常完善，涵盖了安装、配置、使用、插件开发等各个方面。无论你是初学者还是有一定经验的开发者，都能通过官方文档快速上手 Hexo。
版本控制友好：由于 Hexo 博客的内容都存储在 Git 仓库中（如 GitHub、GitLab 等），因此你可以很方便地利用版本控制工具来管理你的博客内容。这有助于你跟踪和管理博客的变更历史，以及与他人协作编辑博客。
安全性高：静态网页不依赖数据库等后端服务，减少了被攻击的风险。同时，Hexo 生成的网页是纯 HTML、CSS 和 JS 等静态文件，因此也更容易进行安全加固和防护。
部署灵活：Hexo 支持多种部署方式，包括 GitHub Pages、GitLab Pages、Vercel、Netlify 等。你可以根据自己的需求和喜好选择合适的部署平台，轻松实现博客的在线发布。
持续更新与维护：Hexo 团队和社区会不断关注最新的技术和趋势，并对 Hexo 进行更新和维护。这意味着 Hexo 将始终保持与时俱进，为用户提供更好的使用体验和功能支持。

5. 安装 Hexo 的前提条件

需要先安装 nodejs 的相应版本
安装 git
发布博客需要注册 github 账号

6. 安装 Hexo

在安装 Hexo 首先需要了解 hexo 版本与 nodejs 版本的兼容性，避免安装之后出现版本兼容性问题。
详情参考Install-Hexo。

Hexo version	Minimum (Node.js version)	Less than (Node.js version)
7.0+	14.0.0	latest
6.2+	12.13.0	latest
6.0+	12.13.0	18.5.0
5.0+	10.13.0	12.0.0
4.1 - 4.2	8.10	10.0.0
4.0	8.6	8.10.0
3.3 - 3.9	6.9	8.0.0
3.2 - 3.3	0.12	unknown
3.0 - 3.1	0.10 or iojs	unknown
0.0.1 - 2.8	0.10	unknown

6.1. 安装 nodejs

首先需要安装 nodejs, 可以参考我以前写的一篇博文安装并配置 nodejs，需要从以上表格中找到对应的版本进行替换。

6.2. 安装 Hexo 命令行工具


sudo npm install hexo-cli -g
  　或者
#（推荐使用cnpm安装, 速度快）
sudo cnpm install hexo-cli -g

说明:
npm 是 nodejs 的包管理工具，sudo 是 linux 或 unix 下将命令以管理员身份运行, windows 环境下不需要 sudo,
install 为 npm 子命令用于安装工具包或项目依赖
-g 为全局安装，安装一次后，在命令行中处于任何目录位置都能使用，如果不带-g 工具包被安装在当前项目的 node_modules，
需要借助 npx 才能执行相关命令，像 hexo-cli 这样的命令行工具建议全局安装
这一步需要管理员权限，sudo 即为以超级用户运行安装命令，linux 和 mac 安装方法相同
如果是 windows 环境可能需要以管理员身份运行，可以将 sudo 去掉, windows 下如果需要管理员权限,会弹出请求授权框
即 npm install hexo-cli -g 或者 cnpm install hexo-cli -g
如果访问墙外资源较慢，可以是 cnpm 经过阿里的镜像安装 hexo-cli 命令行工具，cnpm 前面的 c 即为 china 的意思，wall 内专用 nodejs 包管理工具

7. 创建博客系统

7.1. 初始化博客系统

# 创建博客目录(blog为目录名,可以根据自己的喜好进行调整)
mkdir blog

# 进入博客目录
cd blog

# 初始化hexo
hexo init blog

命令说明：
hexo: 是 hexo 的命令
init: hexo 的子命令，用于初始化一个博客系统．
blog: 是博客系统的名字，这里我没有考虑太多，直接将博客系统的名字命名为 blog,　你可以根据自己的喜好设定名字．

进入 blog 目录，安装项目依赖包(第三方 nodejs 类库或工具)

1 2	# 安装nodejs依赖包 npm install

初始化完成后的简要目录结构如下:

./blog
    ├── _config.landscape.yml
    ├── _config.yml
    ├── db.json
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    ├── scaffolds
    ├── source
    └── themes

7.1.1. 目录结构说明

package.json: 这个是 nodejs 要用到的，里面存放着项目信息，版本，项目所依赖的第三方 nodejs 工具和代码库
package-lock.json: 这个 nodejs 解析依赖包时会用到的
scaffolds: 博客脚手架，当你创建新的博文时可以基于其中的某个模板进行修改．
source: 源代码文件夹，这里存放你网站的内容．
themes: 主题，博客 css 样式，背景图片等等．
node_modules: 这里存放 npm install 时从网络下载下来的依赖包
config.yml 项目配置文件

配置文件详细说明

这里重点说明一下项目配置文件．

你可以修改项目的默认配置文件_config.yml 以满足你个人的需求．比如标题，网站的描述，搜索关键字等等一些信息

| setting        | chinese          | desc             |
| :------------- | :-------------- | :--------------- |
| title 　　     | 标题 　　　　   | 你网站的标题     |
| subtitle 　    | 子标题 　　　   | 你网站的子标题   |
| description 　 | 网站描述 　　　 | 你网站的描述信息 |
| keywords 　    | 关键字 　　　   | 关键字　         |
| author 　      | 作者 　　　     | 网站的作者       |
| language 　    | 语言            | 网站支持的语言   |
| timezone 　    | 网站时区 　　　 | 网站时区         |
| theme    　    | 主题     　　　 | 使用的主题名称   |
| per_page 　    | 每页文章数量    | 每页显示的文章量 |
| pagination_dir | 分页url        | 指定博客生成后，每页的 index.html 文件存放目录 |

8. 本地启动博客系统

当前目录下执行以下命令，启动博客系统.

1	hexo serve

如果启动成功，会输出以下信息，最后一行会提示，通过什么网址可以访问博客．
打开浏览器，将网址粘贴到浏览器即可访问到博客系统．

$hexo serve
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

使用浏览器打开http://localhost:4000
打开博客首页会看到一些默认的博客页面，后面我们将会讲解如何修改代码来构建自己的博客系统．

9. 创建第一篇博文

将一篇 markdown 格式的文章拷贝到 source 目录下，在博文开头加上标题，日期，标签页．
刷新浏览器，即可看到自己的第一篇博客文章．

创建一篇博文, 向世界宣布你来了.

---
title: 使用Hexo搭建自己的博客网站
date: 2021/10/4
tags:
  - Hexo
categories:
  - blog
---

## first blog

hello world!

10. 如何发布博客

10.1. 创建 github 代码仓库

创建一个以你的 github 用户名命名的代码仓库例如 xxxx.github.io,

10.2. 安装 deployer 插件并配置 deploy

安装 hexo-git plugin

1
2
3

npm install hexo-deployer-git --save
或者
cnpm install hexo-deployer-git --save　//推荐

修改配置文件_config.yml 配置 deploy

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  - type: git
    repo: git@github.com:your_github_id/xxxx.github.io.git
    branch: gh-pages
    name: yourname
    email: your_email@xxx.com

说明: 这里的 url 可以是 http https 也可以是 git url 但是建议使用 git url
实测在 push 文件到 github 时使用 https 路径，经常会有异常抛出，使用 git url 后比较稳定
使用 https url 需要在 url 上添加授权方式和 token 像这样 repository: https://oauth2:your_token@github.com/*****.github.io, 实测可行 on Nov 1 2021

为了防止将一些非必要的文件推送到 github 仓库，创建一个.gitignore 文件, 内容如下：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

10.3. 创建 gitHub token

打开自己的 GitHub 主页，点击自己的头像找到 Settings 并进入, 选择 developer settings 在左边目录栏找到 Personal access tokens，点击 Generate new token，按照步骤申请即可，过程比较简单, 这里不详述。
Scopes（范围）只需要授权 repo:status 和 repo:public_repo 权限即可。Token 申请成功后，将 Token 复制并保存起来．当运行发布命令时需要输入此 token 作为密码

这样前期准备工作基本完成，现在开始发布博客。
发布博客系统使用如下命令:

1	hexo clean && hexo generate && hexo deploy

当提示输入 git 用户名密码时，输入你的 github 用户名, 当提升输入密码时，输入上面生成的 token

10.4. 验证发布是否成功

浏览器打开自己的博客首页 https://xxxx.github.io/

由于我设置了 dns cname 所以实际会跳转到https://pengtech.net/

回头看一下 hexo 上传了哪些文件到 github, 其实只是上传了编译后的文件

所以需要自己将源文件保存到一个私有仓库，或者上传到另一个 github 仓库

2021/10/04/post
archives
css
fancybox
js
tags/Hexo
index.html

11. 选择一个漂亮的主题

可以参考我的文章，里面有 10 多款精美的主题可供选择16 款精美的hexo 博客主题推荐 - 鹏叔的技术博客

12. 进阶: 如何开启评论, 转发, 优化界面等等

可以参考我的文章 Hexo 博客添加评论功能 | 鹏叔的技术博客

更多 Hexo 相关主题可以访问我的博客 hexo 主题https://pengtech.net/hexo/

13. 插入图片

Markdown 并不会保存插入的图片资源本身，只是记录了获取资源的链接。因此我们需要选择一款合适的图床来支持博客写作，目前各大云服务商都提供了对象存储服务，如七牛云 KODO、又拍云 USS、腾讯云 COS、阿里云 OSS 等。

可以使用PicGo工具上传图片到图床上。

14. 进阶: SEO 优化

可以参考我的文章 Hexo 博客搜索引擎优化| 鹏叔的技术博客

15. 文章置顶

这一功能已被加入 hexo-generator-index。之前老的方法使用 hexo-generator-index-pin-top 替换 hexo-generator-index, 这种不要再参考了, pin-top 已经八年没有更新了. 详细使用方法可以参考 hexo-generator-indexed

在文章的 Front-matter 中增加一个 sticky 参数用来置顶，其值应为大于 0 的整数，表示置顶的优先级（未指定则默认为 0）。数字越大，文章越靠前。

---
title: example
sticky: 100
---

16. 相关阅读

17. 参考文档

Hexo 官方文档

Hexo 配置文档

hexo 博客文章置顶功能实现的两种方法

18. trouble shooting

问题: 启动时遇到 err: Error: ENOSPC: System limit for number of file watchers reached

具体错误信息如下

$hexo server
INFO  Validating config
INFO  Start processing
FATAL {
err: Error: ENOSPC: System limit for number of file watchers reached, watch '$your_project_dir/blog/source/'
at FSWatcher.<computed> (internal/fs/watchers.js:218:26)
at Object.watch (fs.js:1582:34)
at createFsWatchInstance ($your_project_dir/blog/node_modules/chokidar/lib/nodefs-handler.js:119:15)
at setFsWatchListener ($your_project_dir/blog/node_modules/chokidar/lib/nodefs-handler.js:166:15)
at NodeFsHandler._watchWithNodeFs ($your_project_dir/blog/node_modules/chokidar/lib/nodefs-handler.js:331:14)
at NodeFsHandler._handleDir ($your_project_dir/blog/node_modules/chokidar/lib/nodefs-handler.js:559:19)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async NodeFsHandler._addToNodeFs ($your_project_dir/blog/node_modules/chokidar/lib/nodefs-handler.js:609:16)
at async $your_project_dir/blog/node_modules/chokidar/index.js:451:21
at async Promise.all (index 0) {
errno: -28,
syscall: 'watch',
code: 'ENOSPC',
path: '$your_project_dir/blog/source/',
filename: '$your_project_dir/blog/source/'
}
} Something's wrong. Maybe you can find the solution here: %s https://hexo.io/docs/troubleshooting.html

解决办法

扩大能 watch 的文件数上限

1	echo fs.inotify.max_user_watches=524288 \| sudo tee -a /etc/sysctl.conf && sudo sysctl -p

问题: The TLS connection was non-properly

fatal: unable to access 'https://github.com/xxxx/xxxx.github.io/': gnutls_handshake() failed: The TLS connection was non-properly terminated.
FATAL {
err: Error: Spawn failed
at ChildProcess.<anonymous> ($your_project_dir/blog/node_modules/_hexo-util@2.5.0@hexo-util/lib/spawn.js:51:21)
at ChildProcess.emit (events.js:400:28)
at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12) {
code: 128
}
} Something's wrong. Maybe you can find the solution here: %s https://hexo.io/docs/troubleshooting.html

原因分析

其实出现这个问题，很大可能是因为 https 和 http 的 proxy 的对应的分别是 https 和 http 开头的 proxy server，而 https 的 proxy server 可能无法正常工作。一个 workaround 是把 https 的 proxy server 换成 http 的 proxy server: