2019年末，来一发基于Hexo自建博客生态指南！

作者： Lateautumn4lin 来源：云爬虫技术研究笔记

本文篇幅较长，涉及的面较广，通篇阅读大概需要半个小时左右。建议时间紧迫的大佬们可以先收藏文章，之后闲时再细细阅读，个人预览DEMO，有关文中具体涉及到的工具大家可以关注公众号《云爬虫技术研究笔记》回复关键词“博客”获取“一键图床工具”和“无损压缩工具”，可以查看原文获取更好的阅读体验。 必读前言

“个人博客”这一名词从很早前就广为人知了，对程序猿来说，“个人博客”也可以算是程序员们的“私人乐园”，让各位码农们可以在自己的私人博客里放飞自我。而搭建“个人博客”的方式也是五花八门，例如：

博客搭建方式

1. 可以利用现成的博客社区，例如CSDN、知乎等等；

2. 利用熟悉的语言，自己开发前后端，再把项目部署到私人服务器上；

3. 利用现成的博客构建框架，结合第三方的平台进行部署，并借由第三方平台维护；

当然，每种方式都有自己的优缺点：

第三方博客社区的优缺点

博客社区有极大的读者流量，并且做好了SEO优化，提供了现成的写作工具和数据分析报告等等；但是缺点是不够自由，像知乎专栏那样千篇一律的样式；像CSDN逼迫不登录就不能浏览文章的恶心人的限制；像。。。好吧~~被这些网站的约束打败了。。。

自建服务器全栈开发博客

自己大包大揽，拥有极大的权限，想怎么改就怎么改，当然~~只要你会。但是苦的是要服务器，要学前端框架，学后端框架，学。。。好吧，懒人党表示拒绝！

最后是利用现成的博客构建框架，搭建个人博客的框架是一代又一代的更换，从最早的基于Php开发的WordPress、到之后的基于Ruby开发的Jekyll、再到近几年凭借部署方便，编译速度快等特性而迅速火起来的基于Node开发的Hexo和基于Go开发的Hugo，都是让人很容易上手，并且可以结合国外的Github平台以及国内的码云平台进行部署，熟练的话简直可以说10分钟就部署好自己的博客，真的是懒人党、伸手党的福音。当然，缺点也是有的，没自建博客那么高的自由度，没博客社区那么好的优化程度，但是转念一想，结合还算可以的自由度再加上我们自己简单的优化也还过得去。

好！看完以上的分析，我们就打算使用现成的博客框架来做，其实网上关于每个框架的教程都比较多，但是更多的是关于如何从0到1一步步搭建完博客的流程，而没有介绍搭建完博客的后续，此处给各位点到即止的作者一个差评！来个疑问多连！

壹伴编辑器

搭建完博客就摆着吗？

不做图片、Js脚本加载优化吗？

不做SEO优化吗？

不介绍如何自定义开发吗？

嗯！对，相信很多人在搭建完博客之后也会有同样的疑问，那么这篇文章就给你满意 的答案，我不会再重复那些搭建步骤，大家可以自行搜查教程哈，本文着重讲解如何搭建博客生态，提升博客的逼格！再次提醒：

本文篇幅较长，涉及的面较广，通篇阅读大概需要半个小时左右。建议时间紧迫的大佬们可以先收藏文章，之后闲时再细细阅读。

Hexo博客生态搭建

话不所说，我们现在就开始从以下几个点入手（PS：为什么要选择Hexo呢？在如今Hugo以强劲性能称霸的时代环境之下，Hexo虽然性能差点，但是也是基于动态语言Node开发，相比于Jekyll还是有很大提升的，不过对我来说，最主要还是Hexo的生态中各种组件和模板比较丰富，对我这种对UI要求严格的人来说，Hexo是我不能拒绝的！）

1. 模板选择
2. 模板定制化修改
3. 网站SEO
4. 代码优化
5. 优化网站加载速度
6. Github+Coding国内外双线部署
7. 自建CDN资源
8. 网站预加载JS脚本
9. 快捷图床工具

1. 模板选择

很多人会质疑为什么模板选择都要提？如果你们不注重这点那你们就错了，好的模板也是一个博客的门面，一个结构清晰，对用户友好的模板会让读者很快的找到你博客中的重点，也会促进读者的留存率，一个模块丰富的模块也更能表达你自己，向读者展示你更多的才华。Github上面有很多模板，我们可以看一下：

我们直接搜索Hexo，并且按Star数量排序，就可以开始寻找我们想要的模板了，当然，为了更直观的寻找模板，我们可以直接去Hexo的官网，可以直接查看各个模板的样式图。

PS：给各位伸手党一个福利，我苦苦寻觅多时的符合我个人审美的模板hexo-theme-matery，也是由blinkfox大神开发的，有完整的中文说明，对新手来说极其友好，下面提前欣赏一下大神的杰作吧。

我们照着文档轻松的改成自己博客的样子

2. 模板定制化修改

很多教程都是在这一步停止了，所以读者都要自己去重新搜怎么定制模板，属实麻烦。这里我对比了其他模板的定制化修改，总结了以下几个必备的私人定制：

2.1 添加404页面

原来的主题没有404页面，我们加一个。我们可以根据Hexo的语法新建个404的目录：

hexo new page "404"

然后我们可以在source/404/下编辑index.md文件

---
title: 404
permalink: /404
type: "404"
layout: "404"
date: 2019-11-18 23:49:08
---
## 爆炸,页面炸没了！

这样我们就完成了一个增加了404的功能，如果我们自己需要额外定制404的样式，可以参考404模板之家，我也是刚刚知道竟然还有这种网站。

2.2 添加评论插件

由于这个主题自带了gittalk、gitment、valine等评论插件，所以我们只需要配置好对应插件参数就行了，这个博客用的是gittalk，配置大致如下：

最后呈现的效果是这样的：

当然也可以用其他评论插件，只需要配置对应项就是了，不是自带的可以照着网上的教程自己弄一个，类似的文章有很多，可以搜索关键字就行了。

2.3 添加网易云音乐BGM

写文章的时候，想插入一段BGM怎么办？

• 首先我们找到网易云在线平台，任意找到一首歌点进去播放，可以在地址栏拿到音乐ID号
• 然后通过下面网址：http://music.163.com/song/media/outer/url?id=XXXXXX.mp3， XXXXXX就是歌曲ID号，每一首歌我们只需要换掉这个ID号就行了,就相当于每一首的外链了
• 最后封面图也可以按F12去找页面元素的链接，填到对应的musics.jason文件中就可以，批量填入，听到好听的歌曲随时更换随时新增，很方便。

主要的修改就是这三部分，其他的可以各位大佬的特殊癖好去定制化修改了，其实Hexo的定制化各个模板也都是通用的，因此，大家直接搜索Hexo修改就行啦！

3. SEO优化

过去的程序员写文章可能是为了让自己做些技术积累，每隔一段时间可以总结自己的技术。不过如今自媒体发展迅速，我们在沉淀技术的同时当然也需要让更多人了解自己，在技术圈里出点小名气~~，那如何能够让更多人知道自己呢？SEO就是一个需要了解的东西了，SEO也就是搜索引擎优化，指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化，换句话说相当于网站推广，网站推广是一个比较烦人的事情，特别是对于专心搞技术的来说，可能就不是很擅长，所以下面教大家两个比较简单的SEO技巧。

3.1 让百度收录你的站点

查看百度是否收录你的站点

首先要做的就是让各大搜索引擎收录你的站点，我们在刚建站的时候各个搜索引擎是没有收录我们网站的，在搜索引擎中输入site:<域名>，如果如下图所示就是说明我们的网站并没有被百度收录。我们可以直接点击下面的“网址提交”来提交我们的网站

主动添加站点

登录百度站长搜索资源平台：http://zhanzhang.baidu.com， 只要有百度旗下的账号就可以登录，登录成功之后在站点管理中点击添加网站然后输入你的站点地址。

在填完网址选择完网站的类型之后需要验证网站的所有权，验证网站所有权的方式有三种：

• 文件验证。
• html标签验证
• CNAME解析验证（推荐使用）

推荐使用CNAME解析验证，因为它最简单，只需加一条解析就好

生成网站地图

我们需要使用npm自动生成网站的sitemap，然后将生成的sitemap提交到百度和其他搜索引擎

安装sitemap插件

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

修改博客配置文件

在根目录配置文件.yml中修改url为你的站点地址

执行完hexo g命令之后就会在网站根目录生成sitemap.xml文件和baidusitemap.xml文件，可以通过：https://cloudcrawler.club/baidusitemap.xml， 查看该文件是否生成，其中sitemap.xml文件是搜索引擎通用的文件，baidusitemap.xml是百度专用的sitemap文件。

为什么要生成网站地图呢？主要的原因是网站地图表示了你的博客网站的结构，例如某一分类下面哪些文章等等，也是方便百度爬虫去爬取你的时候尽可能覆盖你想要被爬取的所有文章，便于他们收录，不过我们下面会讲我们将为百度主动提交链接，这样的话，网站地图也显得不是那么重要。

向百度提交链接

我们可以将我们之前那生成的sitemap文件提交给百度，还是在百度站长平台，找到链接提交，这里我们可以看到有两种提交方式，自动提交和手动提交，自动提交又分为主动推送、自动推送和sitemap。

如何选择链接提交方式呢？

1. 主动推送：最为快速的提交方式，推荐您将站点当天新产出链接立即通过此方式推送给百度，以保证新链接可以及时被百度收录。 2. 自动推送：最为便捷的提交方式，请将自动推送的`JS`代码部署在站点的每一个页面源代码中，部署代码的页面在每次被浏览时，链接会被自动推送给百度。可以与主动推送配合使用。 3. `sitemap`：您可以定期将网站链接放到`sitemap`中，然后将`sitemap`提交给百度。百度会周期性的抓取检查您提交的`sitemap`，对其中的链接进行处理，但收录速度慢于主动推送。 4. 手动提交：一次性提交链接给百度，可以使用此种方式。

一般主动提交比手动提交效果好，这里介绍主动提交的三种方法

从效率上来说：

主动推送>自动推送>sitemap

我们下面将会具体操作主动推送

设置主动推送 安装插件hexo-baidu-url-submit

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

然后再根目录的配置文件中新增字段

baidu_url_submit:
  count: 80 # 提交最新的一个链接
  host: www.sunhwee.com # 在百度站长平台中注册的域名
  token: xxxxxxxxxxxxxx # 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt # 文本文档的地址， 新链接会保存在此文本文档里

再加入新的deploy：

deploy:
- type: baidu_url_submitter

密钥的获取位置在网页抓取中的链接提交这一块,如下所示:

这样执行hexo deploy的时候，新的链接就会被推送了。

推送成功时,会有如下终端提示

success为1表示成功推送的url条数，remain表示当日还可以推送9995条

各种不同的推送反馈字段说明在这里查看,一般来说,推送失败基本都是地址不相符造成的,我们只需对比baidu_url_submit在public中生成的baidu_urls.txt的地址,与自己填写在host字段中的地址对比看是否一样即可。

3.2 其他搜索引擎优化

其他的搜索引擎类似于Google、搜狗、360搜索等等，不过一般还会Baidu和Google对于大多数程序员来说使用频率较高，因此，只需要做这两个搜索引擎的收录就行了。

3.3 优化你的url

seo搜索引擎优化认为，网站的最佳结构是用户从首页点击三次就可以到达任何一个页面，但是我们使用hexo编译的站点打开文章的url是：sitename/year/mounth/day/title四层的结构，这样的url结构很不利于seo，爬虫就会经常爬不到我们的文章，于是，我们需要优化一下网站文章url。

方案一：

我们可以将url直接改成sitename/title的形式，并且title最好是用英文，在根

目录的配置文件下修改permalink如下：

url: https://cloudcrawler.club
root: /
permalink: :title.html
permalink_defaults:

方案二：

使用插件优化url

插件hexo-abbrlink实现了这个功能，它将原来的URL地址重新进行了进制转换和再编码。

安装hexo-abbrlink。

npm install hexo-abbrlink --save

配置博客根目录下的_config.yml文件。

permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
  alg: crc32 # 算法：crc16(default) and crc32
  rep: hex # 进制：dec(default) and hex

运行hexo clean和hexo g命令来重新生成文件看看，可以清楚的看到，URL结构成功变为了3层。

3.4 其他seo优化

seo优化应该说是一个收益延迟的行为，可能你做的优化短期内看不到什么效果，但是一定要坚持，seo优化也是有很深的可以研究的东西，从我们最初的网站设计，和最基础的标签的选择都有很大的关系，网站设计就如我们刚刚说的，要让用户点击三次可以到达网站的任何一个页面，要增加高质量的外链，增加相关推荐（比如说我们经常见到右侧本站的最高阅读的排名列表），然后就是给每一个页面加上keyword和描述

在代码中，我们应该写出能让浏览器识别的语义化HTML，这样有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；并且对外链设置nofollow标签，避免spider爬着爬着就爬出去了（减少网站的跳出率），并且我们要尽量在一些比较大的网站增加我们站点的曝光率，因为spider会经常访问大站，比如我们在掘金等技术社区发表文章中带有我们的站点，这样spider是很有可能爬到我们中的站点的，so….

• 网站外链的推广度、数量和质量
• 网站的内链足够强大
• 网站的原创质量
• 网站的年龄时间
• 网站的更新频率（更新次数越多越好）
• 网站的服务器
• 网站的流量：流量越高网站的权重越高
• 网站的关键词排名：关键词排名越靠前，网站的权重越高
• 网站的收录数量：网站百度收录数量越多，网站百度权重越高
• 网站的浏览量及深度：用户体验越好，网站的百度权重越高

4. 代码优化

代码优化主要是想要让我们的代码块显示行号和整体复制，这两点对于读者在浏览文章以及复制代码的时候都是很关键的两点，所以我们也要进行优化，由于代码高亮插件prism_plugin的样式没有行号显示和代码块整体复制功能，不是很方便，为了优化观感和易用性，我们可以对其进行修改：

4.1 给代码块开启行号

我们在配置文件.yml中找到prism_plugin配置项line_number: false（# default false）改为true，开启行号，但是在我们这个matery主题中中是无效的，有bug需要改一下matery.css样式参数,在第115行位置将：

pre {
padding: 1.5rem !important;
margin: 1rem 0 !important;
background: #272822;
overflow: auto;
border-radius: 0.35rem;
tab-size: 4;
}

改为

pre {
padding: 1.5rem 1.5rem 1.5rem 3.3rem !important;
margin: 1rem 0 !important;
background: #272822;
overflow: auto;
border-radius: 0.35rem;
tab-size: 4;
}

注释掉紧接着的code代码块里面的font-size项，如下：

code {
    padding: 1px 5px;
    font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
    /*font-size: 0.91rem;*/
    color: #e96900;
    background-color: #f8f8f8;
    border-radius: 2px;
}

好了这下可以显示行号了，如图：

关于代码整体复制的功能在目前在插件中已经集成。

5. 优化网站加载速度

5.1 优化图片加载

优化网站图片加载的速度的通用方法大概就是两种：第一种就是就是使用图片懒加载，Hexo的插件中已经有实现该功能的插件了--也就是hexo-lazyload-image，hexo-lazyload-image的作用原理是讲你博客里面img标签的src属性替换为一个loading image，把真实的图片地址放在data-origin属性下面。然后当你的网页翻到那张图片时（也就是图片在窗口中完全可见时），他会有一段js用data-origin的内容替换src，打到懒加载的目的。

具体的使用方法是在博客根目录配置.yml文件加入对应字段，如下：

lazyload:
  enable: true
  onlypost: false
  loadingImg:   /images/loading.gif

好了，这样实现了博客网站的图片懒加载。效果大致类似于这样

懒加载示例

第二种就是就是把本地的图片进行无损压缩，这里给大家推荐一款工具Imagine，这是一款用于压缩 PNG 和 JPEG 的桌面应用程序，具有现代友好的 UI。

我们可以看到，我们把图片压缩了将近10倍，清晰度方面几乎是一样的，所以这种方式也能帮助我们做图片加载优化。

5.2 Gulp实现代码压缩

这里我们介绍一个工具，Gulp它是复制前端框架控制流的构建工具，作为流程工具，它集成了很多使用的功能，我们这里就使用它来做代码压缩，以提升网页加载速度。

首先我们需要安装Gulp插件和5个功能模块，依次运行下面的两条命令。

npm install gulp --save  #安装gulp# 安装功能模块
npm install 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 --save

接下来在博客的根目录下新建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/uploads 目录内图片
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", "compressImage", "compressJs")
  )
);
//Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数

最后 hexo clean && hexo g && gulp && hexo d 就可以了。

6. Github+Coding国内外双线部署

如大家所知，很多人不愿把博客部署到Github上面去，原因就是Github服务器在海外，对于我们访问速度是有瓶颈的，所以一些人会把网站部署在国内的代码托管网站，比如Coding和Gitee，我们这次选的是Coding来做国内的部署，虽然它今年以来惨剧不断，但是相信它会变好的。

具体的部署和Github类似，Coding现在被腾讯收购了，所以我们注册账号会跳转到腾讯云开发者平台，我们创建好项目之后，在Hexo根目录的配置文件中添加Coding的部署地址，如图：

添加完成后先执行命令 hexo clean 清理一下缓存，然后执行命令 hexo g -d 将博客双线部署到 Coding Pages 和 GitHub Pages，如下图所示表示部署成功：

接着我们开启CodingPage（PS: 真的是完全模仿GithubPage）

这是我们就已经在Github和Coding双线部署好了我们的服务，我们用数据来看一下是否Coding在国内真的快于Github。

结果很明显，Coding在国内真的很好用。接下来我们利用阿里云的智能解析来做智能路由

这样，我们的网站就实现了国内国外双线智能路由。

7. 自建CDN资源

介绍一款软件jsdelivr可以帮助我们做免费的CDN，它也有国内的服务器，因此我们无论在国外国内都可以使用。

8. 网站预加载JS脚本

推荐一个软件instant.page，作用是可以预加载用户想访问的页面，当用户真正点击链接后，就会直接从缓存中读取，以此提升网站的访问速度。

instant.page 原理的话我们不必深层了解，只需知道：

在用户点击网站链接之前，他们将鼠标悬停在该链接上。当用户徘徊 65 毫秒时，他们将点击该链接有两个机会，因此 instant.page 此时开始预加载，平均超过 300 毫秒，以便页面预加载。

instant.page 是渐进式增强 - 对不支持它的浏览器没有影响。

9. 快捷图床工具

推荐一款图床工具PicGo，大家可以把这个工具结合Github来使用，把Github作为图床或者是使用其他第三方网站，目前PicGo可以支持多个网站。

总结

有关Hexo博客生态介绍大致就是如上这些，希望大家都能够用的自己的博客上面，不仅仅是把博客当成一个记录自己成长的工具，更是把它做成一个展示自己的产品，能够好好的运营它。目前这个阶段大致介绍的几点建议如上所示，之后会陆续总结出新的博客生态的功能推荐和优化建议。