hexo 搭建 blog 笔记

发表于 更新于 本文字数： 5.9k 阅读时长 ≈ 5 分钟
使用 hexo + Git&Github 搭建 blog の简要笔记

hexo 搭建 blog

hexo 前置环境

hexo 安装

1
npm install -g hexo-cli		# npm 安装 hexo

hexo 初始化

1
hexo init blog				# 初始化 hexo

blog 是 hexo 初始化的文件夹，是博客根目录，可以更换成自己喜欢的文件夹名

1
2
cd blog						# 切换到博客根目录
npm install					# 自动化安装依赖文件，完成 hexo 初始化

以下用 ~/ 指代博客根目录。

hexo 生成静态网页文件

1
hexo generate				# 自动化生成静态网页文件

可选的额外选项：

1
hexo g						# 简化指令

hexo 服务

1
hexo server					# 开启服务

开启hexo服务后，即可通过本地访问 blog 页面（默认为 localhost:4000 ）预览博客页面。

可选的额外选项：

1
2
3
4
hexo s						# 简化指令
hexo s -s					# 静态模式
hexo s -p 5000				# 更改端口
hexo s -i 192.168.1.5		# 自定义ip

hexo 部署

这里通过 Github 的免费托管仓库进行部署博客。

先用 Github 创建一个名为 <username>.github.io 的仓库

以我为例创建的仓库名为 HasegawaAzusa.github.io

在博客根目录下安装 hexo-deployer-git 部署插件

1
npm install hexo-deployer-git --save

更改 hexo 站点配置文件 (~/_config.yml) 中的 Deployment配置项

以我为例更改的配置项结果为

1
2
3
deploy:
  type: git
  repo: git@github.com:HasegawaAzusa/HasegawaAzusa.github.io.git

repo 使用 ssh 链接的原因：我的 git 使用 ssh 与 github 进行远程连接

git 使用 https 与 github 进行远程连接请使用 https 链接

在博客根目录下，输入部署指令

1
hexo deploy					# 部署指令

可选的额外指令

1
2
3
hexo d						# 简化指令
hexo clean					# 清理缓存 (在自动化生成前最好清理缓存)
hexo g -d					# 一个命令完成自动化生成 (generate) 并部署 (deploy)

等待一段时间后，可以通过 https://<username>.github.io 访问自己的博客。

以我为例链接为 https://hasegawaazusa.github.io

hexo 入门

hexo 更新

1
npm update -g hexo-cli		# 使用 npm 更新 hexo

hexo 新建博文

1
hexo new hello				# 新建博文

hello可自由更改，对应生成的md文件名

可选的额外选项：

1
2
3
4
hexo n hello				# 简化指令
hexo n post hello			# 新编博文并立即发布。默认 ~/source/_posts/hello.md
hexo n draft hello			# 新编博文但暂不发布。默认 ~/source/_drafts/hello.md
hexo n page hello			# 新建页面（标签页，分类页等）。默认 ~/source/hello

然后进入 ~/source/_posts/ 找到 hello.md ，打开文件，内容如下

1
2
3
title: hello
date: 1970-1-1 8:00:00
tags: [hello, demo]

该头为 Front-matter ，参数如下：

  • title → 博文标题

  • date → 发布日期，默认为文件创建日期

  • tags → 博文标签

修改后，在正文处输入内容即可编辑博文内容。.md格式文本示例如下：

1
2
3
4
5
6
7
8
---
title: hello
date: 1970-1-1 8:00:00
tags: [hello, demo]
---
# First Blog
This is my **first** blog!
Do you like?

hexo 主题

进入 https://hexo.io/themes/ 进行挑选合适的主题

这里以配置 NexT 主题为例：

打开 Powershell 输入以下命令，安装 NexT 主题

1
npm install hexo-theme-next --save

更改 hexo 站点配置文件 (~/_config.yml) 中的 Extensions配置项

1
theme: next

重新进行网页生成即可

1
2
hexo clean					# 清除缓存
hexo g -d					# 重新生成并部署

了解 NexT 主题的更多信息可以使用NexT 笔记

hexo 博文插入超链接

对于站外的超链接，直接将外站的完整链接贴入括号内即可 ([value](link))，例如

1
点击[这里](https://hasegawaazusa.github.io)进入博客

效果如下

点击这里进入博客

对于站内的超链接，最好使用另一篇博客的 permalink 贴入 (有关 permalink 可参考hexo 配置详解)，例如

1
点击[这里](/hexo-note.html)进入博客

效果如下

点击这里进入博客

若需要导航，可以使用 permalink#title ，例如

1
点击[这里](/hexo-note.html#hexo 博文插入超链接)进入博客

效果如下

点击这里进入博客

hexo 博文插入图片

更改hexo配置文件 (next/_config.yml) 中的Writing配置项

1
post_asset_folder: true

该选项为真时，新建博文会对应生成一个与文章同名的文件夹，可以将相关图片资源放进此文件夹内

在博客根目录下安装hexo-asset-image插件

1
npm install hexo-asset-image --save

将相关图片资源放进对应文件夹并直接使用文件夹内的资源即可。

特别地，对于 Typora 使用者，可以在 文件 - 偏好设置 - 图像 中修改设置：

typorasetting

这样，当 Typora 插入图片时，会自动将图片资源复制进入 hexo 可以检索的 asset 文件夹

hexo 添加标签页

在博客根目录下：

1
hexo new page tags

在 Front-matter 中添加：

1
type: tags
index

完成后 hexo 便会自动生成标签页

记得在菜单中添加进入方式

hexo 添加关于页

在博客根目录下：

1
hexo new page about

在 Front-matter 中添加：

1
type: about

在正文中输入关于页内容即可

记得在添加进入方式

hexo 添加 404 页面

在博客根目录下：

1
hexo new page 404

在 Front-matter 中添加：

1
permalink: /404

在正文中输入你需要的内容即可

如果需要其他自定义页面，可以使用 layout 参数

hexo 配置详解

hexo 博文头 - Front-matter

参数 意义 默认值
layout 排版 config.default_layout
title 标题 文件名
date 发布日期 文件创建日期
updated 更新日期 文件更新日期
comments 简介 true
tags 标签
categories 分类
permalink 永久链接的相对路径 (如/index.html) null
excerpt 纯文本摘录 (需要使用插件Post-Excerpt)
disableNunjucks 是否禁用 Nunjucks 的宏 ({{ }} / {% %}) 和 tag plugins 插件 false
lang 指定语言 _config.yml

hexo 站点配置文件

即 ~/_config.yml 参数详解

网站 - Site

  • title → 博客标题
1
2
3
4
5
6
7
8
# Site
title: Hexo
subtitle: ''				# 博客副标题
description: ''				# 博客描述 (与搜索引擎的收录有关)
keywords:					# 博客关键字，支持多个关键字 (与搜索引擎的收录有关)
author: John Doe			# 博客作者名
language: en				# 博客使用的语言 (可设置为zh-Hans或zh-CN以支持中文)
timezone: ''				# 博客时区 (默认使用电脑时区)

网址 - URL

1
2
3
4
5
6
7
8
# 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						# 博客网址，必须以 http:// 或 https:// 开头
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

一般只需要修改url

目录 - Directory

1
2
3
4
5
6
7
8
9
# Directory
source_dir: source			# 资源文件夹，这个文件夹用来存放内容。
public_dir: public			# 公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags				# 标签文件夹。
archive_dir: archives		# 归档文件夹。
category_dir: categories	# 分类文件夹。
code_dir: downloads/code	# Include code 文件夹， source_dir 下的子目录。
i18n_dir: :lang				# 国际化（i18n）文件夹
skip_render:				# 跳过指定文件的渲染。详见参考

一般无需修改

文章 - Writing

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# Writing
new_post_name: :title.md	# 新文章的文件名称
default_layout: post		# 预设布局
titlecase: false			# 把标题转换为 title case
external_link:
  enable: true				# 在新标签中打开链接
  field: site				# 作用域，网站/文章 (site / post)
  exclude: ''				# 需要排除的域名。主域名和子域名如 www 需分别配置
filename_case: 0			# 把文件名称转换为 (1) 小写或 (2) 大写 (0 = 不转换) 
render_drafts: false		# 显示草稿
post_asset_folder: false	# 启动 Asset 文件夹
relative_link: false		# 把链接改为与根目录的相对位址
future: true				# 显示未来的文章
highlight:					# 代码块的设置, 请参考 Highlight.js 进行设置	
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:					# 代码块的设置, 请参考 PrismJS 进行设置
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

Highlight.js

PrismJS

首页设置 - Home page setting

1
2
3
4
5
6
7
# Home page setting
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''					# 首页的根目录。默认为''
  per_page: 10				# 每页显示文章的数量。默认为 10 (0 = 关闭分页功能)
  order_by: -date			# 显示文章的顺序。默认为 -date (date 是按日期升序排序)

分类 & 标签 - Category & Tag

1
2
3
4
# Category & Tag
default_category: uncategorized		# 默认分类
category_map:						# 分类别名
tag_map:							# 标签别名

日期 / 时间格式 - Date / Time format

1
2
3
4
5
6
7
8
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD			# 日期格式
time_format: HH:mm:ss			# 时间格式
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'			# 当 Front Matter 中没有指定 updated 时 updated 的取值

分页 - Pagination

1
2
3
4
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10					# 每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page			# 分页目录

扩展 - Extensions

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape				# 当前主题名称。值为 false 时禁用主题

部署 - Deployment

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git						# 部署方式
  repo: 						# 库（Repository）地址，SSH比较好
  branch: 						# 可选，分支名称（Github默认为master）
  message: 						# 自定义提交信息（默认为Site updated: {{ now("YYYY-MM-DD HH:mm:ss") }}）