如何搭建Hexo博客

背景简介：

虽然搭建博客的平台很多，但博主偏偏看上了Hexo，为了完美的搭建成功Hexo+Github，居然经历了两周的时间（实际周末），对于我这个非技术从业者来说，我不得不反思下了！😊

所以第一篇博文，理应分享下整个搭建过程，或许可以为后来的新手借鉴！

Tips：本文的安装环境和准备工作，系统及平台：window 10、Git、Node.js

Hexo是什么

官方解释：Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。参考链接：https://hexo.io/zh-cn/docs/

Hexo 安装配置流程

第一步 电脑安装 Node.js

建议通过客户端界面下载直接安装，简单方便快捷，官网链接：https://nodejs.org/zh-cn/

每个“下一步”界面均有说明，可以根据实际情况选择完成。

个人理解，客户端界面安装 Node.js 并不是非常难操作，另外我也未在最初搭建的时候截图，所以本次也不做详细说明。

推荐一篇网友博文关于 Node.js 的详细安装流程：https://www.cnblogs.com/liuqiyun/p/8133904.html

Node.js的简要操作说明

---

第二步 电脑安装 Git

首先你要有个账户，

所以没有的情况，请及时注册（不用翻墙，只是访问会比较慢😊），官网：https://github.com/

当然我的建议依然是客户端界面安装，

简单方便快捷，官网链接：https://git-scm.com/download/win

Git 是什么：

Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。

推荐一篇网友博文：

关于 Git 的详细安装及配置流程：https://www.cnblogs.com/vitah/p/3612473.html

重要：Git安装完成后，一定要进行本地配置，可远程访问Github账户才算成功

Git的简要操作说明：

参考网友的一篇博文：https://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html

☺ 我是大自然的搬运工，所以务必学会静心与度娘

---

第三步 电脑安装 Hexo

确保以上均成功安装配置完成后，咱们开始这一步

安装及配置 Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

进阶安装和使用

对于熟悉 npm 的进阶用户，可以仅局部安装 hexo 包。

$ npm install hexo
安装以后，可以使用以下两种方式执行 Hexo：

1. npx hexo <command>
2. 将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>：

   echo ‘PATH=”$PATH:./node_modules/.bin”‘ >> ~/.profile

   Node.js 版本限制

我们强烈建议永远安装最新版本的 Hexo，以及 推荐的 Node.js 版本。

Hexo 版本	最低兼容 Node.js 版本
5.0+	10.13.0
4.1 - 4.2	8.10
4.0	8.6
3.3 - 3.9	6.9
3.2 - 3.3	0.12
3.0 - 3.1	0.10 or iojs
0.0.1 - 2.8	0.10

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init $ cd $ npm install
新建完成后，指定文件夹的目录如下：

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

_config.yml

网站的 配置 信息，您可以在此配置大部分的参数。

package.json

应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

package.json

{ “name”: “hexo-site”, “version”: “0.0.0”, “private”: true, “hexo”: { “version”: “” }, “dependencies”: { “hexo”: “^3.8.0”, “hexo-generator-archive”: “^0.1.5”, “hexo-generator-category”: “^0.1.3”, “hexo-generator-index”: “^0.2.1”, “hexo-generator-tag”: “^0.2.0”, “hexo-renderer-ejs”: “^0.3.1”, “hexo-renderer-stylus”: “^0.3.3”, “hexo-renderer-marked”: “^0.3.2”, “hexo-server”: “^0.3.3” } }

scaffolds

模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes

主题 文件夹。Hexo 会根据主题来生成静态页面。

网站

参数	描述
title	网站标题
subtitle	网站副标题
description	网站描述
keywords	网站的关键词。支持多个关键词。
author	您的名字
language	网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezone	网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。

其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

网址

参数	描述	默认值
url	网址, 必须以 http:// 或 https:// 开头
root	网站根目录	url’s pathname
permalink	文章的 永久链接 格式	:year/:month/:day/:title/
permalink_defaults	永久链接中各部分的默认值
pretty_urls	改写 permalink 的值来美化 URL
pretty_urls.trailing_index	是否在永久链接中保留尾部的 index.html，设置为 false 时去除	true
pretty_urls.trailing_html	是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的index.html无效)	true

网站存放在子目录
如果您的网站存放在子目录中，例如 http://example.com/blog，则请将您的 url 设为 http://example.com/blog 并把 root 设为 /blog/。

例如：

# 比如，一个页面的永久链接是 http://example.com/foo/bar/index.html pretty_urls: trailing_index: false # 此时页面的永久链接会变为 http://example.com/foo/bar/

目录

参数	描述	默认值
source_dir	资源文件夹，这个文件夹用来存放内容。	source
public_dir	公共文件夹，这个文件夹用于存放生成的站点文件。	public
tag_dir	标签文件夹	tags
archive_dir	归档文件夹	archives
category_dir	分类文件夹	categories
code_dir	Include code 文件夹，source_dir 下的子目录	downloads/code
i18n_dir	国际化（i18n）文件夹	:lang
skip_render	跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。

例如：

skip_render: “mypage/**/*” # 将会直接将 source/mypage/index.html 和 source/mypage/code.js 不做改动地输出到 ‘public’ 目录 # 你也可以用这种方法来跳过对指定文章文件的渲染 skip_render: “_posts/test-post.md” # 这将会忽略对 ‘test-post.md’ 的渲染

提示
如果您刚刚开始接触 Hexo，通常没有必要修改这一部分的值。

文章

参数	描述	默认值
new_post_name	新文章的文件名称	:title.md
default_layout	预设布局	post
auto_spacing	在中文和英文之间加入空格	false
titlecase	把标题转换为 title case	false
external_link	在新标签中打开链接	true
external_link.enable	在新标签中打开链接	true
external_link.field	对整个网站（site）生效或仅对文章（post）生效	site
external_link.exclude	需要排除的域名。主域名和子域名如 www 需分别配置	[]
filename_case	把文件名称转换为 (1) 小写或 (2) 大写	0
render_drafts	显示草稿	false
post_asset_folder	启动 Asset 文件夹	false
relative_link	把链接改为与根目录的相对位址	false
future	显示未来的文章	true
highlight	代码块的设置, 请参考 Highlight.js 进行设置
prismjs	代码块的设置, 请参考 PrismJS 进行设置

相对地址
默认情况下，Hexo 生成的超链接都是绝对地址。例如，如果您的网站域名为 example.com,您有一篇文章名为 hello，那么绝对链接可能像这样：http://example.com/hello.html，它是绝对于域名的。相对链接像这样：/hello.html，也就是说，无论用什么域名访问该站点，都没有关系，这在进行反向代理时可能用到。通常情况下，建议使用绝对地址。

分类 & 标签

参数	描述	默认值
default_category	默认分类	uncategorized
category_map	分类别名
tag_map	标签别名

日期 / 时间格式

Hexo 使用 Moment.js 来解析和显示时间。

参数	描述	默认值
date_format	日期格式	YYYY-MM-DD
time_format	时间格式	HH:mm:ss
updated_option	当 Front Matter 中没有指定 updated 时 updated 的取值	mtime

updated_option
updated_option 控制了当 Front Matter 中没有指定 updated 时，updated 如何取值：
mtime: 使用文件的最后修改时间。这是从 Hexo 3.0.0 开始的默认行为。
date: 使用 date 作为 updated 的值。可被用于 Git 工作流之中，因为使用 Git 管理站点时，文件的最后修改日期常常会发生改变
empty: 直接删除 updated。使用这一选项可能会导致大部分主题和插件无法正常工作。
use_date_for_updated 选项已经被废弃，将会在下个重大版本发布时去除。请改为使用 updated_option: 'date'。

use_date_for_updated | 启用以后，如果 Front Matter 中没有指定 updated， post.updated 将会使用 date 的值而不是文件的创建时间。在 Git 工作流中这个选项会很有用 | true

分页

参数	描述	默认值
per_page	每页显示的文章量 (0 = 关闭分页功能)	10
pagination_dir	分页目录	page

扩展

参数	描述
theme	当前主题名称。值为false时禁用主题
theme_config	主题的配置文件。在这里放置的配置会覆盖主题目录下的 _config.yml 中的配置
deploy	部署部分的设置
meta_generator	Meta generator 标签。 值为 false 时 Hexo 不会在头部插入该标签

---

搭建博客

以上三步，咱们都正确安装完成后，接下来就是比较重要的操作内容

搭建 Github博客

创建仓库

1. 新建一个 repository。如果你希望你的站点能通过 <你的 GitHub 用户名>.github.io 域名访问，你的 repository 应该直接命名为 <你的 GitHub 用户名>.github.io。
2. 将你的 Hexo 站点文件夹推送到 repository 中。默认情况下不应该 public 目录将不会被推送到 repository 中，你应该检查 .gitignore 文件中是否包含 public 一行，如果没有请加上。
3. 前往 https://<你的 GitHub 用户名>.github.io 查看你的站点是否可以访问。这可能需要一些时间。

这里的仓库创建及验证本地git和github的连通性，请回顾git的安装和简要操作流程，因为只有本地和远程链接成功，才可以推送博文。

使用Hexo写博客

使用git命令行，进入你要写作存储的目录

cd xx

你可以执行下列命令来创建一篇新文章或者新的页面。

$ hexo new [layout] <title>

您可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

本地服务访问

远程推送访问

执行以下一连串的命令可以部署到github页面（github用户名.github.io）

hexo clean
hexo g
hexo d

来自大自然搬运工的建议：

1. 首先理解Hexo与github之间链接配置的概念
2. 其次是简要命令的使用
3. 最后是Hexo初始化后的网站文件目录分别代表什么（我可以修改什么以及怎么修改，参考Hexo官网说明）