以前使用docsify管理文档，如果个人使用，功能基本满足要求，但docify的显示theme不能令我满意。
最近发现了Hexo搭建博客的介绍，并且相关开发人员比较活跃，决定尝试一下。
开始阅读hexo的文档有些迷糊，后来看过其它文章，才渐渐明白hexo的使用，与相关主题的使用密不可分，可能用到最后，都是自己开发适合自己的theme……
我选择了一个比较喜欢的主题maupassant,试用后，感觉作者的活跃度不够，很多地方不是很理想，最后还是使用用户比较多的NexT主题。
文档项目创建
初始化hexo目录
主要步骤Hexo 首页上列出：
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server
Hexo init生成的目录文件说明参考Hexo doc 建站
添加git管理
考虑到备份，修改等需要，将hexo文档目录添加git管理
git init
网上有几种git管理theme的方式：
- 直接从github下载主题zip，添加到自己的git服务器中
- 使用外部配置，替换theme中的默认_config.yml,参考：Hexo-Theme-NexT主题自定义设置：论theme_config与next.yml方法的差异及取舍，这个时候theme的源码可以试用git submodule管理：
git submodule add https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
- 使用npm添加（hexo 5.0版本以上）,例如NexT的添加:
npm install hexo-theme-next
# _config.yml
# theme: next
添加 NexT theme
从 https://hexo.io/themes/查找主题next，获取github路径：
The upstream repository of theme NexT has been changed.
2014-2017 https://github.com/iissnan/hexo-theme-next
2018-2019 https://github.com/theme-next/hexo-theme-next
2020 https://github.com/next-theme/hexo-theme-next
In order to get the latest update, please backup files of the legacy theme NexT, and execute the following command
git clone https://github.com/next-theme/hexo-theme-next themes/next
For Hexo 5.0 or later
npm install hexo-theme-next
Documentation
下载最后发布版本源码zip，解压缩到themes/next目录
参考：Hexo-Theme-NexT主题自定义设置：论theme_config与next.yml方法的差异及取舍
几种使用theme的方式，最后还是采用源码方式（有时可能需要直接修改源码比较方便）
修改NexT主题配置
Hexo的配置修改，包括_config.yml中的站点配置，还有_config.next.yml中的主题配置
站点配置
diff --git a/_config.yml b/_config.yml
index 98bf35f..0b7181e 100644
--- a/_config.yml
+++ b/_config.yml
@@ -3,17 +3,17 @@
## Source: https://github.com/hexojs/hexo/
# Site
-title: Hexo
-subtitle: ''
+title: iticd
+subtitle: '一年又一年…… 知而不行，是为不知；行而不知，可以致知'
description: ''
keywords:
-author: John Doe
-language: en
-timezone: ''
+author: iticd
+language: zh-CN
+timezone: 'Asia/Shanghai'
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
-url: http://yoursite.com
+url: http://iticd.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
@@ -28,7 +28,7 @@ tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
-i18n_dir: :lang
+i18n_dir: :languages
skip_render:
# Writing
@@ -52,7 +52,7 @@ highlight:
wrap: true
hljs: false
prismjs:
- enable: false
+ enable: true
preprocess: true
line_number: true
tab_replace: ''
主题配置
添加「标签」页面
添加「分类」页面
代码块
通过预览NexT Highlight Theme Preview，选择代码高亮样式：
站点配置修改：
highlight:
enable: false
...
prismjs:
enable: true
...
主题配置修改：
codeblock:
# Code Highlight theme
# All available themes: https://theme-next.js.org/highlight/
...
prism:
light: prism-tomorrow
dark: prism-tomorrow
...
字体
修改字体，字号：
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.njk
#header: source/_data/header.njk
#sidebar: source/_data/sidebar.njk
#postMeta: source/_data/post-meta.njk
#postBodyEnd: source/_data/post-body-end.njk
#footer: source/_data/footer.njk
#bodyEnd: source/_data/body-end.njk
variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
#style: source/_data/styles.styl
在source/_data/variables.styl中配置字体属性，避免修改next源码：
// Title Font, set it to font family you want.
$font-family-headings = Georgia, sans
// Set it to font family you want.
$font-family-base = "Microsoft YaHei", Verdana, sans-serif
// Code Font.
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace
// Font size of articles.
$font-size-base = 14px
// Font size of table and code.
$table-font-size = 12px
Next 能加载用户自定义的样式，同样也能加载用户自定义样式使用的变量。然而同样比较可惜的是，自定义样式使用的变量里的定义（source/_data/variables.styl），不能覆盖变量默认定义的值（hexo-next-theme/source/css/_variables/）。但是你可以在默认定义里注释掉变量后，在自定义变量里重新定义并赋值。
写博客
修改文档模板
根据需要，修改Hexo目录下生成的文档模板，scaffolds/draft.md，scaffolds/post.md
---
title: {{ title }}
date: {{date}}
update: {{date}}
tags:
categories:
---
添加文章
添加博客文章，执行：
hexo new post <title>
在source/_posts目录生成title.md文件，文章内容直接在md文件中修改，例：
---
title: hexo个人博客搭建（theme next）
date: 2020-08-25 11:13:27
updated: {{date}}
tags:
- Hexo
- 个人博客
categories:
- 个人博客系统
- Hexo
---
这里填写文章摘要……
<!--more-->
这里填写文章正文……
标签，分类
文档里的图片路径
使用固定的图片资源目录
资源（Asset）代表 source 文件夹中除了文章以外的所有文件，例如图片、CSS、JS 文件等。比方说，如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于
[图片上传失败...(image-fa1c2a-1598453205685)]的方法访问它们。
使用文章资源文件夹
对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。
注：使用vscode进行md文件编辑时，由于路径原因，预览插件显示图片异常。
github 部署
修改_config.yml
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo:
github: https://github.com/iticd/iticd.github.io.git
gitee: https://gitee.com/iticd/iticd.git
branch:
注：可以同时部署多个站点
本地安装插件,部署
npm install hexo-deployer-git --save
hexo d
添加gitalk评论
- 在github创建一个新仓库
- 创建OAuth Apps （成功后记录client_id，client_secret）
- 修改主题配置文件中gitalk配置
- 重新部署
hexo clean && hexo d -g
参考
Hexo
Heox theme NexT
easy hexo
打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化
Hexo-Theme-NexT主题自定义设置：论theme_config与next.yml方法的差异及取舍
git submodule 使用小结
Markdown - 简单的世界
