Hexo加速

本文将探讨Hexo多个方面的加速，不仅仅局限于访问加速。

1.迁移部署加速

当我们拥有多个电脑时，在不同的电脑上部署Hexo进行写作成为一项重复而枯燥的工作。同时，在电脑上部署各种版本的Node，对于前端工作人员也是一个噩梦，前端同学常常需要小心谨慎的将自己的作品和工作中开发的产品环境区分开来。

在现代化开发中，Docker可以极大的缩短开发人员的时间，本文将使用Docker部署Hexo，实现迁移部署加速。

Docker让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。

1.1 Docker安装部署

本文基于Linux Ubuntu发行版环境编写

1.Docker安装

# 如果安装了旧版本需要先卸载
sudo apt-get remove docker docker-engine docker.io
sudo apt-get update
sudo apt-get install apt-transport-https ca-certificates curl gnupg2 software-properties-common
curl -fsSL http://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
sudo apt-get update
sudo apt-get install docker-ce=5:18.09.7~3-0~ubuntu-bionic
# 指定Docker版本，可以使用命令 apt-cache madison docker-ce 查询docker 版本号
# 安装 pip 和 docker-compose文件
apt install python-pip
pip install docker-compose

2.Docker国内镜像源加速

1 2	systemctl stop docker vim /etc/docker/daemon.json

将registry-mirrors设置为国内镜像源,本文中加入了docker默认中国源、163源以及USTC源。
daemon.json文件内容为：

1
2
3

{
    "registry-mirrors": ["https://registry.docker-cn.com","http://hub-mirror.c.163.com","https://docker.mirrors.ustc.edu.cn"]
}

1.2 编写Docker文件

本文目录结构如下：

.
├── docker-compose.yml
├── node
│   ├── Dockerfile
│   └── entrypoint.sh
└── src
    ├── _admin-config.yml
    ├── _config.landscape.yml
    ├── _config.yml
    ├── _config.yml.backup.yml
    ├── db.json
    ├── gulpfile.js
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    ├── public
    ├── scaffolds
    ├── source
    └── themes

docker-compose.yml 负责node环境的控制、环境变量设置、容器文件映射到本地

node目录存放node的Dockerfile以及启动脚本

src目录存放Hexo文件，和容器中的Hexo目录文件相同，互相映射。目录下详细的文件解释本文不展开详述。

Dockerfile文件内容

FROM node:14.15
#基于node14.15容器镜像构建
RUN npm config set registry https://registry.npm.taobao.org
#设置淘宝源加速

WORKDIR /app
VOLUME  /app
#设置根目录下app目录为博客目录

RUN cd /app && npm install hexo-cli -g
#安装hexo

ENV NODE_ENV production
ENV NODE_PORT 4000
ENV HEXO_GENERATE_WATCH true
#设置默认环境变量，可在docker-compose文件中修改默认值
EXPOSE 4000

COPY entrypoint.sh /entrypoint.sh

RUN ["chmod", "+x", "/entrypoint.sh"]

ENTRYPOINT ["/entrypoint.sh"]
#设置入口点脚本
CMD ["server"]

入口点脚本实现了Hexo的几个核心功能：

hexo初始化
hexo生成站点地图
启动hexo服务
hexo-cli接口

文件内容为：

#!/bin/sh

if [ "$1" = 'init' ]; then
    cd /app
    hexo init
    npm install 
elif [ "$1" = 'bash' ]; then
	/bin/bash
elif [ "$1" = 'update' ]; then
    cd /app
    npm install hexo-generator-sitemap --save
elif [ "$1" = 'server' ]; then
    cd /app
#Check Hexo initialized or not
    hexo list post > /tmp/posts
    hexo list category > /tmp/categories
    diff /tmp/posts /tmp/categories > /dev/null
    if  [ "$?" = "0" ];then
        cd /app
        hexo init
        npm install
        hexo s
    else
        hexo s
    fi
else
    cd /app
    echo "$*"
    hexo "$*"
fi

其中在启动Hexo服务前，该脚本检查了是否安装过Hexo，如果未安装则初始化安装Hexo

docker-compose.yml文件内容非常简洁，定义了容器名称、本地Hexo源文件与容器Hexo源文件的映射

version: "3"
services:
  blog:
    build: "./node"
    container_name: blog_x9sec_v1
    volumes:
      - /Users/x9sec/blog_new/src:/app
    ports:
      - 4000:4000

1.3 启动运行

文件组织好后，仅需要两条命令即可启动我们的博客

1 2	docker-compose build docker-compose up -d

在启动后，如果我们需要使用hexo g生成静态文章或者hexo d发布文章，可以调用我们的脚本Hexo cli接口，调用方法：

docker exec blog_x9sec_v1 /entrypoint.sh g 
#等价于 hexo g
docker exec blog_x9sec_v1 /entrypoint.sh deploy 
#等价于 hexo deploy

2.访问加速

我们可以使用GitHub Page服务来托管自己的博客，GitHub Page具有免费、使用简单、自带SSL、免费绑定域名且无需你懂得的特点。

但是对于国内用户来说，GitHub Hexo服务访问速度常年不稳定，访问Hexo经常无响应，也比较头疼，下面从几个角度来优化国内Hexo访问速度。

2.1 静态资源CDN

一般博客访问速度慢的罪魁祸首当属静态资源了，静态资源一般包含我们的CSS、JavaScript、字体图标、图片等文件，这些文件一般较大，因此将此类文件设置为走CDN便可以极大的提高访问速度。

CDN原理

国内建立多个用于缓存静态页面的服务器
建立缓存区指向国外的站点，将其缓存到到国内的服务器
生成指向国内缓存的CANME（IP地址的别名）
将要加速的域名解析到上述CANME上，实现该域名访问时的加速

国内CDN服务商比较多，可以选择腾讯云COS（Cloud Object Storage）、阿里云OSS（Object Storage Service）、七牛云CDN等，好处自然不用多说，付费，稳定，速度好。

本文来讲一个免费的方案来加速Hexo访问。
https://www.jsdelivr.com/
jsdelivr是一个针对开源软件的免费CDN加速方案，其支持npm、GitHub、Wordpress的加速。

在Hexo安装好后，可以安装hexo-cdn-jsdelivr插件，来对静态资源进行加速，安装方法：

1	npm install hexo-cdn-jsdelivr --save

然后在Hexo的_config.yml加入如下代码：

jsdelivr_cdn:
  # 如果 use_cdn 被设置为false， 则该插件不会工作
  use_cdn: true 
  
  # 如果 deploy_when_generating 被设置为true, 那么静态资源目录将会在每次使用'hexo g'命令生成hexo项目的时候被推送到github。如果被设置为false，则只会在deploy时被推送。你也可以在该标志设置为false时使用'hexo g cdn'命令手动推送到github。
  deploy_when_generating: true
  
  # cdn_url_prefix是jsdelivr上你的github仓库(这是专门用来作CDN加速的静态资源仓库而非原hexo项目的部署仓库)的对应网址，应该形如 https://cdn.jsdelivr.net/gh/<username for github>/<assets repo name>/
  cdn_url_prefix: <你在github上的静态资源仓库对应的jsdelivr网址>
  
  # git_repo_url是你github上的静态资源仓库的url，应该形如[email protected]:<username>/<repo>.git
  git_repo_url: <github上的静态资源仓库的url>
  
  # 你可以使用Github token来验证推送你的资源仓库。如果不想使用token验证，那么只要将token值设置为空或者注释掉这一行即可。我们不推荐将token直接写在_config.yml中。我们推荐使用环境变量储存token，只要将token值的第一个字符设置为'$',该插件就会从该环境变量中读取。例如你可以使用'$GITHUB_TOKEN'环境变量来储存token。当使用token验证时，必须通过http(s)连接的方式。更多关于Github token的信息可以去 https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line 内查看。
  token: <your github auth token, optional>
  
  # asset_dirs是可选的需要上传至github静态资源仓库的目录列表，其中的每一个资源目录应该是相对于你的hexo项目目录的路径， 例如 assets 或者 source/assets 或者 themes/<theme name>/assets 。如果你只是想用CDN加速你的post中的图片，则可以不设置asset_dirs
  asset_dirs:
    - /themes/simple/source/css
    - /themes/simple/source/js
    - /themes/simple/source/img
    - /themes/simple/source/fonts

如果你使用了本文第一章的Docker部署，安装该插件，修改配置后，请执行docker-compose restart重启Hexo，以使Hexo生效

配置完成后，还需要在主题模版中对静态资源引用代码进行修改。

Hexo主题中,对于ejs模板使用<%- css('/assets/path')%> 来生成CSS引用代码,安装插件后，可以使用<%- cdn_css('/assets/path')来生成CDN引用。
支持的函数如下：

<!-- 使用举例 -->
<%- cdn_css('style.css') %>
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/<username>/<repo>@latest/css/style.css"> -->

<%- cdn_js('test.js') %>
<!-- <script src="https://cdn.jsdelivr.net/gh/<username>/<repo>@latest/js/test.js"></script> -->

<img src="<%- cdn_asset('assets/test.png') %>"/>
<!-- <img src="https://cdn.jsdelivr.net/gh/<username>/<repo>@latest/assets/test.png"/>  -->

配置和模板修改完成后，接下来使用hexo g命令时，会将配置的静态资源目录文件上传至你的GitHub仓库中，之后使用hexo deploy命令进行发布，就可以看到加速后的效果了，比如我的博客。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Nash-x9/blog_assets@latest/css/bootstrap.min.css?ver=4.5.0" type="text/css" media="all">
        
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Nash-x9/blog_assets@latest/css/fontawesome.min.css?ver=5.13.0" type="text/css" media="all">
        
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Nash-x9/blog_assets@latest/css/iconfont.min.css?ver=3.1.0" type="text/css" media="all">
        
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Nash-x9/blog_assets@latest/css/layer.min.css?ver=3.1.1" type="text/css" media="all">
        
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Nash-x9/blog_assets@latest/css/kratos.min.css?ver=3.2.5" type="text/css" media="all">

插件原理

1.配置静态资源目录
2.插件读取该目录，并将其push到你的另外一个Git仓库（静态资源仓库）中
3.利用jsdelivr可以对指定仓库的指定文件进行加速的特性，对静态资源进行加速。

2.2 图床加速

目前大家屏幕分辨率越来越高，文章中的图片大小不可避免的越来越大了，对于图片我们也可以使用专门的图床进行加速，这里的加速原理和CDN很类似，也可以使用CDN文中的三款商业产品，本文仅提供思路，不再详细讲述。

2.3 动态解析加速

当我们博客同时托管在Coding Page和GitHub Page时，我们可以选择一些支持智能解析的DNS服务进行分地域解析，比如国内用户解析至Coding、国外用户解析至Coding Page。

3.文章撰写加速

Hexo使用Markdown作为文章原始语言，之后会将Markdown转换为Html超文本标记语言，好的编辑器是我们加快文章编写速度的良药。这里推荐两个方案：

3.1 使用Hexo-Admin进行文章管理、文章发布

仅需要一条命令即可，之后访问你的博客地址/admin即可访问后台。

1	npm install hexo-admin --save

这里相同的，如果您使用了前文的Docker部署方式，请执行docker-compose restart重启重启，以使得插件生效

3.2 使用Typora编辑器进行文章编辑

Typora是一款免费的Markdown编辑器，支持动态显示效果，同时具有动态显示大纲、可导出PDF、Word、HTML等多种格式的优点。