window10系统使用hexo搭建个人博客

最难的是定位导致问题的操作　　　　——题记

搭建步骤：

安装node.js
安装git
安装hexo，完成本地的访问
将网站部署到Github上

1. 安装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命令下执行如下两个命令：

npm 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安装成功！

2. 安装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 '注册时候的邮箱';
即可

3. 安装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 即可。

至此，生成的博客可以在本地查看。完成到这一步，用了将近七个小时。

4. 将网站部署到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新建的仓库的地址）：

deploy:
  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/））。

hexo clean
hexo g
hexo d

如果上述命令不好使，可以尝试：hexo clean && hexo g && hexo d （注意要切换成英文输入法）。

至此，生成的博客可以在各个终端访问！

5. 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 文件夹下。
把站点配置文件（根目录下的：_config.yml）中的 theme: xxx 中的xxx改为：next 。此处要注意冒号后面有一个空格不可删除！（详情请参考：标记语言YAML的语法格式）
然后依次输入以下三条命令（此处输入命令的时候，必须是在上述用hexo初始化的文件夹下面打开 git bash（ hexo init 文件夹））。

hexo clean
hexo g
hexo d

如果上述命令不好使，可以尝试：hexo clean && hexo g && hexo d （注意要切换成英文输入法）。以后每次修改站点配置文件 / 修改主题配置文件 / 新建博客 / 新建页面，都需要执行步骤3 / 或步骤4 更新GitHub上的部署（到目前为止，步骤3 或步骤4 总有一个是好使的，如果出现两个都不好使的情况，就等一下再刷新一下看看，最新的测试表明确实会有10s左右的延迟）

5.next主题有4种布局风格。可以在 themes/next/_config.yml （主题配置文件）中进行next主题风格的修改。主题配置文件还可进行：修改菜单目录等其他操作，将在下文进行介绍。详情可以参考：
Next主题个性化配置

6. 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 前面的 # 删除（默认有首页和归档两个菜单）。

# ---------------------------------------------------------------
# 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个默认菜单对其。

menu:
  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主题更改语言

写一篇博客

参考资料：
使用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首页只显示部分摘要

后记

在安装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' 不是内部或外部命令，也不是可运行的程序的解决方法这篇文章提供的思路，终于解决了这个问题。这也是整个过程中遇到的最棘手的一个问题。因为无法确定是哪一步的操作导致了这个问题。

window10系统使用hexo在GitHub pages上搭建个人博客2020-07-28

window10系统使用hexo搭建个人博客

1. 安装node.js

2. 安装git & 初始化用户名和邮箱

3. 安装hexo

4. 将网站部署到Github上

5. hexo更改主题

6. hexo基本配置

为Hexo的Next主题增加自定义menu菜单

一、添加主题配置文件中8个默认定义的menu菜单，分别是home、about、tags、categories、archives、schedule、sitemap、commonweal

二、添加主题配置文件中8个默认定义的menu菜单之外的其他菜单

Next主题开启字数统计和阅读时长统计

Hexo提供的3种默认的布局post、page和draft的用法

日历云和分类雷达图

hexo添加新菜单并实现新菜单的文章归类

NexT主题更改语言

写一篇博客

设置hexo首页只显示部分摘要（不显示全文）

后记

你可能感兴趣的:(window10系统使用hexo在GitHub pages上搭建个人博客2020-07-28)