window10系统使用hexo在github pages上搭建个人博客
在黑暗中摸索前行，是一种勇气，也是一种精神。
搭建步骤：
- 安装node.js
- 安装git
- 安装hexo，完成本地的访问
- 将网站部署到Github上
安装node.js
参考资料：
1.https://blog.csdn.net/antma/article/details/86104068
2.https://www.cnblogs.com/aizai846/p/11441693.html
补充内容：
- 在参考资料1步骤3：配置npm在安装全局模块时的路径和缓存cache的路径 中要注意3点：
配置自定义的全局模块安装目录：在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令：
1
2npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"的时候,要注意改成自己电脑上新建的node_global和node_cache文件夹的路径。
在环境变量 -> 系统变量（注意此处为系统变量）中新建一个变量名为 “NODE_PATH”， 值为“D:\Program Files\nodejs\node_modules”
此处有错误，正确步骤为：1.在系统变量中新建一个变量名为 “NODE_PATH”， 值为
“D:\Program Files\nodejs\node_global”；2.在系统变量path中添加路径：%NODE_PATH%\编辑 用户变量 里的Path，将相应npm的路径改为 D:\Program Files\nodejs\node_global （原来是：C:\Users\lenovo\AppData\Roaming\npm）
这一点的目的一个和：配置npm在安装全局模块时的路径有关。因为这个路径默认是：C:\Users\lenovo\AppData\Roaming\npm，刚好是模块的默认安装地址。改成 D:\Program Files\nodejs\node_global 之后，执行安装模块的命令（比如：npm install webpack -g），会发现 node_global 文件夹下出现新安装模块的一些配置文件。
所以第二点的目的应该是：使安装的各个模块的命令（比如：hexo g）在任意路径下可用。因为第二点配置的路径下面有很多可执行文件（.cmd）
此处要注意两点：
1.更改的环境变量是：用户变量中的path（平时一般更改的是系统变量的path，这里在系统变量里是找不到该路径的。）
2.同第一步，要注意改成自己电脑上新建的node_globa文件夹的目录。
- 在参考资料1步骤4：测试 中要注意1点：
即：完成步骤四的测试之后，要需要测试：webpack -v 命令是否能执行。如果能执行，说明上面第二点和第三点的配置没有问题。
这也是后续使用hexo命令的关键步骤！如果此处测试通不过，后续使用hexo init、hexo g等命令的时候会提示不是内部命令！！！如果后面出现此类情况，请第一时间检查环境变量！！！！！！
至此，node.js安装成功！
安装git & 初始化用户名和邮箱
参考资料:
https://www.cnblogs.com/ximiaomiao/p/7140456.html
补充内容：
上述参考资料完成到:
三、Git初始化及仓库创建和操作
1、Git安装之后需要进行一些基本信息设置
a、设置用户名：git config — global user.name ‘你再 github上注册的用户名’;
b、设置用户邮箱：git config — global user.email ‘注册时候的邮箱’;
即可
安装hexo
前面git和nodejs安装好后，就可以安装hexo了。
参考资料：
1.https://www.zhihu.com/tardis/sogou/art/44213627
2.https://www.himmy.cn/2019/07/06/hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/各个步骤的反馈
内容补充：
创建一个文件夹 blog，然后在这个文件夹下直接右键 git bash 打开。
输入命令：”npm install -g hexo-cli”， 执行会比较慢，需要耐心等待。
用 hexo -v 查看一下版本，至此所需要的环境：node.js、git和框架：hexo就全部安装完了。
初始化一下hexo：hexo init myblog 执行会比较慢，需要耐心等待，失败了删掉 myblog 文件夹重来即可。
此命令会在步骤1新建的 blog 文件夹下面新建一个 myblog 文件夹，初始化的是myblog文件夹。 myblog文件夹里面是整个 hexo 框架的内容。以后更改主题、发布博客都在myblog文件夹下进行操作。
如果初始化使用命令：hexo init 则会初始化步骤1新建的blog文件夹
新建完成后，指定文件夹目录下有：
node_modules: 依赖包
public：存放生成的页面
scaffolds：生成文章的一些模板
source：用来存放你的文章
themes：主题
_config.yml: 博客的配置文件，学名为：站点配置文件，遵循标记语言YAML的语法格式（参考资料:https://www.jianshu.com/p/cea930923f3d）依次执行命令：hexo g （生成静态文件）和 hexo s （启动服务器）
在浏览器中输入：http://localhost:4000/ 可以在本地查看生成的博客
使用 ctrl+c 可以把服务关掉。以后如果想在本地预览博客，使用 hexo s 命令启动服务器即可。但是要注意：git Bash Here 打开的位置必须位于步骤4初始化的文件夹里，可以参考配置文件 _config.yml 的位置，在能看到配置文件 _config.yml 的目录下打开 git Bash Here 即可。
至此，生成的博客可以在本地查看。完成到这一步，用了将近七个小时。
将网站部署到Github上
首先申请一个github账号，然后点击 create repository，按照：自己的昵称+.github.io 建立一个仓库（repository）（将来要部署到GitHub page的时候，才会被识别例：yuan-128.github.io）
在Blog目录下安装一个hexo部署插件 cnpm install —save hexo-deployer-git
将hexo和GitHub关联起来，也就是将hexo生成的文章部署到GitHub上：打开站点配置文件 _config.yml（不是主题配置文件，记事本打开即可），找到 deploy，改成（其中 repo ：后面的连接是你在步骤1新建的仓库的地址）：
1
2
3
4deploy:
type: git
repo: https://github.com/你的GitHub昵称/你的GitHub昵称.github.io.git
branch: master然后依次输入以下三条命令（此处输入命令的时候，必须是在上述用hexo初始化的文件夹下面打开 git bash（ hexo init 文件夹）），当出现： INFO Deploy done : git 时，说明部署成功，然后就可以在 http://你的GitHub昵称.github.io 这个网站看到你的博客了（（例：https://yuan-128.github.io/））。
1
2
3hexo clean
hexo g
hexo d- 如果上述命令不好使，可以尝试：hexo clean && hexo g && hexo d （注意要切换成英文输入法）。
至此，生成的博客可以在各个终端访问！
hexo更改主题
参考资料：
1.https://www.cnblogs.com/lijianming180/p/12401796.html
2.https://www.cnblogs.com/songtianfa/p/11462386.html
3.hexo主题：https://hexo.io/themes/
4.next主题配置文件：http://theme-next.iissnan.com/theme-settings.html
5.next主题个性化配置：https://www.jianshu.com/p/208f2c4e3a16
补充内容：
- 命令解释：git clone 克隆地址 克隆之后的本地位置
如果要使用 next 主题，则克隆地址为：https://github.com/theme-next/hexo-theme-next （不要用：https://github.com/iissnan/hexo-theme-next 因为这个是2年前的next了），克隆之后的本地位置都写：themes/next ，指的是把主题文件下载到根目录下的 themes 文件夹下（在哪个文件夹下面打开 git bash就下载到哪个文件夹，后面可以指定相对路径，当然也可以用绝对路径）。 - 把站点配置文件（根目录下的：_config.yml）中的 theme: xxx 中的xxx改为：next 。此处要注意冒号后面有一个空格不可删除！（详情请参考：标记语言YAML的语法格式）
- 然后依次输入以下三条命令（此处输入命令的时候，必须是在上述用hexo初始化的文件夹下面打开 git bash（ hexo init 文件夹））。
1
2
3hexo clean
hexo g
hexo d 如果上述命令不好使，可以尝试：hexo clean && hexo g && hexo d （注意要切换成英文输入法）。以后每次 修改站点配置文件 / 修改主题配置文件 / 新建博客 / 新建页面，都需要执行步骤3 / 或步骤4 更新GitHub上的部署（到目前为止，步骤3 或 步骤4 总有一个是好使的，如果出现两个都不好使的情况，就等一下再刷新一下看看，最新的测试表明确实会有10s左右的延迟，延迟时间会随着文章内容的增加而增加）
next主题有4种布局风格。可以在 themes/next/_config.yml （主题配置文件）中进行next主题风格的修改。主题配置文件还可进行：修改菜单目录等其他操作，将在下文进行介绍。详情可以参考：
Next主题个性化配置
hexo基本配置
参考资料：
1.hexo官方配置文档
2.站点配置文件和主题配置文件
为Hexo的Next主题增加自定义menu菜单
一、添加主题配置文件中8个默认定义的menu菜单，分别是home、about、tags、categories、archives、schedule、sitemap、commonweal
参考资料：
1.https://blog.csdn.net/mqdxiaoxiao/article/details/93644533
补充内容：
- 以添加 tags 菜单为例：
步骤1：在根目录下打开 git bash，执行命令：hexo new page "tags"；结果：在source文件下创建 tags 文件夹，文件夹下还会创建一个 index.md 文件；
步骤2：打开步骤1 tags 文件夹下的 index.md 文件，增加type: "tags"（title和date是默认生成的，无需改动。如果是 categories 菜单，则应该增加：type: “categories”）；有的地方说还应该加入：layout: "tags"，从目前的测试结果来看，不加没有问题。
步骤3：在主题配置文件中找到 menu ，把 tags 前面的#删除（默认有首页和归档两个菜单）。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link.
# Value after `||` delimiter is the name of FontAwesome icon. If icon (with or without delimiter) is not specified, question icon will be loaded.
# External url should start with http:// or https://
menu:
home: / || home
#about: /about/ || user
#tags: /tags/ || tags
#categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat - 如果没有做步骤2，则会出现：在 _post 里面已经给 .md 文件头上上加上了 tags，在预览时，文章也是可以看到标签存在的，而在点击标签菜单时，没有显示所定义的标签。详情请参考： hexo 标签页不显示标签云
二、添加主题配置文件中8个默认定义的menu菜单之外的其他菜单
参考资料：
1.NexT主题的优化定制修改指南：(6) 添加自定义菜单
2.Hexo云标签和分类的使用。
补充内容：
- 以添加 书单 菜单为例：
步骤1：在根目录下打开 git bash，执行命令：hexo new page "book"；结果：在source文件下创建 book 文件夹，文件夹下还会创建一个 index.md 文件；
步骤2：打开步骤1 book 文件夹下的 index.md 文件，增加type: "book"（title和date是默认生成的，无需改动。type 的值要和步骤1中新建的文件夹名称保持一致）
步骤3：在主题配置文件中找到 menu ，增加：book: /book/ || fa fa-book，此处要注意空两个英文输入法的空格，和上面8个默认菜单对齐。
步骤4：此时新加的 书单 菜单已经能正常显示，只不过显示的名称是： book ，在：根目录\themes\next\languages\zh-CN.yml 文件夹中，找到 menu，在最后一行添加：book: 书单就可以实现显示名称为：书单 的菜单了，此处要注意和上面8个默认菜单对其。1
2
3
4
5
6
7
8
9
10
11
12menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益 404
film: 电影
book: 书单 book: /book/ || fa fa-book解释：
book： 步骤1中新建的文件夹的名称，也是博客中显示的菜单的名称，可以通过映射的方式改成 “书单”，如上述步骤4所述。但其实此处也可以直接用书单: /book/ || fa fa-book，这样，无需修改根目录\themes\next\languages\zh-CN.yml 文件夹，博客中就会显示 “书单”。
/book/： 要和步骤2中 index.md 文件中添加的 type 的值一致。为了方便管理，我们一般保持：新建文件夹名称、index.md 文件的 type 值、xxx1: /xxx2/ || fa fa-book中的 xxx1 和 xxx2 保持一致。
fa fa-xxx： xxx为fontawesome.com中的一个图标名称，对应唯一一个图标，用于显示新建菜单前的图标，不添加会显示问号。比如：book 在fontawesome.com 中对应的图标就是一本书，其实一些简单的图标对应的就是一些简单的单词，比如：film 对应的就是电影的图标。
Next主题开启字数统计和阅读时长统计
参考资料：
1.Hexo Next主题开启字数统计和阅读时长统计
2.Hexo博客NexT主题下添加字数统计和阅读时长
补充内容：如果出现疑问，请详细阅读更改的配置文件部分的注释。
Hexo提供的3种默认的布局post、page和draft的用法
参考资料：
1.Hexo提供的3种默认的布局post、page和draft的用法
2.修改默认的post和draft的模板
日历云和分类雷达图
参考资料：
Hexo主题美化 | 给你的博客加上GITHUB日历云和分类雷达图
hexo添加新菜单并实现新菜单的文章归类
参考资料：
hexo添加新菜单并实现新菜单的文章归类
NexT主题更改语言
参考资料：
NexT主题更改语言
写一篇博客
参考资料：
使用hexo+github搭建免费个人博客详细教程：写博客
补充内容：
hexo new "new article"，结果：在source/_posts/目录下新建 new article.md 文件（后来发现其实也可以直接自己新建一个 .md 文件，不过不建议这种做法，因为通过这种方式创建的文章头部没有 title、date、tags 和 categories。这是因为通过执行hexo new "new article"命令的方式新建文章时，是根据 scaffolds 目录下的新建页面的模板来完成的。详情可以参考：scaffolds目录）hexo g -d & hexo s然后在 localhost:4000 查看- 最后上传命令
hexo d直到出现输入GitHub账号密码时，方为成功（有时候不输入密码也会成功）。 - 如果上述命令不好使可以直接使用：
hexo clean && hexo g && hexo d，这样就直接更新部署在GitHub上的个人博客了。建议事先使用hexo s命令在本地预览一下。 - 以后每次新建或修改文件内容，都需要重新进行上述四个步骤。
设置hexo首页只显示部分摘要（不显示全文）
参考资料：
hexo首页只显示部分摘要
修改文章间分割线
参考资料：
Hexo的入门教程及Next主题配置：38.修改文章间分割线
后记
在安装cnpm的时候已经貌似出现了问题。勉强走到hexo安装完之后，在 hexo -v 一步发生不是内部或外部命令的错误。其实根据之前配置 python 和 Java 环境变量的经验，就应该想到是环境变量的问题，但由于根本不理解这些文件以及步骤之间的联系，一开始并没有想到是环境变量的问题。网上的教程说这一步会很慢，容易出错等等，所以以为是下载过程中出了问题。
在经历了 1. 多次重复执行命令；2. 搜索报错内容；之后，开始静下心来回顾整个步骤，去翻看创建的各个文件夹。突然回想起最开始安装node.js时，在测试步骤 查看安装的 webpack 包的版本信息时的命令语句，尝试了一下 cnpm 和 hexo 之后，发现可行。然后测试 webpack -v 发现也是不能识别的内部或外部命令。这个时候已经看到了一丝曙光，
然后开始分析：hexo -v 和 npm hexo -v 的区别。最终问题定位到环境变量的配置上，而不是安装过程出了问题。然后根据 node.js安装后输入“node -v”提示’node’ 不是内部或外部命令，也不是可运行的程序的解决方法 这篇文章提供的思路，终于解决了这个问题。这也是整个过程中遇到的最棘手的一个问题。因为无法确定是哪一步的操作导致了这个问题。
2020.08.01补充：hexo next主题如何加头像
参考资料：
补充内容：
把你的要加的头像修整好，最好是像素200×200的，复制粘贴到\themes\next\source\images文件下，图片名称为：xxx.xxx
打开主题配置文件找到：
avatar字段，把url: #/images/avatar.gif改为：url: /images/xxx.xxx
1 | # Sidebar Avatar |
2020.08.26补充：hexo文章中插入图片
参考资料：
2.三种方案简介1
3.三种方案简介2
补充内容：
- 本文用到的是安装hexo-asset-image插件的方法，完整步骤参考：Hexo中添加本地图片
- 关于hexo-asset-image插件的说明：hexo支持使用标签插件：
来实现在文章中插入图片。即把资源文件管理功能打开后（将config.yml文件中的post_asset_folder选项设为true），即可在文章中使用上述标签插件实现在文章中插入图片的功能。hexo并不支持使用markdown 语法（）实现在文章中插入图片的功能。如果想用markdown语法的方式在文章中插入图片，那么就需要在打开资源文件管理功能的基础上，再安装hexo-asset-image插件。此处hexo-asset-image可以理解为一个转换接口，可以把markdown语法转化为标签插件。 - 安装完hexo-asset-image插件之后，并没有正常显示。而是在刷新多次之后才可以显示。这个问题没有查清原因。可能是网络问题，但也不排除别的错误。
2020.11.03补充：hexo添加评论系统-Valine
参考资料：
补充内容：
LeanCloud 原名 AVOS Cloud。是一个简单易用的云服务器，其中包含了强大的数据库支持，我们只需要将此服务器应用到本地的代码即可实现后台的存储与交互。可以为移动应用开发者提供稳定可依赖的后端云服务，包括存储、账号管理、社交分享、推送、应用统计等以及相关的技术支持和服务。
Valine 诞生于2017年8月7日，是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。理论上支持但不限于静态博客，目前已有Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用Valine。
注册Leancloud：Leancloud官网，点我注册。注册完成之后，需要在邮箱里认证一下。
创建一个应用：登录注册的账号和密码（双核浏览器无法登录，Firefox可以，具体原因未知），创建一个应用，名字可以随便起，然后 进入创建的应用->设置->应用key获取你的appid 和 appkey。
打开主题配置文件 搜索 valine，填入appid 和 appkey；注意：要把原来的#以及后面的内容全部删掉，或者在#前面添加一个空格。否则会报错：401: 未经授权的操作,请检查你的AppId和AppKey；然后填入appid 和 appkey。
登录Valine查看评论目前只有谷歌浏览器可以正常登录。具体原因未知。
1
2
3
4
5
6
7
8valine:
enable: true
appid: your app id
appkey: your app key
notify: false # Mail notifier
verify: false # Verification code
placeholder: Just go go # Comment box placeholder
avatar: mm # Gravatar style在Leancloud -> 设置 -> 安全中心 -> Web 安全域名 把你的域名加进去：https://yuan-128.github.io/
Valine上的评论内容：https://leancloud.cn/dashboard/data.html?appid=tqCGsEMDMH8D9uah0oMuDCR8-gzGzoHsz#/
2020.12.22补充：Hexo博客开发之——博客加密
参考资料：
补充内容：
npm install --save hexo-blog-encrypt时间较长，请耐心等待（开VPN速度会快很多）；- Local Storage可以理解为浏览器的本地数据库；
- 在执行hexo clean（也可能是其他原因）命令之后，会出现：
TypeError: data.forEach is not a function的错误；反复执行npm uninstall hexo-blog-encrypt和npm install --save hexo-blog-encrypt多次即可回复正常（卸载hexo-blog-encrypt两次，再安装一次），具体原因未知，初步推测因为hexo-blog-encrypt重复安装发生冲突； - 经测试，修改完博客之后，执行
hexo g && hexo d命令可正常部署加密博客； - 在_posts文件夹中的文件内添加：
password: xxxxx不会报错，但在与__posts文件夹并行的文件夹中的文件内添加会报错；
2021.01.08补充：设置 SSH 使用 hexo deploy 时免输用户名密码
参考资料：
补充内容：
检查是否已经存在SSH密钥：如果没有设置过则会显示：找不到目录或文件：
$ cd ~/.ssh生成SSH密钥；其中，your_email@example.com处填写GitHub绑定的邮箱；
1
2
3
4
5
6$ ssh-keygen -t rsa -C "your_email@example.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/home/you/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
# 三次提示输入都可以直接回车跳过，其中，生成的SSH密钥在：C:\Users\username\.ssh\id_rsa.pub仓库网址：在上述网址中把C:\Users\username.ssh\id_rsa.pub（记事本打开）中的内容添加进去；
注意：添加完提交之前，要勾选write的权限。保证提交完之后权限是：Last used within the last week — Read/write；
如果GitHub页面上的某个按钮连接打不开，则右键：在新标签页打开连接即可；
测试配置是否成功:
1
2
3
4$ ssh -T git@github.com
#测试配置是否成功,出现以下内容即表示配置完成并且成功:
Hi username! You've successfully authenticated, but GitHub does not
provide shell access.更改
hexo的配置文件_config.yml中的deploy属性1
2
3
4
5
6# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https:yuan-128/yuan-128.github.io.git
branch: master改为：
1
2
3
4
5
6# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:yuan-128/yuan-128.github.io.git
branch: master
2021.01.15补充：Hexo博客支持数学公式
参考资料：
补充内容：
更换 Hexo 的 markdown 渲染引擎，执行命令：
1
2npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save然后，更换引擎后行间公式可以正确渲染了，但是这样还没有完全解决问题，行内公式的渲染还是有问题，因为 hexo-renderer-kramed 引擎也有语义冲突的问题。接下来到博客根目录下，找到node_modules\kramed\lib\rules\inline.js，做相应的修改：
1
2
3
4
5
6
7var inline = {
// 第2行修改
escape: /^\\([`*\[\]()#$+\-.!_>])/,
...
// 第20行修改
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
};在 Next 主题中开启 MathJax 开关：
找到根目录下的/themes/next/_config.yml文件，按下Ctrl+F，在弹出的搜索框中输入mathjax查找匹配项，然后你找到了这样几行字,把 math 默认的 false 修改为true；
1
2
3
4
5
6
7
8
9
10
11
12# Math Formulas Render Support
math:
# Default (true) will load mathjax / katex script on demand.
# That is it only render those page which has `mathjax: true` in Front-matter.
# If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
per_page: true
# hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
mathjax:
enable: true
# See: https://mhchem.github.io/MathJax-mhchem/
mhchem: true在需要使用数学公式的文章的Front-matter里打开mathjax开关，考虑只有在用到公式的页面才加载 Mathjax，这样不需要渲染数学公式的页面的访问速度就不会受到影响了。如下：
1
2
3
4
5
6
7
8---
title: Python实现RSA算法
categories: 密码学
tags: RSA
abbrlink: 49034
mathjax: true
date: 2020-08-02 09:16:24
---
Steam导致的端口占用错误（2021.01.15补充）
错误：
1 | ssh: connect to host github.com port 22: Connection refused |
原因：安装的Stean++占用了22端口（SSH的专用端口），退出即可。
TypeError: data.tags.forEach is not a function（2021.12.21补充）
错误：（这错误让我很迷啊。。。完全无法定位。。。get没有丝毫有用的信息。。。）
1 | lenovo@LAPTOP-UVJIITF9 MINGW64 /e/2020_03_06benjiruanjian/myblog2020_07_28/blog |
原因：由于_post目录之外的.md文件不能包括categories和tags这两个属性，导致报错。
解决：将_post目录之外的.md文件中的categories和tags两个属性去掉，如：film、English。
参考资料：