基于 Hexo 快速构建我的静态博客系统

Hexo 是一个快速、简洁且高效的博客框架。

基于 Markdown 解析出文章内容，快速生成静态页面文件。

本文以当前博客为例，介绍 Hexo 如何快速创建一个静态博客，并部署在 Github Pages 上（若是是部署在 Gitee 或 Coding 上，可自行修改本文中不同的地方）。

关于 Hexo 的更多信息，详见官网：https://hexo.io/zh-cn

<!-- more -->

1. Hexo

1.1. 安装

依赖：

• NodeJs v10.0+
  • 这是官方建议，最小不低于 v8.10
  • 没有安装 NodeJs 环境，能够参见借助 nvm 安装、管理多个 NodeJS 版本
• Git

安装：

# 全局安装
$ npm install hexo-cli -g

1.2. 初始化

新建一个目录，用于存放 Hexo 初始化以后的全部文件，以后安装主题、写文章、网站配置等都在这个目录下。

目录名称建议取博客地址，好比：xxxxx.github.io（由于个人博客是部署在 Github Pages 上的，xxxxx 对应 Github 用户名，详见 3.1. 建立 Github 仓库）。

$ hexo init xxxxx.github.io

1.3. 个性配置

# 进入上一步初始化好的主目录
$ cd xxxxx.github.io

# 打开配置文件
$ vim _config.yml

文件 _config.yml 对应整个站点的配置，Hexo 的详细配置参数说明见官网。

下面是部分主要配置的说明：

# Site
title: whoru
subtitle: '学习、分享、交流、沉淀'
description: 'Talk is cheap, just do IT.'
keywords:
author: whoru.S.Q
language: zh-CN
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://blog.sqiang.net
root: /
permalink: :year/: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

# 代码高亮设置
highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

# 首页分页设置
index_generator:
  path: ''
  per_page: 5
  order_by: -date

# 归档页分页设置
per_page: 20
pagination_dir: page

# 主题
theme: landscape

# 博客发布地址（对应 Github 上建立的 Pages 仓库）
deploy:
  type: git
  repo: https://github.com/whorusq/xxxxx.github.io.git

1.4. 启动本地预览

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

1.5. 浏览器访问

地址栏输入 http://localhost:4000 访问，以下图：

2. 主题 NexT

NexT 是 Hexo 下一个优雅且强大的主题，详见官网：https://theme-next.org/docs/

2.1. 安装

方式一：Git

# 1. 进入初始化好的 Hexo 根目录
$ cd whorusq.github.io

# 2. 拉取 NexT 最新代码（默认分支 master）
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

# 查看全部分支
$ cd themes/next
$ git tag -l
...
v7.5.0
v7.6.0
v7.7.0
v7.7.1

# 切换主题到不一样版本
$ git checkout tags/v7.5.0

# 切回最新的 master
$ git checkout master

方式二：直接下载

# 1. 进入初始化好的 Hexo 根目录
$ cd whorusq.github.io

# 2. 手动建立主题目录
$ mkdir themes/next

# 3. 下载主题源码并解压
$ curl -L https://api.github.com/repos/theme-next/hexo-theme-next/tarball | tar -zxv -C themes/next --strip-components=1

2.2. 个性配置

# 进入主题目录
$ cd themes/next

# 打开配置文件
$ vim _config.yml

⚠️ 注意：主题下的 _config.yml 文件是当前主题定制的配置项，涉及页面样式、单页面、菜单等具体展现层的东西，与 Hexo 根目录下的 _config.yml 功能和适用范围不一样，要区别开。

详细的主题配置说明见官网，下面是当前博客的一份示例配置，一样只摘取了部分配置，只用于举例说明各主要配置项。

# 页面底部设置
footer:

# 文章版权展现设置
creative_commons:

# 主题的四种风格
# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini

# 菜单设置
# 对应的单页需使用 hexo new page "about" 建立
menu:
  home: / || home
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  about: /about/ || user
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  # commonweal: /404/ || heartbeat

# 侧边栏设置
sidebar:

# 侧边栏头像
avatar:

# 侧边栏底部社交连接
social:

# 友情链接
links:

# 文章索引设置
toc:

# 首页展现「阅读全文」连接
read_more_btn: true

# 文章尾部赞扬设置
reward_settings:

# 展现相关文章
related_posts:

# 标签云样式
tagcloud:

# Multiple Comment System Support
# 是否开启多评论切换
comments:

# 开启本地搜索
local_search:

2.3. 本地预览

# 返回根目录
$ cd xxxxx.github.io

# 启动服务
$ hexo s

启动后，地址栏再次输入 http://localhost:4000 访问。

3. 发布

3.1. 建立 Github 仓库

在 Github 建立一个新仓库，名称为 xxxxx.github.io，其中 xxxxx 是你的 Github 用户名。若是要开启 Pages 服务，则必须遵照这个规则。

建立好以后，浏览器直接输入 xxxxx.github.io 访问。

进入仓库设置，找到 GitHub Pages 部分，可自定义域名和开启 HTTPS 支持。

3.2. 安装插件

$ npm install hexo-deployer-git --save

3.3. 修改配置

# 进入根目录，打开 Hexo 全局配置文件
$ cd xxxxx.github.io
$ vim _config.yml

修改以下配置：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/xxxxx/xxxxx.github.io.git

关于该该插件的更多详细配置，参见 https://github.com/hexojs/hexo-deployer-git

3.4. 执行命令

$ hexo clean && hexo deploy

# 或者直接执行这条命令（经常使用）
# 至关于为文章生成静态文件，而后部署到指定的仓库
# g ---> generate
# d ---> deploy
$ hexo g -d

3.5. 浏览器访问

输入地址：https://xxxxx.github.io

4. 附录

4.1. Hexo 经常使用命令

完整的命令列表及说明参见官网指令部分。

# 以指定目录初始化 Hexo，不指定到话则使用当前目录
$ hexo init xxxxx.github.io

# 建立单页
$ hexo new page "about"

# 建立文章
$ hexo new post "一篇新文章的标题"

# 启动本地服务
$ hexo s

# 清除缓存文件 (db.json) 和已生成的静态文件 (public)。
# 在某些状况（尤为是更换主题后），若是发现您对站点的更改不管如何也不生效，可能须要运行该命令。
$ hexo clean

# 为文章生成静态文件
$ hexo g

# 为文章生成静态文件，而后部署到指定仓库
$ hexo g -d

4.2. 推荐插件

hexo-abbrlink

为每篇文章生成一个惟一 ID，详见https://github.com/Rozbo/hexo-abbrlink#readme

# 1. 安装
$ npm install hexo-abbrlink --save

# 2. 添加 Hexo 配置
$ cd xxxxx.github.io
$ vim _config.yml

# 注释掉默认配置
# permalink: :year/:title/

# 修改、添加如下内容
permalink: post/:abbrlink.html
abbrlink:
  alg: crc32   # 算法： crc16(default) and crc32
  rep: dec     # 进制： dec(default) and hex

hexo-filter-nofollow

为外链添加 rel="external nofollow noreferrer"，详见https://github.com/hexojs/hexo-filter-nofollow

# 1. 安装
$ npm install hexo-filter-nofollow --save

# 2. 添加 Hexo 配置
$ cd xxxxx.github.io
$ vim _config.yml

# 添加如下配置
nofollow:
  enable: true
  field: site
  exclude:
    # - 'exclude1.com'

hexo-generator-searchdb

开启 NexT 主题的本地搜索须要此插件，详见https://github.com/theme-next/hexo-generator-searchdb

# 1. 安装
$ npm install hexo-generator-searchdb --save

# 2. 修改 NexT 主题配置
$ cd xxxxx.github.io/themes/next/
$ vim _config.yml

# 修改以下部分
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

hexo-generator-sitemap

部署的时候自动生成 sitemap.xml 文件，便于爬虫抓取或手手动提交，插件的使用详见：

• https://github.com/hexojs/hexo-generator-sitemap
• https://github.com/coneycode/hexo-generator-baidu-sitemap

# 1. 安装
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save

# 2. 添加 NexT 主题配置
$ cd xxxxx.github.io/themes/next/
$ vim _config.yml

# 添加以下部分
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

⚠️ 注意：百度爬虫因为操做生猛，已经被 Github 屏蔽，因此部署在 Github Pages 上的网站没法被收录，须要借助其它平台的 Pages 服务，可自行搜索。

---

原文连接：https://blog.sqiang.net/post/525717070.html