运维 / 开发

Hexo 快速入门指南

2023年1月7日 0
内容纲要

什么是 Hexo

Hexo 是一个快速、简洁且高效的博客框架，它的特点是：

  • 超快速度：Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染；
  • 支持 Markdown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件；
  • 一键部署；只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台；
  • 插件和可扩展性；强大的 API 带来无限的可能，与数种模板引擎 (EJS、Pug、Nunjucks) 和工具 (Babel、PostCSS、Less/Sass) 轻易集成；

你真的需要 Hexo 吗

经过几天的体验，个人认为这只是个适用于开发者群体的博客框架，特别是如果你只想好好写文章更是没有任何理由浪费时间在这玩意上面

举个例子： Hexo 是没有后台管理系统，那么要如何新建一篇文章呢？答案是使用命令：

hexo new "hi-hexo"

然后 Hexo 会在项目根目录的 source 目录下的 _posts 目录里生成 hi-hexo.md 文件，修改它就是修改新文章的内容了，那么删除一个文章呢？答案是删除掉这个 Markdown 文件

Hexo 的基本使用流程是：

  1. 在本地计算机使用命令 (hexo new <文章名>) 生成相应文件，然后使用编辑器在这个文件里写文章；
  2. 在本地计算机使用命令 (hexo server) 运行一个本地 Web 服务器在本地上浏览器打开进行预览，如果修改了主题及站点配置还需要使用命令 (hexo clean) 清除一下缓存，当主题及站点配置稳定不再变更而你又熟悉使用 Markdown 写作后，完全可以忽略这步；
  3. 当觉得可以发布了，在本地计算机使用命令 (hexo generate) 生成静态文件然后部署到远程服务器；
  4. 当然还可以更方便一点，在本地计算机使用命令 (hexo deploy 再配合 -g 选项就可以省略上一步) 从而配合远程部署插件，自动部署静态文件到远程服务器上；

这套流程对于曾经或正在使用如 WordPress 或 Medium 这样成熟的博客系统的人就已经很窒息了，但别急这还没完...

体验 Hexo 的过程让我想起几年前曾经体验过的另一款基于 Node.js 的博客平台 Ghost (Ghost 还将自身对标 WordPress 和 Medium)，当时上手后发现：没有搜索、没有分类、没有二级导航，甚至官方主题的本地化都懒得做还把后台不支持本地化的说明从文档中删除，当你去看 Ghost 的 Github 你会发现这玩意居然是周更，那年是 2018 年距离 Ghost 在 2013 年发布已经过去 5 年了，都不知道这 5 年内 Ghost 周更更出了个什么，连基础功能都做不好居然还对标 WordPress

Hexo 的体验类似，搜索、评论等功能都需要额外安装插件来实现。就比如评论功能，Hexo 是没有后端的，但为了评论功能以评论插件之一的 waline 举例，waline 官方文档的快速上手中推荐使用 LeanCloud 作为数据库以及使用 Vercel 部署为服务端...

注意，这里并不是说 waline 不好，waline 是一种外挂形式的插件 (不仅用于 Hexo)，不弄个后端评论数据又怎么妥善处理呢？

但这就是很滑稽的地方，一个没有后端的博客框架为了一个功能搞出两个后端，更不用说如果使用的是适配较好的主题还只是改改主题的配置文件，否则还需要自己去改相关代码。这已经超出非开发者的能力范围了

除此之外就是还有人看中这类框架是可以将页面托管在 Github 节省了部署成本而使用它，但这年头海外的廉价 VPS 简直遍地都是，不过也不能要求所有人都在这件事情上投入资金

另外还想说的是一个很普遍的现象：一个开发者想通过博客来记录自己的工作和学习，然而搞着搞着文章没写几篇，但出于对博客或博客插件的不满意自己动手实现，乃至重构了一遍又一遍...当然个人并不觉得这种将自己所学用于实践有什么不好，但重点在于你到底是来干嘛的呢？是来写博客还是来造博客的？

看到这里，你应该对于 Hexo 有一个基本的预期了，那么还想要使用 Hexo 吗？

安装 Hexo

Hexo 的安装及使用依赖于 Node.js，这是一个开源、跨平台的 JavaScript 运行时环境。但无需紧张你不需要懂得 JavaScript 也不需要懂得 Node.js，照着命令使用即可。

准备 Node.js 环境

你可以到 Node.js 的官方网站 https://nodejs.org/zh-cn/ 下载安装 (长期维护版即可)，如果系统上有包管理器也可以：

# 如 macOS 用户可以使用 Homebrew
brew install nvm # 安装 Node Version Manager
nvm install --lts # 安装 Node.js LTS 版

使用 npm 安装 Hexo

有了 Node.js 就可以使用它默认带有的包管理工具 npm 来安装 Hexo：

npm install hexo-cli -g

安装完成后找一个放置 Hexo 的文件夹，使用命令：

# 新建一个 Hexo 项目，如 blog
hexo init blog

# 进入到新建好的名为 blog 的 Hexo 项目
cd blog

# 安装运行 Hexo 所需的依赖
npm install

到这里你的 Hexo 项目目录是这样的：

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

使用 Hexo

运行

现在使用命令让 Hexo 跑起来：

hexo server
# 或简写
hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

看到上述提示到浏览器打开 http://localhost:4000/ 就可以预览你的 Hexo 项目了，想要关掉可以使用快捷键 Ctrl + C

与使用 WordPress 等内容管理系统不同的是，Hexo 是在本地服务器给你一个预览，等到你觉得修改合适了生成静态文件再部署到远程服务器上

不过也有些人会直接在服务器上跑 hexo s 然后用 NGINX 等 Web 服务器做个反向代理来使用...但这用法多少有点属于歪门邪道了，毕竟 Hexo 不是一个动态博客

站点配置

使用编辑器打开 Hexo 项目目录下的 _config.yml 文件进行站点配置

如果你没有趁手的编辑器，这里推荐 VSCode

# Site
title: Hexo      # 站点标题
subtitle: ''     # 网站子标题
description: ''  # 站点描述
keywords:        # 站点关键词
author: John Doe # 站长名字
language: en     # 网站语言，如简体中文修改为 zh-CN
timezone: ''     # 网站时区，如中国大陆地区可修改为 Asia/Shanghai

一些个人觉得比较有用的配置：

# 固定链接配置，如修改为 https://example.com/artcile/:title/
permalink: /article/:title/

# 在本地上的 .md 文章以什么样的路径保存，如按：年/月/文章标题.md
new_post_name: :year/:month/:title.md

# 生成文字标题同名的用于存放图片的文件夹
# 在文章内就可以使用 ![](image.webp) 这样的相对路径引用了
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

更多的配置可以查看 Hexo 官方网站的 配置

新建文章或页面

新建文章或页面使用命令：

hexo new [layout] <title>

# 新建文章
# 默认就是文章如果全： hexo new post "hi hexo"
hexo new "hi hexo" # 空格可以用引号包裹文章名

# 新建页面
hexo new page about # 创建关于页

文章会放置在 source 目录下的 _posts 目录

而页面会放在 source 目录下，对于页面的子页面你可以将另一个页面目录丢到一个页面的目录内，如联系页面 contact-us 的目录直接拖进关于页面 about 的目录内就可以了

那么文章的时间、分类、标签等等怎么设置呢？在一篇文章的顶部有名为「Front-matter」的区域：

---
title: 你好世界 # 文章标题
date: 2013/7/13 20:46:25 # 发布时间
updated: 2013/12/13 20:46:25 # 更新时间
comments: true # 开启评论
tags: # 标签
  - macOS
  - iOS
  - iPadOS
  - watchOS
  - tvOS
categories: # 分类，如一篇文章同属于多个分类
  - [Tech]
  - [Finance]
permalink: # 可选，覆盖文章的固定链接
excerpt: # 可选，摘要，填写一段文字，或在正文中使用 <!-- more --> 隔开
---

你可以自己 hexo new 一篇文章，然后将上述内容复制粘贴到文章内容顶部，然后动手修修改改就知道怎么回事了

一些主题或插件也会使用该区域，如：

toc: true # 开启文章目录
thumbnail: /images/thumb.webp # 文章缩略图路

如上示例的 images 目录在哪呢？在 Hexo 项目根目录下的 source 目录内自己新建一个即可，source 目录就相当于站点的根目录，这里放置的东西之后部署时也会一起打包

另外使用 hexo s 后，你会发现新建的文章分页或修改都可以通过刷新看到改变，而不用每次新建或修改页面或分页后停止再运行 Hexo 本地服务器来查看效果

生成

如果已经配置好站点配置也写好了文章想要生成网站文件了，那么可以使用命令：

hexo generate
# 或简写为
hexo g

这时在项目目录内就会多出一个用于存放静态文件的 public 目录和 db.json 缓存文件，将 public 目录里的文件放到 Web 服务器上就可以了，当然后面会介绍不用手动传送静态网页文件的方法

清除缓存、主题及注入器

Hexo 也有不少主题，你可以使用下载压缩包放到 Hexo 项目目录下的 themes 目录的方式，也可以使用 npm 安装

这里不会太过详细的介绍主题，上 Github 找找吧，这里的重点是对于站点配置和主题、界面上的改动，有的是不会实时生效在 hexo s 的，这时候可以使用使用命令清除缓存：

hexo clean

注意此命令也会清除掉用于存放静态文件的 public 目录和 db.json 缓存文件

再一个，对于使用 npm 安装的主题来说就没法像手动获取压缩包那样直接修改主题文件，但好处在于后续升级主题时方便，但你又想有一些自定义的 css 或 js 的修改怎么办呢？

Hexo 提供了一个「注入器」功能，用于将静态代码片段注入生成的 HTML 的 <head> 或 <body> 中。

Hexo 将在 after_render:html 过滤器之前完成注入。

你可以在 Hexo 官网的 注入器（Injector） 一文查看具体用法

不过官网也没说清楚这东西到底用在哪，其实说简单也简单，在 Hexo 根目录下新建一个名为 scripts 的目录，然后里面放置一个 js 文件，此处索性命名为 injector.js，然后内容举例：

hexo.extend.injector.register('head_end', `
  <style>
    .nav {
      background: #282828;
    }
  </style>

  <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
`)

hexo.extend.injector.register('body_end', `
  <script src="/scripts/custom.js"></script>
`)

💡 /scripts/custom.js 的 scripts 目录在 Hexo 根目录的 source 目录下自己创建即可

如上示例，在 HTML 的 <head> 或 <body> 中将静态代码片段注入

部署

除了手动将 public 目录里的文件放到 Web 服务器上，还可以通过一些工具避免手动部署这一过程，如使用 GitHub Pages 或是个人服务器上安装和使用 Rsync

此处以 Rsync 为例，在远程服务器如使用 Debian 为例安装 Rsync：

sudo apt update && sudo apt install rsync

然后在本地 Hexo 项目目录内使用命令：

npm install hexo-deployer-rsync --save

然后配置 _config.yml

deploy:
  type: rsync
  host: example.com
  user: www
  root: /var/www/html
  port: 22

当然实际情况要复杂一些，比如使用的用户要对部署路径上的目录有相关权限

除了 Rsync 也有不少其他的方法，可以参考 Hexo 官网的 部署

⚠️ 个人不建议使用 hexo-deployer-sftp 因为会频繁遇上卡住的问题，即便通过反复运行部署命令最终提示部署完成，但打开网站后你会发现仍然有文件没有传输到服务器上...

在配置好部署工具后就可以使用命令

hexo deploy
# 或简写
hexo d

# 当然还有生成及部署相结合的命令
hexo d -g # 或 hexo g -d

插件

插件的安装也是在 Github 上可以获得，一些提供 npm 安装使用的就在 Hexo 根目录使用命令安装即可，这里推荐并以 Hexo Google-friendly sitemap generator 举例

Hexo Google-friendly sitemap generator 是一个 Hexo 站点地图插件，它的灵感来自名为 Yoast 的 WordPress SEO 插件，它可以为页面、帖子、类别、标签和 XSL 样式表生成单独的站点地图文件。

这样的好处是 sitemap 文件没有那么大而且可以分门别类，再一个现如今像百度资源平台已经不接受索引型的 sitemap 文件，这个插件就很好的帮助到我们

在 Hexo 项目目录使用命令安装：

npm install hexo-generator-seo-friendly-sitemap --save

然后修改 _config.yml 文件：

sitemap:
    path: sitemap.xml
    tag: false
    category: false

说明：

  • path: sitemap.xml Sitemap 文件名及路径设置；
  • tag: false 是否启用标签的地图文件，默认关闭设置为 true 开启；
  • category: false 是否启用分类的地图文件，默认关闭设置为 true 开启；

Tags:

You may also like...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

广而告之

☁️ Dler Cloud
颠覆传统的全球加速服务商 DlerCloud 🪙 OKX
全球领先的数字资产交易平台 OKX