Github+Hexo+matery博客搭建

阅读须知：文章较长主要针对小白，本人电子信息工程专业，目前只学习了C语言编程，对网站的开发几乎为零，所以写次博客记录搭建过程，供后来者参考借鉴。这篇文章篇幅较长，主要针对新手，每一步很详细，建议基础比较好小伙伴根据目录选择自己感兴趣的部分跳着看，基础较不好或者为零的小伙伴建议从头开始，每一个步骤都不要遗漏。

你了解Hexo吗？ Hexo是一个静态博客框架，基于Node.js，将Markdown文章通过渲染引擎，生成一个静态网页，再结合Git命令（ssh），Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

首先，你至少要了解一些GitHub是什么，要会创建自己的GitHub账号。因为我是电子信息专业，所以在这之前我还不知道GitHub是啥，所以就去B站找了相关教程。因为GitHub全都是英文，所以看起来比较复杂，建议大家使用谷歌浏览器，自带翻译。

如果下面的教程有错误之处，请在QQ留言，收到后，我会尽快修改，谢谢支持！

原主题特性:

• 简单漂亮，文章内容美观易读
• Material Design 设计
• 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
• 首页轮播文章及每天动态切换 图片
• 瀑布流式的博客文章列表（文章无特色图片时会有 张漂亮的图片代替）
• 时间轴式的归档页
• 词云的标签页和雷达图的分类页
• 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等）
• 可自定义的数据的友情链接页面
• 支持文章置顶和文章打赏
• 支持
• 目录
• 可设置复制文章内容时追加版权信息
• 可设置阅读文章时做密码验证
• Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 ）
• 集成了不蒜子统计、谷歌分析（）和文章字数统计等功能
• 支持在首页的音乐播放和视频播放功能

增加的工作或特性(未打钩的是已做但还没更新到源码的):

• 加入图片懒加载功能，在根目录配置文件开启和关闭
• 增加功能
• 在关于板块,加入功能页
• 增加视听[视觉听觉影音]板块
• 支持表情，用语法书写直接生成对应的能跳跃的表情。
• 增加网站运行时间显示
• 增加
• 整体替换Banner图片和文章特色图片
• 增加分类功能
• 去掉标签页,将其合并至页中
• 修改了一些控件的参数
• 添加页面樱花飘落动效
• 添加鼠标点击烟花爆炸动效
• 加入天气接口控件
• 加入鼠标点击文字特效
• 添加页面雪花飘落动效
• 添加在线聊天插件
• 运行命令
• hexo clean（清除生成文件），
• hexo g（生成网页），
• hexo s（本地预览），
• hexo d（部署）

本文系统环境信息：

Win10专业版，64位（10.0 版本18362）
Node.js：12.13.0
Git：2.24.0

修改配置文件要用到的软件：
Visual Studio Code（适合有开发基础的程序员，非常好用）

1. 下载Git和Node.js

1.1 Node.js的安装与配置

1.2 Git的安装与配置

这个注册的话我就不多说了，就是登录Github官网，注册一个账号。如果实在不会。这里我推荐一个B站UP:码匠笔记。手把手教你创建。

1.首先选择一个磁盘作为你博客文件的存放位置，然后新建一个文件夹，比如名为的文件夹，创建完后，先不要点进去，在此处点击鼠标右键，选择，然后依次输入如下命令，

1. 本地博客发布到Github Pages

之前的步骤中，我们已经完成了对Github账户的注册以及Github Pages的创建，接下来是将本地博客发布至Github Pages。到目前为止，我们的本地博客就成功搭建了，但是现在我们只能通过本地连接查看博客，我们要做的是让其他人也能够访问我们的博客，这就需要我们将博客部署到Github Pages上

首先需要安装发布的插件，在站点目录下执行下面的命令，也就是创建的博客目录下：

紧接着，将本地目录与GitHub关联起来，输入下面的命令行：

之后会出现

然后会出现：

接下来屏幕会显示：

然后在目录下找到名为的文件夹， 文件夹内会有两个文件，一个一个，用文本编辑器打开，复制里面的的内容。 然后打开Github，点击右上角的头像Settings 选择SSH and GPG keys

点击New SSH key 将之前复制的内容粘帖到Key的框中。 上面的Title可以随意，点击Add SSH key完成添加。

然后回到Git的命令行界面，测试一下是否与GitHub连接成功。输入下面的命令行：

点击回车，然后会出现一个询问内容，输入yes，回车，会出现一段内容，Hi ! You’ve successfully authenticated, but GitHub doesnot provide shell access.。 说明连接成功。此处这个****应该是你Github的用户名。

3.进入博客站点目录，用文本编辑器打开**_config.yml**，这个**_config.yml**是博客的配置文件，在以后的博客修改，如个性化修改，博客SEO优化等都会使用到，修改如下图的几个地方：

滑到文件最底部，有一个deploy，在deploy下面添加一个repo项 ，一个branch项。填入如下代码，并如下图所示：

4.最后就是生成页面，并发布至Github Pages，执行如下命令：、

上传完成后，在浏览器中打开https://<用户名>.github.io，查看上传的网页。如果页面变成了之前本地调试时的样子，说明上传以及完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息，没有的话清除一下浏览器缓存试试.

主题特性

1. 主题下载与安装

点击 主题 下载 分支的最新稳定版的代码，解压缩后，将的文件夹复制到你Hexo的文件夹中即可。

当然你也可以在你的站点目录文件夹下使用命令来下载：直接在站点根目录下执行下面的命令，即可进行主题的下载，主题有两个版本，稳定版本和最新版本(不定期更新优化)，自主选择版本。

2. 主题配置

2.1 切换主题

注意：首先需要明白什么是站点配置文件，什么是主题配置文件，站点配置文件就是根目录下的配置文件，比如我的博客文件在下，那么站点配置文件就是，主题配置文件就是。
另外注意，配置文件中的标点符号不要出现中文格式的标点符号，不然运行会出错。

主题下载完成后，将站点配置文件中的值修改为你下载主题的文件名，此处为，那么值就修改为。

一些站点配置文件的其他地方的修改：

1. 语言选择：如果为中文用户，则在language:后添加值zh-CN，如果不修改，默认为英语；
2. 网址修改：url:的值为你的网址名，如，如果有域名，则修改为你的域名即可，至于有关域名的修改解析，后面我会说到，这里先不说了。
3. 站点配置文件有个per_page属性，建议修改为6的倍数，这样网站在适应设备时，有较好的显示效果。

2.2 新建标签 tags 页面

页是用来展示所有标签的页面，如果在你的博客目录下还没有 文件，那么你就需要新建一个，命令如下：

编辑你刚刚新建的页面文件，至少需要以下内容：

2.3 新建分类 categories 页面

页是用来展示所有分类的页面，如果在你的博客目录下还没有 文件，那么你就需要新建一个，命令如下：

编辑你刚刚新建的页面文件,至少需要以下内容：

2.4 新建关于我 about 页面

页是用来展示关于我和我的博客信息的页面，如果在你的博客目录下还没有文件，那么你就需要新建一个，命令如下：

编辑你刚刚新建的页面文件，至少需要以下内容：

2.5 新建留言板 contact 页面 (可选)

页是用来展示留言板信息的页面，如果在你的博客目录下还没有 文件，那么你就需要新建一个，命令如下：

编辑你刚刚新建的页面文件,至少需要以下内容：

注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。并且在主题的文件中，第至行的“菜单”配置，取消关于留言板的注释即可。

2.6 新建友情链接 friends 页面 (可选)

页是用来展示友情链接信息的页面，如果在你的博客目录下还没有 文件，那么你就需要新建一个，命令如下：

编辑你刚刚新建的页面文件,至少需要以下内容：

同时，在你的博客目录下新建目录，在目录中新建 文件，文件内容如下所示：

2.7 菜单导航配置

2.7.1. 配置基本菜单导航的名称、路径url和图标icon.

1.菜单导航名称可以是中文也可以是英文(如：或)
2.图标icon 可以在Font Awesome 中查找

2.7.2. 二级菜单配置方法

如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作

1.在需要添加二级菜单的一级菜单下添加关键字(如:菜单下添加)
2.在下创建二级菜单的 名称name,路径url和图标icon.
3.注意每个二级菜单模块前要加 -.
4.注意缩进格式

2.8 添加emoji表情支持（可选的）

本主题新增了对表情的支持，使用到了hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的语法（::,例如）转变成会跳跃的表情，安装命令如下：

在 Hexo 根目录下的文件中，新增以下的配置项：

执行 重新生成博客文件，然后就可以在文章中对应位置看到你用语法写的表情了。

2.9 代码高亮

由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：

然后，修改 Hexo 根目录下文件中的值为 ，并新增插件相关的配置，主要配置如下：

2.10 搜索

本主题中还使用到了hexo-generator-search 的Hexo插件来做内容搜索，安装命令如下：

在 Hexo 根目录下的文件中，新增以下的配置项：

2.11 中文链接转拼音（可选的）

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 ，且评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下：

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。

2.12 文章字数统计插件（可选的）

如果你想要在文章中显示文章字数、阅读时长信息，可以安装hexo-wordcount插件。
安装命令如下：

然后只需在本主题下的 文件中，激活以下配置项即可：

2.13 添加 RSS 订阅支持（可选的）

本主题中还使用到了hexo-generator-feed 的Hexo插件来做，安装命令如下：

在 Hexo 根目录下的文件中，新增以下的配置项：

执行重新生成博客文件，然后在文件夹中即可看到文件，说明你已经安装成功了。

2.14 添加 DaoVoice 在线聊天功能（可选的）

前往DaoVoice 官网注册并且获取，并将 填入主题的文件中

2.15 添加 Tidio 在线聊天功能（可选的）

前往Tidio 官网注册并且获取，并将 填入主题的文件中。

2.16 修改页脚

页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的文件中，包括站点、使用的主题、访问量等。

2.17 修改社交链接

在主题的文件中，默认支持和邮箱等的配置，你可以在主题文件的文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码

其中，社交图标（如：）你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识，供你参考：

• Facebook:
• Twitter:
• Google-plus:
• Linkedin:
• Tumblr:
• Medium:
• Slack:
• Sina Weibo:
• Wechat:
• QQ: fab
• Zhihu:

注意: 本主题中使用的Font Awesome 版本为。

2.18 修改打赏的二维码图片

在主题文件的文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。

2.19 配置音乐播放器（可选的）

要支持音乐播放，就必须开启音乐的播放配置和音乐数据的文件。

首先，在你的博客目录下的目录（没有的话就新建一个）中新建 文件，文件内容如下所示：

注：以上 JSON 中的属性： 分别表示音乐的名称、作者、音乐文件地址、音乐封面。
然后，在主题的配置文件中激活配置即可：

3. 文章 Front-matter 介绍

选项详解
选项中的所有内容均为非必填的。但我仍然建议至少填写和 的值

语法使用：

注意:

1. 如果属性不填写的话，文章特色图会根据文章标题的的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。
2. 的值尽量保证每篇文章是唯一的，因为本主题中 和 识别 是通过 的值来作为唯一标识的。
3. 如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。
4. 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则

以下为文章的示例。

示例

4. 自定制修改

4.1 修改主题颜色

在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色

4.2 修改 banner 图和文章特色图

你可以直接在 文件夹中更换你喜欢的 图片，主题代码中是每天动态切换一张，只需 张即可。如果你会 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等， 切换的代码位置在 文件的 代码中：

在 文件夹中默认有 张特色图片，你可以再增加或者减少，并需要在 做同步修改。

如果想改为每小时或者每分钟切换图的话，需要将改为或者即可。

主题DIY会涉及到文件和文件等的修改，个人建议新增的js文件放在这个文件下，这样会稍微加快博客访问的速度。不想花钱​最好的方式是使用。以后会说到。

1. 修改导航栏颜色以及透明效果

打开文件，大约在250行，有一个属性，修改其属性值即可，代码如下：

2. 鼠标点击文字特效

实现方法，引入js文件，在主题文件下的下新建，其代码如下：

3. 修改原有相册

参考教程 hexo博客添加一级分类相册功能

4. 添加天气小插件

首先去中国天气官网：https://cj.weather.com.cn/plugin/pc，配置自己的插件，选择自定义插件—>自定义样式——>生成代码，然后会生成一段代码，复制粘贴到即可。

5. 豆瓣书单电影页面

1.首先在博客站点目录执行下面的命令安装豆瓣插件：

2.紧接着在博客站点目录的配置文件下，添加如下配置：

• user:：你的豆瓣ID。打开豆瓣，登入账户，然后在右上角点击 ”个人主页“，这时候地址栏的URL大概是这样： ，其中的”xxxxxx”就是你的个人ID了。
• builtin：是否将生成页面的功能嵌入 和 中，默认是 ，另一可选项为 。
• title： 该页面的标题。
• quote： 写在页面开头的一段话,支持html语法。
• timeout： 爬取数据的超时时间，默认是 10000ms，如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。
  如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。

3. 然后再主题配置文件中添加关于此页面的菜单：(下面是我的配置)

4.适配Matery主题：在 文件夹下面创建一个名为 的文件，并将下面的内容复制进去：

5.然后在博客站点目录下的node_modules文件夹下找到hexo-douban/lib，文件夹下有三个js文件，分别为：，用文本编辑器打开这三个文件，并将其文件内容末尾的代码修改为一下内容：

6.最后就是使用并生成相应的页面，执行命令如下:

需要注意的是，通常大家都喜欢用 来作为 命令的简化，但是当安装了 之后，就不能用 了，因为 跟 的前缀都是 ，你以后执行的 将不再是 Hexo 页面的生成，而是豆瓣页面的生成。

以下是可选的命令参数：

当站点配置文件的builtin的值为true时，生成页面的功能会嵌入到中，在进行部署生成操作，会自动生成相应的页面。

6. 外链跳转插件

hexo-external-link是一个跳转外链相关插件。自动为所有html文件中外链的a标签生成对应的属性。 比如 设置’ 告诉搜索引擎这是外部链接,不要将该链接计入权重。 同时自动生成外链跳转页面,默认在根目录下 go.html;
使用 npm 或者 yarn 安装

之后再hexo博客站点根目录下添加如下配置:

• enable - 是否开启hexo_external_link插件 - 默认
• enable_base64_encode - 是否对跳转url使用base64编码 - 默认
• url_param_name - url参数名,在跳转到外链传递给html_file_name的参数名 - 默认
• html_file_name - 跳转到外链的页面文件路径 - 默认
• target_blank - 是否为外链的a标签添加target=’_blank’ - 默认
• link_rel - 设置外链的a标签的rel属性 - 默认
• domain - 如果开启了防盗链,除了 localhost 和 domain 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认
• safety_chain - go.html 为了防止外链盗用 对域名进行的判断 - 默认

7. 文章生成永久链接

主题默认的文章链接配置是

这种生成的链接地址很长，文章版权的链接地址会出现一大串字符编码，一点也不好看。因此需要修改文章生成链接的格式。
首先再根目录下执行下面的命令：
hexo-abbrlinkGitHub地址

然后再站点配置文件下添加如下配置：

再将站点配置文件的的值修改为：

生成完后，原md文件的Front-matter 内会增加 字段，值为生成的 。这个字段确保了在我们修改了 内的博客标题title或创建日期date字段之后而不会改变链接地址.

1.购买域名

2.添加CNAME文件

3.仓库配置

1. nmp速度优化

为啥要进行npm优化？因为利用nmp下载插件的下载速度着实是有点慢。
由于下面内容会安装较多的插件，建议先更改npm仓库地址，以便能更快的安装插件

• 阿里的淘宝团队在国内做了个跟npm仓库一样的镜像叫cnpm。
• 淘宝镜像与npm官方包的同步频率目前为10分钟一次，来保证尽量与官方服务同步。
• 所以二者可以说是一样，不用担心有什么差别。

通过改变地址来使用淘宝镜像（推介）

npm的默认仓库地址是 https://registry.npmjs.org/
可以使用以下命令查看当前npm的仓库地址

可以使用以下命令来改变默认下载地址，从而达到不安装cnpm就能采用淘宝镜像的目的，然后使用上面的get命令查看是否设置成功。

安装CNPM

安装cnpm，命令：

安装后，使用以下命令测试是否安装成功

成功后，以后都使用 cnpm 代替以前 npm 来执行命令！

2. 图片懒加载

知识小课堂：图片加载方式有两种，一个是预加载，另一个就是懒加载，那你了解什么是预加载和懒加载吗？下面来学习一下。

参考：图片预加载与图片懒加载（缓载）的区别与实现

• 图片预加载：顾名思义，图片预加载就是在网页全部加载之前，提前加载图片。当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，这样浏览者可能以为图片预览慢而没兴趣浏览，把网页关掉，这时，就需要图片预加载。当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验。
• 图片懒加载（缓载）：延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数，因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
  预加载与懒加载的区别之处：

两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预载则会增加服务器前端压力。

使用图片懒加载需要安装插件：hexo-lazyload-image
在站点根目录执行下面的命令：

之后在站点配置文件下添加下面的代码：

最后执行hexo clean && hexo g && hexo s就可以看到效果了。

3. 代码压缩

方法一：gulp代码压缩

因为hexo生成的html、css、js等都有很多的空格或者换行，而空格和换行也是占用字节的，所以需要将空格换行去掉也就是我要进行的“压缩”。

有人说空格换行能占多少字节？确实占不了多少，但是一个人访问是这么多字节，那么一百人，一万人呢？加起来这量就不少了吧，这都是流量啊！这也是很多css/js文件的后缀为.min.js或.min.css的原因。虽然我们可能没那么多访问量，但是能减小一点资源文件的大小也是对访问速度有那么一点提升的。

我们采用gulp代码压缩方式。

使用方法:
1.进入站点根目录下依次执行下面的命令：

2.在Hexo根目录新建文件，并复制以下内容到文件中，有中文注释，可以根据自己需求修改。

3.以后的执行方式有两种：

• 直接在Hexo根目录执行 或者 ，这个命令相当于 并且再把代码和图片压缩。

• 在Hexo根目录执行 ，这个命令与第1种相比是：在最后又加了个 ，等于说生成、压缩文件后又帮你自动部署了。

值得注意的是：这个加入了图片压缩，如果不想用图片压缩可以把第154行的 , 和第165行的 , 去掉即可。