用Hexo+Next+github page搭建个人博客

Hexo是一个简洁漂亮的博客框架，用来生成静态网页。本文介绍使用hexo搭建博客。

准备：安装Hexo

安装前提

在安装Hexo之前，应先安装以下应用程序：

• Node.js
• Git

安装Git

对Linux(ubuntu,debian)

sudo apt-get install git-core

安装Node.js

wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

安装完成后，需要重启终端再执行以下命令：

nvm install stable

安装Hexo

安装好Git和Node.js后，使用npm安装Hexo:

npm install -g hexo-cli

hexo常用命令

• hexo init #用于新建一个网站
• hexo new #在站点根目录下执行，以/scaffolds/post.md为模板，创建一篇新的文章。新建文章存放在/source/_posts下。
• hexo generate 简写为 hexo g #生成静态网页
• hexo server 简写为 hexo s #启动服务器，默认访问网址为http://localhost:4000/
• hexo clean #用于清楚缓存文件和已经生成的静态文件。当对站点的修改无论如何不能生效时，运行该命令。
• hexo deploy 简写为 hexo d #将生成的静态文件部署到github等远程服务器。
  常用的套路是先使用hexo g和hexo s在本地编辑和调试博客，当调试无误后，再用hexo d部署到GitHub。

本地建站

选好路径，以下命令会自动创建文件夹来存放博客内容。

hexo init <folder> #生成hexo模板

上述命令生成了以下文件,生成文件夹的目录如下。

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

上述文件中，只需要重点关注和了解这几个文件：

• _config.yml 是站点配置文件。用来配置博客网站的各种信息。
• /source/_posts 用来存放我们自己之后写的博客。
• themes 用来存放博客的主题。
  再执行以下命令:

  cd <folder>
  npm install
  hexo server

执行完以上命令，可以访问 http://localhost:4000 看到博客已经顺利搭建。

修改站点配置文件

hexo中有两个重要的配置文件，名称都是 _config.yml：

• 站点配置文件，位于站点根目录下，用于站点本身的配置。
• 主题配置文件，位于主题目录下，用于主题相关的配置。

通过修改站点配置文件的下述字段，来分别修改网站名称、副标题、个性签名(或网站简介)、作者和语言设置。

title: 
subtitle:
description: 
author: 
language: zh-Hans #设置语言为中文

将博客关联到GitHub

1、在github创建仓库 <your-user-name>.git.io,<your-user-name>必须与你的github用户名相同。
2、编辑站点配置文件，找到字段deploy，作如下的修改。

deploy:
  type: git
  repository: https://github.com/<your-user-name>/<your-user-name>.github.io.git
  branch: master

3、使用命令npm install --save安装插件。

npm install hexo-deployer-git --save

4、生成静态网页

hexo g

5、部署到GitHub

hexo d

运行上述命令后，访问 http://<your-user-name>.git.io

‘hexo d’部署时不输密码

执行hexo d将博客部署到github时，每次都要输入github的账号和密码，非常麻烦。我们利用ssh的公钥登录免去输入密码的步骤。

ssh的公钥登录简介
所谓公钥登录。本地主机生成一个公钥和一个秘钥，把公钥告诉给远程主机（github），而秘钥只有自己知道。当本地主机要登录远程主机时，远程主机（github）发送一个消息序列给本地主机，本地主机用秘钥将消息序列加密后再发送给远程主机；远程主机收到后用公钥解密，若与原消息序列相同，则可以登录。通过这种“公钥登录”的方式保证了安全性，不需要再用账户和密码来验证身份。

1. 本机主机生成公钥和秘钥
   在命令行执行：

   ssh-keygen

   生成的文件有id_rsa.pub和id_rsa，分别为公钥和私钥。Linux系统下，生成文件在home/ssh/目录下。windows系统,在C:/user/.ssh下。

2. 把公钥告诉给github
   在Linux系统下，执行以下命令查看公钥，然后复制。在windows系统下，将id_rsa.pub用文本格式打开来复制。

   cd ~/.ssh
   cat id_rsa.pub

   在github的settings>SSH and GPG keys>New SSH keys新建一个ssh key，将复制的公钥粘贴保存即可。

3. 修改站点配置文件用ssh方式来访问仓库，而不是用https方式
   打开站点配置文件，修改字段deploy下的repository的值。

   deploy:
     type: git
     # repository: https://github.com/spring-quan/spring-quan.github.io
     repository: git@github.com:spring-quan/spring-quan.github.io.git
     branch: master

参见
SSH远程登录
Hexo免输入密码部署到Github

绑定域名

购买并注册域名

在阿里云的万网购买一个域名。常用的域名后缀有.com/.cn/.me/.top。不同后缀的域名价格不同，可以按照喜好选择一个。
购买好域名后，需要完成 域名实名认证，才能正常进行域名解析，该域名才能使用。

注意：
注册域名后，需要域名实名认证，不需要备案，域名就可以正常使用。

给GitHub添加域名

在博客对应的github仓库下，新建一个文件CNAME，文件名要大写。内容如下，注意要为顶级域名，不能包括www或http。

example.com

在用hexo d命令将博客部署到GitHub上时，文件CNAME会被覆盖删除掉。为了解决这个问题，还需要在站点目录下/source，新建同样的文件CNAME。

设置域名解析

设置域名解析就是将注册到的域名指向一个IP地址，首先我们要查询github.io域名对应的IP地址。在命令行中ping自己的github.io域名，就可以得到IP地址。

ping <your-user-name>.github.io

接着，在阿里云万网的管理控制台>域名服务>域名列表中设置域名解析即可。
这时域名就绑定好了，可以通过buptccq.top 和www.buptccq.top 来访问博客。

注意：
1、设置域名解析不是立即生效的，需要等10分钟左右。
2、若用自定义的域名访问失败后，经过修改，避免浏览器的DNS缓存，可以使用浏览器的无痕模式。

写作博客+技巧

在站点根目录下，执行以下命令创建一篇新文章：

hexo new <title>

上述命令在站点根目录下的\source_posts 文件夹生成一个 .md文件。
按照markdown规则，编辑该文件。接下来介绍编辑md文件的几个技巧。

块引用

1、一种方法。

> 只是块引用
> 是的啊

效果图如下：

只是块引用
是的啊

markdown语法

参考链接
markdown中文文档
Markdown 入门参考
MarkDown语法简介
Markdown 书写风格指南

绘制表格

用|来分隔不同的单元格，用-来分隔表头和其他行。
关于对齐：

• :--- 左对齐，默认情况
• :---: 居中
• ----: 右对齐

使用方式举例：

|主公|刘备|曹操|孙权|
|----|----|----|----|
|政权|蜀|魏|吴|
|相关|关羽、张飞|曹丕、曹植|周瑜、鲁肃|

实现效果：

主公	刘备	曹操	孙权
政权	蜀	魏	吴
相关	关羽、张飞	曹丕、曹植	周瑜、鲁肃

删除线

使用方式：

~~删除线~~

使用效果为：
删除线

markdown其他用法

<!-- more --> #在首页显示摘要
 content   #块引用
<www.baidu.com> #链接
[百度](www.baidu.com) #内嵌链接
![](/path/to/image 'image name')

有序列表
1. 
2.
3.
无序列表
- 
- 
- 

**粗体字**
*斜体字*

``代码``

## 二级标题
### 三级标题

文字居左，居中，居右

居中

<center>诶嘿</center>

居左

<p align="left">诶嘿</p>

居右

<p align="right">诶嘿</p>

插入表情

😀😇👹

给博客选用主题

这里要介绍一下“主题”这个概念。主题也就是博客的样式。给博客安装一个好的主题，就好像给人选一件漂亮的衣服穿。hexo有多种不同的主题，可以改hexo选择不同的样式和布局。主题列表有详细的介绍。
使用最多的主题是Next,接下来介绍主题的安装。

安装主题Next

1. 先下载主题Next，在站点根目录下执行：

   git clone https://github.com/iissnan/hexo-theme-next themes/next

2. 启用主题，打开站点配置文件，找到theme字段，把它的值修改为 next

   theme: next

3. 验证主题。运行’hexo server’,访问http://localhost:4000。

选择Scheme

通过修改主题配置文件完成。打开主题配置文件，找到字段scheme，将不要的主题注释掉，要用的主题不注释。

#scheme: Muse
#scheme: Mist
scheme: Pisces

设置语言为中文

通过修改站点配置文件完成。打开站点配置文件，找到字段language，把它值修改为 zh-Hans

language: zh-Hans

主题美化-1

设置上部的菜单栏

1. 设置菜单内容。通过修改主题配置文件完成。打开主题配置文件，找到字段menu，不用的菜单栏选项注释掉，要用的不注释。

   menu:
     home: /
     archives: /archives  # 冒号右边为主题目录下/source下的文件夹。
     #about: /about
     #categories: /categories
     tags: /tags
     #commonweal: /404.html

2. 设置菜单项的显示文本。编辑主题目录下的/languages/zh-Hans.yml。

   menu:
     home: 首页
     archives: 归档
     categories: 分类
     tags: 标签
     about: 关于
     search: 搜索
     commonweal: 公益404

3. 设置菜单项的图标。编辑主题配置文件，找到字段menu_icons,修改为：

   menu_icons:
     enable: true

设置头像

打开主题配置文件，找到字段avatar，把它的值修改为头像照片的路径。将头像照片放在主题目录/source/images(如果不存在就创建)。

avatar: /images/avatar.png

添加‘标签’页面

首先要在菜单栏显示‘标签’链接。在站点目录下，新建一个页面：

hexo new page tags

编辑刚刚生成的页面,修改字段 title 和 type

title: 标签
date: 2019-01-13 12:22:58
type: "tags"

在菜单栏中添加链接。修改主题配置文件，找到字段menu下的字段tags，把它值修改为 /tags

menu:
  home: /
  archives: /archives
  tags: /tags

添加‘分类’页面

与添加‘标签’页面基本相同。
首先要在菜单栏显示‘分类’链接。在站点目录下，新建一个页面：

hexo new page categories

编辑刚刚生成的页面,修改字段 title 和 type

title: 分类
date: 2019-01-13 12:22:58
type: "categories"

在菜单栏中添加链接。修改主题配置文件，找到字段menu下的字段tags，把它值修改为 /tags

menu:
  home: /
  archives: /archives
  tags: /tags
  categories: /categories

新建一个友链页面

1. 在菜单栏中添加链接和链接图标。编辑站点配置文件，找到字段menu，添加以下内容：

   menu:
     links: /links/ || link  # ||左边代表文件夹/source/links,右边代表图标

2. 修改链接的显示文本，编辑文件/themes/next/languages/zh-Hans.yml,找到字段menu。

   menu:
     links: 友链

3. 在站点目录下执行以下命令,会生成/source/links/index.md文件。通过编辑该文件可以控制友链页面的显示内容。

   hexo new page links

关闭’标签’、’分类’页的评论

分别编辑站点目录下的/source/tags/index.md和/source/categories/index.md,添加字段comments,把它的值修改为false。

comments: false

侧边栏添加社交链接

通过修改主题配置文件完成。打开 主题配置文件 ，修改两个部分，链接和链接图标。
1、添加链接。找到字段 social ，一行为一个链接。格式为 显示文本：链接

# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name

2、修改链接图标。找到字段 social_icons 。键值对格式为 匹配键：图标名称 。在图标库找到合适的图标，将名字作为图标名称。

# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter

侧边栏添加友情链接

打开 主题配置文件 ，找到字段 links 。键值对格式为 显示文本：链接

# Blog rolls
links_icon: link         #链接的图标
links_title: 推荐阅读     #链接的名称
links_layout: block      #链接的布局，一行一个链接
#links_layout: inline    #一行多个链接
links:
  # Title: http://example.com/
  廖雪峰: https://www.liaoxuefeng.com/

开启打赏功能

通过修改主题配置文件完成。打开 主题配置文件 ，找到以下字段。将收款二维码放到站点目录下的/source/images/(没有该文件夹，就新建)中。

reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

修改打赏字体不闪动

修改文件MyBlog/themes/next/source/css/_common/components/post/post-reward.styl，注释文字闪动的函数。

/*注释文字闪动的函数
#wechat:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
*/

订阅微信公众号

在每篇文章的末尾显示微信公众号。把微信公众号二维码放在MyBlog/themes/next/source/images/下。
编辑 主题配置文件 ，找到字段wechat_subscriber，修改它的值。

# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /path/to/your/wechatqcode
  description: 欢迎关注我

设置腾讯公益404界面

1、在目录MyBlog/themes/next/source/下新建404.html页面，内容如下：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

2、修改 主题配置文件 ,找到字段 menu 下的字段 commonweal，把它值修改为 /404.html

menu:
  commonweal: /404.html || heartbeat

设置背景动画

编辑 主题配置文件。以下四个字段为不同的背景动画效果，要想启用，将false改为true。

# Canvas-nest
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

添加评论系统

‘网易云跟帖’评论已经不提供服务。我们采用’来必力’评论系统时，需要获取uid。
1、先在来必力的官方网站注册账号，在>安装下安装city版本，再在>管理页面>代码管理下获取uid。data-uid字段的值就是我们需要的uid。
2、编辑 主题配置文件 ，找到字段’livere_uid’,把它的值改为data-uid字段的值。

livere_uid: #your uid

添加搜索功能

通过Local Search搜索服务实现搜索功能。
1、安装插件hexo-generator-searchdb，在站点的根目录下执行

npm install hexo-generator-searchdb --save

2、编辑 站点配置文件,在文末新增以下内容：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3、编辑主题配置文件,找到字段”local_search”，修改值为true。

local_search:
  enable: true

主题美化-2

设置【阅读全文】

在首页只显示文章的部分内容，通过按钮【阅读全文】来实现跳转。有三种方式可以实现该功能，这里介绍最方便的一种。
在文章中使用<!-- more -->来进行截断，<!-- more -->之前的内容显示在首页，后面的内容不显示。

<!-- more -->

分页-设置页面文章的篇数

为网站首页、归档页和标签页设置不同的文章篇数。
1、使用npm install --save安装插件。

npm install --save hexo-generator-index
npm install --save hexo-generator-archive
npm install --save hexo-generator-tag

2、编辑站点配置文件,找到以下字段并修改。

index_generator:
  per_page: 10 

archive_generator:
  per_page: 20
  yearly: true
  monthly: true

tag_generator:
  per_page: 10

设置网站的图标

在EasyIcon中找一张中意的图标。修改图标名称为favicon.ico，将图标放在路径/next/source/images/下。编辑主题配置文件，找到字段favicon，修改它的值。

favicon:
  small: /images/favicon.ico
  medium: /images/favicon.ico

添加顶部的加载条

修改主题配置文件,找到字段pace,把值设为true。还可以选择不同风格的加载条。

pace: true 
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
pace_theme: pace-theme-flash

修改文章底部的标签#为

修改文件 /themes/next/layout/_macro/post.swig,搜索rel="tags">#，将#换成<i class="fa fa-tag"></i>。
也可以在图标库找自己中意的图标。

修改网页底部的桃心

编辑/themes/next/layout/_partials/footer.swig，找到以下代码,将第二个class的值并修改为"fa fa-heart"，在图标库找自己中意的图标。

<span class="with-love">
  <i class="fa fa-{{ theme.footer.icon }}"></i>
</span>

实现统计功能

使用npm install --save安装插件

npm install hexo-wordcount --save

网站底部字数统计

编辑/themes/next/layout/_partials/footer.swig，在文末添加以下代码：

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

文章字数和阅读时长

编辑主题配置文件，找到字段post_wordcount,并修改。

post_wordcount:
  item_text: true
  wordcount: true #字数统计
  min2read: true #阅读时长统计
  totalcount: true #站点总字数
  separated_meta: true

统计访问量和阅读量

我们用busuanzi实现统计功能。
1、全局配置。编辑主题配置文件，找到字段busuanzi_count,将enable的值改为true。
2、编辑字段site_uv,统计本站访客数。
3、编辑字段site_pv,统计本站总访问量。
4、编辑字段page_pv,统计每篇文章的阅读量。

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>本站访客数
  site_uv_footer: 人次
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>本站总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>本文总阅读量
  page_pv_footer: 次

问题：busuanzi统计不显示数字（2019.1.15）。
原因是buxuanzi的域名变更，由<dn-lbstatics.qbox.me>变为<busuanzi.ibruce.info>,导致统计功能不能实现。解决方案如下：

1. 编辑文件themes\next\layout\_third-party\analytics\busuanzi-counter.swig,找到以下代码

   <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

2. 将其修改为：

   <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

重新推送后，可以看到统计功能正常。

实现点击出现桃心

1、在路径/theme/next/source/js/src/下新建 love.js
2、编辑文件/theme/next/layout/_layout.swig文件，在文末添加代码：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

修改链接文本样式

修改文件themes\next\source\css\_common\components\post\post.styl,在文末添加如下代码。关于颜色的代码见详情

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

置顶某篇文章

修改文件MyBlog/node_modules/hexo-generator-index/lib/generator.js,将全部代码替换为

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

在文章front-matter中添加字段top，该字段的数值越大文章越靠前。

title: 第三篇
top: 10

文章加密访问

编辑文件MyBlog/themes/next/layout/_partials/head.swig,在第五行插入以下代码：

<script>
    (function () {
        if ('{{ page.password }}') {
            if (prompt('请输入文章密码') !== '{{ page.password }}') {
                alert('密码错误！');
                if (history.length === 1) {
                    location.replace("http://xxxxxxx.xxx"); // 这里替换成你的首页
                } else {
                    history.back();
                }
            }
        }
    })();
</script>

在文章front-matter中添加字段password，该字段的值不为空则文章加密，若字段的值为空则文章没有加密。

title: 第三篇
password:

自定义新建文章的md文件

修改/scaffolds/post.md文件为：

---
title: {{ title }}
date: {{ date }}
tags:   # 标签
categories: # 分类
copyright:  # true添加版权信息
top:        # 数值越大，文章在首页越靠前。用于文章置顶
password: # 为空则文章不加密。用于文章加密访问
---

显示浏览进度

编辑主题配置文件，修改字段scrollpercent的值为true

# Scroll percent label in b2t button.
scrollpercent: true

使得HEXO的next主题渲染LATEX数学公式

编辑主题配置文件，修改字段mathjax的值为true

# MathJax Support
mathjax:
  enable: true

主题美化-3

修改代码块自定义样式

编辑\themes\next\source\css\_custom\custom.styl,在文末添加如下代码。关于颜色的代码见详情

// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

设置代码高亮主题

Next使用 Tomorrow Theme作为代码高亮。有五个主题可供选择。
1.编辑 主题配置文件，找到字段highlight_theme,修改它的值。

# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

2. 实现代码变成彩色。修改站点配置文件，找到字段highlight下的字段auto_detect的值为true

   highlight:
     enable: true
     line_number: true
     auto_detect: true

添加代码块复制功能

通过第三方插件clipboard.js来实现复制功能。
1.目录/themes/next/source/js/src下新建两个 .js文件。

• clipboard.min.js。下载第三方插件clipboard.min.js
• clipboard-use.js，文件内容如下：

/*页面载入完成后，创建复制按钮*/
!function (e, t, a) { 
  /* code */
  var initCopyCode = function(){
    var copyHtml = '';
    copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
    copyHtml += '  <i class="fa fa-copy"></i><span>复制</span>';      #复制按钮的图标和显示文本
    copyHtml += '</button>';
    $(".highlight .code pre").before(copyHtml);
    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });
  }
  initCopyCode();
}(window, document);

2.在文件\themes\next\source\css\_custom\custom.styl文末添加代码：

//代码块复制按钮
.highlight{
  //方便copy代码按钮（btn-copy）的定位
  position: relative;
}
.btn-copy {
    display: inline-block;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #333;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 2px 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0;
}
.btn-copy span {
    margin-left: 5px;
}
.highlight:hover .btn-copy{
  opacity: 1;
}

3.在.\themes\next\layout\_layout.swig文末添加代码：

<!-- 代码块复制功能 -->
<script type="text/javascript" src="/js/src/clipboard.min.js"></script>  
<script type="text/javascript" src="/js/src/clipboard-use.js"></script>

参见：
Hexo NexT主题代码块添加复制功能
Hexo next博客添加折叠块功能添加折叠代码块

文章摘要图片

让图片出现在网站首页的文章摘要中，但不出现在文章的正文中。

1. 编辑主题配置文件，修改字段expert_description的值为false

   excerpt_description: false
   
   auto_excerpt:
     enable: false

2. 编辑文件themes/next/layout/_macro/post.swig，找到代码：

   {\% elif post.excerpt  %\}
     {{ post.excerpt }}

在它后面添加如下代码：

{\% if post.image %\}
<div class="out-img-topic">
  <img src={{ post.image }} class="img-topic" />
</div>
{\% endif %\}

3. 编辑文件/themes/next/source/css/_custom/custom.styl,在文末添加如下代码：

   // 自定义的文章摘要图片样式
   img.img-topic {
       width: 100%;
   }

使用方式是，在文章的.md文件的front-matter加上一行image: path/to/image：

title: {{ title }}
date: {{ date }}
keywords:   # 用于SEO搜索引擎优化
tags:   # 标签
categories: # 分类
copyright:  # true添加版权信息
top:        # 数值越大，文章在首页越靠前。用于文章置顶
password: # 为空则文章不加密。用于文章加密访问
description:# 用于设置【阅读全文】
image:    # 文章摘要图片

设置背景图片

方法一

通过jquery-backstretch,编辑文件/themes/next/layout/_layout.swig,在最后的</body>之前添加

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script>
$("body").backstretch("https://背景图.jpg");

方法二

编辑文件/themes/next/source/css/_custom/custom.styl,添加代码：

// Custom styles.
body {
  background:url(/images/background.jpg);  #图片放在/images文件中
  background-attachment: fixed;   #固定背景图
}

搜索引擎优化（SEO）-提高网站排名

我们搭建好博客之后，在搜索引擎（百度、Google）中搜索博客，会发现根本搜索不到。这是因为我们的博客网站没有没搜索引擎收录，也就搜索不到。因此我们需要进行搜索引擎优化。搜索引擎优化是为提高我们的博客在搜索结果中的排名，来增大网站的流量。通俗地说，就是让我们的博客更容易被搜索到。

• 让搜索引擎收录我们的网站。
• 提高网站在搜索结果中的排名。

hexo优化准备

编辑配置文件

站点配置文件
站点配置文件中的这四项一定要写

title: 
subtitle: 
description: 
url:

打开Next主题自带的SEO配置
编辑主题配置文件,找到这四个字段，并设置为true。

canonical: true
seo: true
index_with_subtitle: true
baidu_push: true

设置关键字

1. 设置博客的关键字。编辑站点配置文件，添加字段keywords，值用逗号隔开。
2. 设置文章的关键字。在文章中，添加字段keywords，值用逗号隔开。

   keywords: word1,word2,word3

网站首页title优化

我们知道读文章时，标题和摘要往往比段落中的大段文字重要。同样在搜索引擎爬取收录网页时，title起到更重要的作用。
关键词出现在网站title中，可以提高网站被搜索到的可能。网站的title一般不超过80字符。
我们把网站首页的title改为网站名称-关键词-网站描述的形式。
编辑文件\themes\next\layout\index.swig，将以下代码

{\% block title %\}{{ config.title }}{\% if theme.index_with_subtitle and config.subtitle %\} - {{config.subtitle }}{\% endif %\}{\% endblock %\}

修改为，可以看到通过插入和来添加关键词和网站描述。

{\% block title %\}{{ config.title }} - {{ config.keywords }} - {{ theme.description }}{\% if theme.index_with_subtitle and config.subtitle %\} - {{config.subtitle }}{\% endif %\}{\% endblock %\}

网站名称、关键词、网站描述的显示文本分别对应站点配置文件中的字段title，keywords和description的值。

title: spring'Blog #网站标题
subtitle: 
description: #对应网站描述
keywords: #关键词
author: spring-quan
language: zh-Hans
timezone:

给所有外部链接添加nofollow标签

1. 使用npm install --save安装插件hexo-autonofollow

   npm install hexo-autonofollow --save

2. 编辑站点配置文件,在文末添加如下代码。不想添加的链接写在字段exclude后。

   nofollow:
     enable: true
     exclude:
     - exclude1.com
     - exclude2.com

提交链接和验证网站

这一步是让搜索引擎收录我们的网站。我们需要在搜索引擎提交我们的链接，提交链接时需要验证这个网址是我们的，不是别人的。以下为搜索引擎的网站管理工具

• google的网站管理工具Search Console
• 百度的搜索资源平台

搜索引擎给出了网站验证的多种方式，百度和谷歌进行网站验证的原理和步骤差不多。这里介绍两种验证方式：html文件验证和CNAME验证
html文件验证

1. 下载验证文件.html，放到站点目录/source下。

2. hexo会自动对HTML文件进行渲染，但我们不希望验证文件被渲染，需要做一些配置。修改站点配置文件，编辑字段skip_render的值为 验证文件名.html。该字段后可以有多个值，以逗号分隔。该字段后的文件名会跳过渲染。

   skip_render: google6af533d85b9bfd8c.html,baidu_verify_mreXNGCYRV.html

3. 清除缓存并将修改同步到github.

   hexo clean
   hexo g -d

4. 点击完成验证。

CNAME验证

1. CNAME验证是设置域名解析。需要登录阿里云万网。
2. 选择控制台>产品与服务>域名，管理域名的解析。添加CNAME类型的解析。

站点地图sitemap和爬虫协议robot.txt

站点地图是一个文件。告诉Google和百度应该抓取哪些网页。
robot.txt也是一个文件。告诉Google和百度不应该抓取哪些网页。

站点地图sitemap

先添加站点地图文件，再提交给Google和百度。告诉Google和百度应该抓取哪些网页。

1. 使用命令安装自动生成站点地图sitemap的插件。

   npm install hexo-generator-sitemap --save
   npm install hexo-generator-baidu-sitemap --save

2. 编辑站点配置文件，在文末添加以下代码：

   sitemap:
     path: sitemap.xml
   baidusitemap:
     path: baidusitemap.xml

3. 执行命令，会在站点目录下的public文件夹生成站点地图文件sitemap.xml和baidusitemap.xml文件，前者提交给Google，后者提交给百度。

   hexo g

把站点地图文件提交给Google和百度。

• 在Google的旧版Search Console提交站点地图文件https://buptccq.top/sitemap.xml(修改为你自己的域名)。

  

• 在百度的网站管理工具提交站点地图文件https://buptccq.top/baidusitemap.xml(修改为你自己的域名)。

  

爬虫协议robot.txt，又成蜘蛛协议

添加爬虫协议文件robot.txt，再提交给Google和百度。告诉Google和百度不要抓取哪些网页。

1. 在站点目录source下新建文件robot.txt。内容如下，注意修改为自己的域名。

   #hexo robots.txt
   User-agent: *
   
   Allow: /
   Allow: /archives/
   
   Disallow: /vendors/
   Disallow: /js/
   Disallow: /css/
   Disallow: /fonts/
   Disallow: /vendors/
   Disallow: /fancybox/
   
   Sitemap: http://blog.tangxiaozhu.com/search.xml   #注意修改为你自己的域名
   Sitemap: http://blog.tangxiaozhu.com/sitemap.xml
   Sitemap: http://blog.tangxiaozhu.com/baidusitemap.xml

2. 执行命令hexo d -g部署到github上。

   hexo d -g

再把爬虫协议文件提交给Google和百度。

• Google的旧版Search Console。

  

• 百度的网站管理工具。

  

谷歌收录和百度收录

查看网站是否被收录

在百度或Google浏览器中，以site:<your url>形式搜索你的博客。如果能搜到，就是被收录了。搜不到就是没有收录。

谷歌收录

百度收录

我们在前面已经把博客首页的网址收录到百度搜索引擎了，但当我们写出新的博客，产生新的链接后，需要把这些新的链接收录到百度。这里介绍两种实现自动收录的方式：主动推送和自动推送
主动推送
主动推送将新产生的链接立即推送给百度搜索引擎，从而保证新链接被尽早收录。

1. 使用命令npm install --save安装自动百度推送插件。

   npm install hexo-baidu-url-submit --save

2. 编辑站点配置文件，在文末添加以下代码：

   baidu_url_submit:
     count: 3                    ## 比如3, 代表提交最新的三个链接
     host: <www.henvyluk.com>    ## 在百度站长平台中注册的域名
     token: <your_token>         ## 请注意这是您的秘钥, 请不要发布在公众仓库里!
     path: baidu_urls.txt        ## 文本文档的地址, 新链接会保存在此文本文档里

   其中<your_token>可以在百度网址管理工具中找到：

   

3. 需要注意的是，编辑站点配置文件，确保字段url的值为你的域名。

   # URL
   ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
   url: https://buptccq.top #http://yoursite.com

4. 编辑站点配置文件，找到字段deploy,添加一个新的deploy类型-type: baidu_url_submitter。不同的deploy类型用-type表示。

   deploy:
   - type: baidu_url_submitter
   - type: git
     # repository: https://github.com/spring-quan/spring-quan.github.io
     repository: git@github.com:spring-quan/spring-quan.github.io.git
     branch: master

主动推送的原理如下：

• 产生新链接。hexo g会生成文本文件baidu_urls.txt，里面包含最新的链接。
• 推送新链接。hexo d会从文本文件baidu_urls.txt中读取新链接，再推送给百度。

自动推送
编辑主题配置文件，修改字段baidu_push的值为true。

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

参见：
基于Hexo搭建个人博客——进阶篇(从入门到入土)
Hexo Seo优化让你的博客在google搜索排名第一

##踩过的坑

1. “hexo server”本地启动时，报错如下：

   Unhandled rejection Error: ENOENT: no such file or directory, open '/MyBlog/themes/next/layout/_scripts/schemes/.swig'

   错误原因处在主题配置文件_config.yml存在不规范的内容。要仔细检查，规范化内容就行。修改过来之后，要先执行hexo clean,再hexo server就可以了。

参考文章

• Hexo官方教程
• Next官方教程
• markdown中文文档
• 打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化 【推荐，整理很系统】
• 基于Hexo搭建个人博客——进阶篇(从入门到入土)
• hexo的next主题个性化教程:打造炫酷网站
• Hexo搭建博客教程
• 手把手教你使用Hexo + Github Pages搭建个人独立博客
• 从 0 开始搭建 hexo 博客