Github+Hexo+matery博客搭建

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

前言

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

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

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

主题介绍

原主题特性:

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

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

加入图片懒加载功能，在根目录配置文件开启和关闭
增加留言板功能
在关于板块,加入简历功能页
增加视听[视觉听觉影音]板块
支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情。
增加网站运行时间显示
增加动漫模型
整体替换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的安装与配置

首先去Node.js官网下载node.js的安装程序，根据你电脑系统的配置信息，下载对应的安装程序，然后开始进行下面的步骤
下载好与电脑系统对应的安装程序后，开始安装流程：

1.打开下载好的Node.js安装程序，点击Next，进行下一步的安装

2.将”I accept the terms in the License Agreement”前面的复选框勾选，同意安装协议，再点击Next，进行下一步操作

3.选择Node.js安装程序的安装位置，在这里我以”C:\Program Files\nodejs"为例，点击Next，进入下一步操作；

4.选择安装的模块和功能，这里全部安装，并添加到系统环境变量，继续点击Next，进入下一步操作

5.这一步可以跳过，这个选项的意思是安装一些编译本地模块的工具，比如python，C/C++等，点击Next，进入下一步；

6.点击”Install”，等待Node.js安装完成；

7.当看到下图所显示的情况，Node.js就成功安装完毕。

1.2 Git的安装与配置

为啥要安装Git？这个就相当于你电脑的CMD命令程序。我们安装这个后就不用电脑的CMD命令了直接操作这个即可。首先就是去Git官网下载Git，根据你电脑系统的配置信息，下载对应的安装程序，然后开始进行下面的步骤

1.下载好Git的安装包，开始安装，打开安装包，出现如图的界面，点击Next：

2.选择你要安装的位置，我以C盘为例，路径为图中所示，安装到其他位置的话，点击Browse，选择你要安装的位置，然后点击Next，进入下一步：

3.选择你是否创建桌面快捷放方式，其他默认即可，点击Next，进入下一步：

4.是否将Git快捷方式的目录加入开是菜单栏

5.这个是选择文本编辑器的方式，默认是Vim，也可以选择其他的方式，自主选择，在这里我选择的Vim默认方式。选择好文本编辑器的方式后，点击Next，进入下一个流程

6.选择安装 Git 时对环境变量PATH的影响，第一种影响较小，第三种会影响到Windows的自带工具，默认勾选中间项，建议不要修改，直接点击 “Next” 继续安装：

7.选择 Git 在使用 HTTPS 时使用的库，若无特殊需求，可保持默认选项，点击 “Next” 继续安装：

8.选择提交与拉取记录时，对换行符的处理方式，若无特殊需要，默认选择即可，点击 “Next” 继续安装：

9.选择模拟终端软件（即命令行窗口软件），若无特殊需要，可默认选择，点击 “Next” 继续安装：

10.最新功能的询问，若不想尝试尚未保证稳定性的新功能，默认不勾选，点击 “Install” 即可完成安装：

11.安装完成

12.回到桌面，点击鼠标右键，会出现两个选项Git GUI Here和Git Bash Here，在打开Cmd(Win+R)，分别输入git和git --version，如果出现如下图的情况，即安装成功！

二、Github注册以及Github Pages创建

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

三、配置Git用户名和邮箱

在桌面点击鼠标右键，点击Git Bash Here，会出现一个界面如下图所示：

然后分别输入下面的两个命令，并回车：

git config --global user.name "此处填写你注册时的用户名" git config --global user.email "此处填写你注册时的邮箱" 
# 一般只要不报错，可以跳过下面寻找.gitconfig文件

四、本地安装hexo静态博客框架以及发布到Github Pages

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

# hexo框架的安装 
npm install -g hexo-cli 
# 等上一个命令完成后，在输入下面的命令 
hexo init <新建文件夹的名称> #初始化文件夹 
cd <新建文件夹的名称> 
npm install # 安装博客所需要的依赖文件
![](https://cdn.jsdelivr.net/gh/xiaoshidi-hub/[email protected]/blog/git16.png)
![](https://cdn.jsdelivr.net/gh/xiaoshidi-hub/[email protected]/blog/git17.png)
等待运行完成，此时文件夹中多了许多文件。
**注意：后续的命令均需要在站点目录下（即文件夹内）使用Git Bash运行。**
此时Hexo框架的本地搭建已经完成了。我们来运行一下看看，命令行依次输入以下命令 :
```bash
hexo g
hexo s

浏览器中打开 http://locakhost:4000，可以看到一个网页，说明Hexo博客已经成功在本地运行。

1. 本地博客发布到Github Pages

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

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

npm install hexo-deployer-git --save

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

ssh-keygen -t rsa -C "你的邮箱地址"
//引号里面填写你的邮箱地址，比如我的是[email protected]，注意冒号不要写

之后会出现

Generating public/private rsa key pair.  
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):  
//到这里可以直接回车将密钥按默认文件进行存储

然后会出现：

 Enter passphrase (empty for no passphrase):  
 //这里是要你输入密码，其实不需要输什么密码，直接回车就行 
 Enter same passphrase again:

接下来屏幕会显示：

Your identification has been saved in /c/Users/you/.ssh/id_rsa.  
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.  
The key fingerprint is:  
这里是各种字母数字组成的字符串，结尾是你的邮箱  
The key's randomart image is:  
这里也是各种字母数字符号组成的字符串

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

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

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

ssh -T [email protected]

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

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

title: 你的博客名 
subtitle: 博客的副标题，有些主题支持 
description: 博客描述 
keywords: 博客关键词 
author: 作者，在文章中显示 
language: 博客语言语种 
timezone: 时区

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

type: git 
repo: [email protected]:Github用户名/github用户名.github.io.git 
branch: master
#注意type：和repo：后面有两个空格，如果不是就是错的

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

# Hexo会根据配置文件渲染出一套静态页面 
hexo g 
# 将上一步渲染出的一系列文件上传至至Github Pages 
hexo d 
# 也可以直接输入此命令，直接完成渲染和上传 
hexo g -d

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

五、hexo博客主题安装以及一些个性化修改

主题特性

1. 主题下载与安装

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

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

git clone https://github.com/blinkfox/hexo-theme-matery themes/matery # 稳定版
git clone -b develop https://github.com/blinkfox/hexo-theme-matery themes/matery #最新版(不定期进行优化更新)

2. 主题配置

2.1 切换主题

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

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

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

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

2.2 新建标签 tags 页面

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

hexo new page "tags"

编辑你刚刚新建的页面文件/source/tags/index.md，至少需要以下内容：

--- 
title: tags 
date: 2018-09-30 18:23:38 
type: "tags" 
layout: "tags" 
---

2.3 新建分类 categories 页面

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

hexo new page "categories"

编辑你刚刚新建的页面文件/source/categories/index.md,至少需要以下内容：

--- 
title: categories
 date: 2018-09-30 17:25:30 
 type: "categories" 
 layout: "categories" 
 ---

2.4 新建关于我 about 页面

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

hexo new page "about"

编辑你刚刚新建的页面文件/source/about/index.md，至少需要以下内容：

--- 
title: about 
date: 2018-09-30 17:25:30 
type: "about" 
layout: "about" 
---

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

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

hexo new page "contact"

编辑你刚刚新建的页面文件/source/contact/index.md,至少需要以下内容：

--- 
title: contact 
date: 2018-09-30 17:25:30 
type: "contact" 
layout: "contact" 
---

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

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

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

hexo new page "friends"

编辑你刚刚新建的页面文件/source/friends/index.md,至少需要以下内容：

--- 
title: friends 
date: 2018-12-12 21:25:30 
type: "friends" 
layout: "friends" 
---

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

[{
    "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
    "name": "码酱",
    "introduction": "我不是大佬，只是在追寻大佬的脚步",
    "url": "http://luokangyuan.com/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
},{
    "name": "过客~励む",
    "avatar": "https://yafine-blog.cn/medias/avatar.jpg",
    "url": "https://yafine-blog.cn",
    "introduction": "你现在的努力，是为了以后有更多的选择",
    "title": "前去学习"
},{
    "name": "小师弟",
    "avatar": "http://q44yjzgew.bkt.clouddn.com/果果小师弟.jpg",
    "url": "https://liuyao-blog.cn",
    "introduction": "一个喜欢嵌入式的小码农",
    "title": "前去学习"
}]

2.7 菜单导航配置

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

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

menu: 
  Index: 
    url: / 
   icon: fas fa-home 
  Tags: 
    url: /tags 
    icon: fas fa-tags 
  Categories: 
    url: /categories 
    icon: fas fa-bookmark 
  Archives: 
    url: /archives 
    icon: fas fa-archive 
  About: 
    url: /about 
    icon: fas fa-user-circle 
  Friends: 
    url: /friends 
    icon: fas fa-address-book

2.7.2. 二级菜单配置方法

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

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

menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle
  Contact:
    url: /contact
    icon: fas fa-comments
  Friends:
    url: /friends
    icon: fas fa-address-book
   二级菜单写法如下
  Medias:
    icon: fas fa-list
    children:
      - name: Musics
        url: /musics
        icon: fas fa-music
      - name: Movies
        url: /movies
        icon: fas fa-film
      - name: Books
        url: /books
        icon: fas fa-book
      - name: Galleries
        url: /galleries
        icon: fas fa-image

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

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

npm install hexo-filter-github-emojis --save

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

githubEmojis: 
  enable: true 
  className: github-emoji 
  inject: true 
  styles: 
  customEmojis:

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

2.9 代码高亮

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

npm i -S hexo-prism-plugin

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

prism_plugin: 
  mode: 'preprocess' # realtime/preprocess 
  theme: 'tomorrow' 
  line_number: false # default false 
  custom_css:

2.10 搜索

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

npm install hexo-generator-search --save

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

search:
  path: search.xml
  field: post

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

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

npm i hexo-permalink-pinyin --save

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

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

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

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

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

npm i --save hexo-wordcount

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

wordCount: 
   enable: false # 将这个值设置为 true 即可. 
   postWordCount: true 
   min2read: true 
   totalCount: true

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

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

npm install hexo-generator-feed --save

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

feed: 
  type: atom 
  path: atom.xml 
  limit: 20 
  hub: 
  content: 
  content_limit: 140 
  content_limit_delim: ' ' 
  order_by: -date

执行hexo clean && hexo g重新生成博客文件，然后在public文件夹中即可看到atom.xml文件，说明你已经安装成功了。

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

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

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

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

2.16 修改页脚

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

2.17 修改社交链接

在主题的_config.yml文件中，默认支持QQ、GitHub和邮箱等的配置，你可以在主题文件的/layout/_partial/social-link.ejs文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码

<% if (theme.socialLink.github) { %> 
    <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50"> 
    <i class="fab fa-github"></i> 
    </a> 
<% } %>

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

Facebook: fab fa-facebook
Twitter: fab fa-twitter
Google-plus: fab fa-google-plus
Linkedin: fab fa-linkedin
Tumblr: fab fa-tumblr
Medium: fab fa-medium
Slack: fab fa-slack
Sina Weibo: fab fa-weibo
Wechat: fab fa-weixin
QQ: fab fa-qq
Zhihu: fab fa-zhihu

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

2.18 修改打赏的二维码图片

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

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

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

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

[{ "name": "五月雨变奏电音", 
   "artist": "AnimeVibe", 
   "url": "http://xxx.com/music1.mp3", 
   "cover": "http://xxx.com/music-cover1.png" 
}, { 
  "name": "Take me hand", 
  "artist": "DAISHI DANCE,Cecile Corbel", 
  "url": "/medias/music/music2.mp3", 
  "cover": "/medias/music/cover2.png" 
}, {
   "name": "Shape of You", 
   "artist": "J.Fla", 
   "url": "http://xxx.com/music3.mp3", 
   "cover": "http://xxx.com/music-cover3.png" 
}]

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

# Whether to display the musics.
# 是否在首页显示音乐.
music:
  enable: true
  showTitle: true
  title: 听听音乐
  fixed: false # 开启吸底模式
  autoplay: false # 是否自动播放
  theme: '#42b983'
  loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'list' # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: false # 列表默认折叠
  listMaxHeight: #列表最大高度

3. 文章 Front-matter 介绍

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

语法使用：

配置选项	默认值	描述
title	`Markdown`的文件标题	发布时间，强烈建议填写此选项，且最好保证全局唯一
date	文件创建时的日期时间	文章标题，强烈建议填写此选项
author	根`_config.yml`中的`author`	文章作者
img	`featureImages`中的某个值	文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如:`http://xxx.com/xxx.jpg`
top	`true`	推荐文章（文章是否置顶），如果`top` 值为`true`，则会作为首页推荐文章
cover	`false`	`v1.0.2`版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg	无	`v1.0.2`版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password	无	文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 `password`的值，该值必须是用`SHA256`加密后的密码，防止被他人识破。前提是在主题的`config.yml`中激活了`verifyPassword`选项
toc	true	是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax	`false`	是否开启数学公式支持，本文章是否开启`mathjax`，且需要在主题的`_config.yml`文件中也需要开启才行
summary	无	文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories	无	文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags	无	文章标签，一篇文章可以多个标签
date	无	文章转载规则，可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

注意:

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

以下为文章的Front-matter示例。

示例

--- 
title: typora-vue-theme主题介绍 
date: 2018-09-07 09:25:00 
author: 赵奇 
img: /source/images/xxx.jpg 
top: true 
cover: true 
coverImg: /images/1.jpg 
password:8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92 
toc: false 
mathjax: false 
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要 
categories: Markdown 
tags: 
  - Typora 
  - Markdown 
---

4. 自定制修改

4.1 修改主题颜色

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

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */ 
  .bg-color { 
  background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
} 
/*如果想去掉banner图的颜色渐变效果，请将以下的css属性注释掉或者删除掉即可*/ @-webkit-keyframes rainbow{ 
  /* 动态切换背景颜色. */ 
}
@keyframes rainbow{ 
    /* 动态切换背景颜色. */
}

4.2 修改 banner 图和文章特色图

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在/layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中：

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

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

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

六、其他一些DIY(可选)

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

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

打开themes/matery/source/css/matery.css文件，大约在250行，有一个.bg-color属性，修改其属性值即可，代码如下：

.bg-color { 
  background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); //修改成自己喜欢的颜色值 
  opacity: 0.8; //透明效果 值范围 0~1，看情况自己修改 }

2. 鼠标点击文字特效

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

var a_idx = 0;
jQuery(document).ready(function ($) {
    $("body").click(function (e) {
        var a = new Array
            ("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
            y = e.pageY;
        $i.css({
            "z-index": 5,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#FF0000"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
            3000,
            function () {
                $i.remove();
            });
    });
    setTimeout('delay()', 2000);
});

function delay() {
    $(".buryit").removeAttr("onclick");
}

3. 修改原有相册

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

4. 添加天气小插件

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

5. 豆瓣书单电影页面

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

npm install hexo-douban --save

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

douban: 
  user: 209404035  #这个需要修改为你个人的id
  builtin: true 
  book: 
      title: '我的书单' 
      quote: '你必须要看的书籍' 
  movie: 
      title: '我的影单' 
      quote: '那些年我们一起看过的电影' 
timeout: 10000

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

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

  媒体:
    icon: fas fa-list
    children:
      - name: 电影
        url: /movies
        icon: fas fa-film
      - name: 书单
        url: /books
        icon: fas fa-book

4.适配Matery主题：在 /themes/hexo-theme-matery/layout 文件夹下面创建一个名为 douban.ejs 的文件，并将下面的内容复制进去：

<%- partial('_partial/post-cover') %>
<style>
    .hexo-douban-picture img {
        width: 100%;
    }
</style>
<main class="content">
    <div id="contact" class="container chip-container">
        <div class="card">
            <div class="card-content" style="padding: 30px">
                <h1 style="margin: 10px 0 10px 0px;"><%= page.title %></h1>
                <%- page.content %>
            </div>
        </div>
        <div class="card">
            <div class="card-content" style="text-align: center">
              <h3 style="margin: 5px 0 5px 5px;">如果你有好的内容推荐，欢迎在下面留言！</h3>
            </div>
         </div>
        <div class="card">
            <% if (theme.gitalk && theme.gitalk.enable) { %>
            <%- partial('_partial/gitalk') %>
            <% } %>

            <% if (theme.gitment.enable) { %>
            <%- partial('_partial/gitment') %>
            <% } %>

            <% if (theme.disqus.enable) { %>
            <%- partial('_partial/disqus') %>
            <% } %>

            <% if (theme.livere && theme.livere.enable) { %>
            <%- partial('_partialvere') %>
            <% } %>

            <% if (theme.valine && theme.valine.enable) { %>
            <%- partial('_partialaline') %>
            <% } %>
        </div>
    </div>
</main>

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

/* 原文件内容为 layout: [`page`, `post`] ，将其修改为下面的内容*/ 
layout: [`page`, `douban`]

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

hexo douban

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

以下是可选的命令参数：

-h, --help # 帮助页面 
-b, --books # 只生成书单页面 
-g, --games # 只生成游戏页面 
-m, --movies # 只生成电影页面

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

6. 外链跳转插件

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

## npm 安装 
npm install hexo-external-link --save 
## yarn 安装 
yarn add hexo-external-link

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

hexo_external_link: 
  enable: true 
  enable_base64_encode: true 
  url_param_name: 'u' 
  html_file_name: 'go.html' 
  target_blank: true 
  link_rel: 'external nofollow noopener noreferrer' 
  domain: 'your_domain' # 如果开启了防盗链 
  safety_chain: true

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

7. 文章生成永久链接

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

   premalink: :year/:month/:day/:title

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

npm install hexo-abbrlink --save

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

abbrlink: 
    alg: crc16 #算法： 
    crc16(default) and crc32 rep: hex #进制： dec(default) and hex: dec #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制

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

permalink: posts/:abbrlink.html  # 此处可以自己设置，也可以直接使用 :/abbrlink

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

七、域名解析与绑定

1.购买域名

首先我们要购买域名，阿里云，腾讯云都可以，也不贵，一年几十块钱，最便宜几块钱也能买到，以阿里云为例，我购买的域名是 liuyao-blog.cn，购买过程就不赘述了，选择阿里云的解析平台，来到阿里云的管理控制台，点击进入域名解析列表或者直接点击域名后面的解析

2.添加CNAME文件

为了使 GitHub 接收我们的域名，还需要在博客的根目录下添加一个名为 CNAME 的文件（注意不要加.txt，没有任何后缀名！），这个文件放到 Hexo 文件夹的 source 里面，（比如我的是：D:\Blog\Hexo\source），文件里面填写你的域名（加不加www都行），比如要填写我的域名，文件里面就写：www.liuyao-blog.cn 或者 liuyao-blog.cn，经过以上操作，别人就可以通过 www.liuyao-blog.cn 、liuyao-blog.cn 、xiasohidi-hub.github.io 三个当中任意一个访问我的博客了！你的也一样！

3.仓库配置

然后在你的GitHub仓库的设置里找到这个页面，将你的域名填到Custom domain选项下，强制开启https，即当你在地址栏输入域名，会自动识别域名为https开头。然后进行保存。

八、博客优化

1. nmp速度优化

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

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

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

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

npm config get registry

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

npm config set registry https://registry.npm.taobao.org

安装CNPM

安装cnpm，命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

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

cnpm -v

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

2. 图片懒加载

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

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

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

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

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

npm install hexo-lazyload-image --save

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

lazyload:
  enable: true  # 是否开启图片懒加载
  onlypost: false  # 是否只对文章的图片做懒加载
  loadingImg: # eg ./images/loading.gif

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

3. 代码压缩

方法一：gulp代码压缩

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

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

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

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

# 全局安装gulp模块 
npm install gulp -g 
# 安装各种小功能模块 执行这步的时候，可能会提示权限的问题，最好以管理员模式执行 
npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save 
# 额外的功能模块 
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save

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

var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css压缩组件
var uglify = require("gulp-uglify"); //js压缩组件
var htmlmin = require("gulp-htmlmin"); //html压缩组件
var htmlclean = require("gulp-htmlclean"); //html清理组件
var imagemin = require("gulp-imagemin"); //图片压缩组件
var changed = require("gulp-changed"); //文件更改校验组件
var gulpif = require("gulp-if"); //任务 帮助调用组件
var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象

// 清除public文件夹
gulp.task("clean", function () {
    return del(["public/**/*"]);
});

// 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return
// 创建静态页面 （等同 hexo generate）
gulp.task("generate", function () {
    return hexo.init().then(function () {
        return hexo
            .call("generate", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 启动Hexo服务器
gulp.task("server", function () {
    return hexo
        .init()
        .then(function () {
            return hexo.call("server", {});
        })
        .catch(function (err) {
            console.log(err);
        });
});

// 部署到服务器
gulp.task("deploy", function () {
    return hexo.init().then(function () {
        return hexo
            .call("deploy", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 压缩public目录下的js文件
gulp.task("compressJs", function () {
    return gulp
        .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
        .pipe(plumber())
        .pipe(
            gulpBabel({
                presets: [es2015Preset] // es5检查机制
            })
        )
        .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩
        .pipe(gulp.dest("./public")); //输出到目标目录
});

// 压缩public目录下的css文件
gulp.task("compressCss", function () {
    var option = {
        rebase: false,
        //advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
        compatibility: "ie7" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
        //keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
        //keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
    };
    return gulp
        .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
        .pipe(plumber())
        .pipe(cleancss(option))
        .pipe(gulp.dest("./public"));
});

// 压缩public目录下的html文件
gulp.task("compressHtml", function () {
    var cleanOptions = {
        protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
        unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊处理
    };
    var minOption = {
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        removeComments: true, //清除HTML注释
        minifyJS: true, //压缩页面JS
        minifyCSS: true, //压缩页面CSS
        minifyURLs: true //替换页面URL
    };
    return gulp
        .src("./public/**/*.html")
        .pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
        .pipe(plumber())
        .pipe(htmlclean(cleanOptions))
        .pipe(htmlmin(minOption))
        .pipe(gulp.dest("./public"));
});

// 压缩 public/medias 目录内图片
gulp.task("compressImage", function () {
    var option = {
        optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
        progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
        interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
        multipass: false //类型：Boolean 默认：false 多次优化svg直到完全优化
    };
    return gulp
        .src("./public/medias/**/*.*")
        .pipe(gulpif(!isScriptAll, changed("./public/medias")))
        .pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
        .pipe(plumber())
        .pipe(imagemin(option))
        .pipe(gulp.dest("./public"));
});
// 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器
gulp.task(
    "build",
    gulp.series(
        "clean",
        "generate",
        "compressHtml",
        "compressCss",
        "compressJs",
        "compressImage",
        gulp.parallel("deploy")
    )
);

// 默认任务
gulp.task(
    "default",
    gulp.series(
        "clean",
        "generate",
        gulp.parallel("compressHtml", "compressCss", "compressJs","compressImage")
    )
);
//Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数

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

直接在Hexo根目录执行 gulp或者 gulp default ，这个命令相当于 hexo cl&&hexo g 并且再把代码和图片压缩。
在Hexo根目录执行 gulp build ，这个命令与第1种相比是：在最后又加了个 hexo d ，等于说生成、压缩文件后又帮你自动部署了。

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

果果小师弟

发布了14 篇原创文章 · 获赞 3 · 访问量 458

私信关注