搭建Hexo静态博客并使用Git部署到VPS

yoyo 6/10/2021 Hexo静态博客Git HooksLive2dSEO分析优化

# 1. Hexo简介

# 1.1 Hexo是什么

Hexo (opens new window) 是一个快速、简洁且高效的博客框架。 Hexo 使用 Markdown 解析文章，在几秒内即可利用靓丽的主题生成静态网页。

# 1.2 Hexo主题推荐

Hexo有着非常丰富的主题与插件供我们使用，可以从官网或者Github找到它们，以下推荐几款主题，本站使用的是kratos-rebirth主题。

Hexo主题：https://hexo.io/themes/ (opens new window)
Hexo插件：https://hexo.io/plugins/ (opens new window)

# 1.2.1 kratos-rebirth主题

项目地址：https://github.com/Candinya/Kratos-Rebirth (opens new window)

使用指南：https://github.com/Candinya/Kratos-Rebirth/blob/master/Kratos-Rebirth-Manual.md (opens new window)

Kratos-Rebirth主题

# 1.2.2 hexo-theme-next主题

项目地址：https://github.com/theme-next/hexo-theme-next (opens new window)

使用指南：https://github.com/theme-next/hexo-theme-next/blob/master/docs/INSTALLATION.md (opens new window)

hexo-theme-next主题

# 1.2.3 hexo-theme-yun主题

项目地址：https://github.com/YunYouJun/hexo-theme-yun/tree/dec237e7936524059c541dc4b5aa9ddff2a9a57d (opens new window)

使用指南：https://hexo-theme-yun.vercel.app/guide/#docker (opens new window)

hexo-theme-yun

# 1.3 Hexo与其他建站工具对比

Wordpress是动态生成工具，全球有31%的网站使用了Wordpress，它有各种主题和插件，而且也足够方便使用。但也有非常多的缺点，诸如：SEO不够友好，不够安全，对Markdown支持不好（插件支持，但样式不美观）。适合无任何编程基础的小白使用。

Hexo与Hugo是静态生成工具，可以利用主题快速生成静态页面，SEO友好，更安全，访问速度更快，使用Markdown编写文章并Git推送至仓库。适合有一定编程基础的开发者使用。

# 2. 搭建本地开发环境

# 2.1 本地搭建Git环境

# 2.1.1 下载安装Git

下载：Git官网 (opens new window)（墙内下载极慢，需要翻墙下载）

安装过程中一路next即可，安装成功后桌面右键单击出现Git GUI Here以及Git Bash Here

# 2.1.2 生成SSH KEY

本地Git仓库和远程仓库之间的传输是通过SSH加密的，先看一下C:\Users\xxx有没有.ssh目录，有的话再看下里面有没有id_rsa和id_rsa.pub这两个文件，如果没有就通过下面命令创建：

$ ssh-keygen -t rsa -C "[email protected]"                        // 生成SSH KEY

然后一路回车，这时你就会在用户下的.ssh目录里找到id_rsa和id_rsa.pub这两个文件。

# 2.2 本地搭建Node.js环境

# 2.2.1 下载安装Node.js

下载：Node.js官网 (opens new window)（下载对应平台的.msi版本即可）

测试：打开cmd，输入node -v和npm -v，若显示node和npm的版本号即安装成功。

# 2.2.2 npm换源

由于 npm 的源在国外，所以国内用户使用起来可能下载速度很慢，可换源解决此问题。

$ npm config set registry https://registry.npm.taobao.org  // 配置淘宝镜像
$ npm config get registry                                  // 验证配置是否成功

1
2

注：可使用以下命令清除设置的淘宝镜像

$ npm config delete registry
$ npm config delete disturl

1
2

# 3. 搭建服务器部署环境

以下我将采用Nginx+Docker部署的方式进行搭建，VPS系统用的是Debian 11 x86_64。VPS的购买及配置、域名解析、Docker的概念及使用...这些基本的就不再赘述了，如果不会的话见我的其他博客：VPS基本部署环境的搭建与配置 (opens new window)、Docker容器化及项目环境管理 (opens new window)。

# 3.1 使用OneinStack搭建Nginx并进行配置

# 3.1.1 OneinStack简介

项目简介：OneinStack是一套部署开发环境的脚本工具，它的部署方式是纯原生部署，我主要使用里面的Nginx，用来辅助生成配置。

项目地址：https://github.com/oneinstack/oneinstack (opens new window)

# 3.1.2 使用OneinStack搭建Nginx服务

$ wget -c http://mirrors.linuxeye.com/oneinstack-full.tar.gz && tar xzf oneinstack-full.tar.gz && ./oneinstack/install.sh --nginx_optio

注：OneinStack采用编译安装的方式搭建Nginx服务，速度比较慢，请耐心等待，常用的默认目录有：

Nginx安装目录: /usr/local/nginx
Nginx配置目录：/usr/local/nginx/conf
网站数据目录：/data/wwwroot/域名

1
2
3

# 3.1.3 创建网站开启HTTPS

OneinStack 内置了 acme.sh，它会自动帮你申请 SSL 证书。

$ cd ./oneinstack
$ ./vhost.sh

1
2

配置过程的参考示例如下（示例域名为www.demo.com）：

#######################################################################
#       OneinStack for CentOS/RedHat 7+ Debian 8+ and Ubuntu 16+      #
#       For more information please visit https://oneinstack.com      #
#######################################################################

What Are You Doing?
        1. Use HTTP Only
        2. Use your own SSL Certificate and Key
        3. Use Let's Encrypt to Create SSL Certificate and Key
        q. Exit
Please input the correct option: 2 【选择2】

Please input domain(example: www.example.com): www.demo.com 【输入域名】
domain=www.demo.com

Please input the directory for the domain:www.demo.com :
(Default directory: /data/wwwroot/www.demo.com): 【回车，使用默认配置】
Virtual Host Directory=/data/wwwroot/www.demo.com

Create Virtul Host directory......
set permissions of Virtual Host directory......

Do you want to add more domain name? [y/n]: n  【输入n，不添加其他域名了】

Do you want to redirect all HTTP requests to HTTPS? [y/n]: y  【输入y，强制HTTPS】

You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.

Country Name (2 letter code) [CN]: 【回车】

State or Province Name (full name) [Shanghai]: 【回车】

Locality Name (eg, city) [Shanghai]: 【回车】

Organization Name (eg, company) [Example Inc.]: 【回车】

Organizational Unit Name (eg, section) [IT Dept.]: 【回车】

Do you want to add hotlink protection? [y/n]: n 【输入n，不需要防盗链保护】

Allow Rewrite rule? [y/n]: y 【输入y，允许重写规则】

Please input the rewrite of programme :
wordpress,opencart,magento2,drupal,joomla,codeigniter,laravel
thinkphp,pathinfo,discuz,typecho,ecshop,nextcloud,zblog,whmcs rewrite was exist.
(Default rewrite: other): 【回车】
You choose rewrite=other

Allow Nginx/Tengine/OpenResty access_log? [y/n]: y  【输入y，允许日志记录】
You access log file=/data/wwwlogs/www.demo.com_nginx.log

#######################################################################
#       OneinStack for CentOS/RedHat 7+ Debian 8+ and Ubuntu 16+      #
#       For more information please visit https://oneinstack.com      #
#######################################################################
Your domain:                  www.demo.com
Virtualhost conf:             /usr/local/nginx/conf/vhost/www.demo.com.conf
Directory of:                 /data/wwwroot/www.demo.com
Rewrite rule:                 /usr/local/nginx/conf/rewrite/other.conf
Self-signed SSL Certificate:  /usr/local/nginx/conf/ssl/www.demo.com.crt
SSL Private Key:              /usr/local/nginx/conf/ssl/www.demo.com.key
SSL CSR File:                 /usr/local/nginx/conf/ssl/www.demo.com.csr

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

配置完成后，修改一下配置文件

$ vim /usr/local/nginx/conf/vhost/www.demo.com.conf

server模块删除内容：

  location ~ [^/]\.php(/|$) {
    #fastcgi_pass remote_php_ip:9000;
    fastcgi_pass unix:/dev/shm/php-cgi.sock;
    fastcgi_index index.php;
    include fastcgi.conf;
  }

  location /.well-known {
    allow all;
  }

1
2
3
4
5
6
7
8
9
10

server模块新增内容：

location ^~ /.well-known/acme-challenge/ {
  default_type "text/plain";
  allow all;
  root /data/wwwroot/www.demo.com/;  # 把路径换一下
}

1
2
3
4
5

检查并重载Nginx配置

$ nginx -t
$ nginx -s reload

1
2

注：使用nginx -t命令可以检查Nginx配置，若出现如下内容则说明配置正确。

nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

1
2

之后把资源文件放置到 /data/wwwroot/www.demo.com 目录即可，打开Chrome浏览器即可访问（如果出现403则需要给这个目录添加一下权限）。

# 3.2 VPS搭建Git环境

# 3.2.1 安装配置Git

Step1：下载安装Git服务器

$ apt-get install git

Step2：验证是否安装成功

$ git --version

若显示版本信息则说明安装成功。

# 3.2.2 创建用户并赋予权限

Step1：创建git用户

$ adduser git

用户名以git为例，根据提示设置密码。

Step2：赋予git用户权限

$ chmod 740 /etc/sudoers
$ nano /etc/sudoers

1
2

在root ALL=(ALL:ALL) ALL这一行下面添加git ALL=(ALL:ALL) ALL

# User privilege specification
root    ALL=(ALL:ALL) ALL
git     ALL=(ALL:ALL) ALL

1
2
3

保存退出后，修改回文件权限

$ chmod 440 /etc/sudoers

Step3：关闭git用户的shell权限

考虑到安全因素，需要禁止git用户ssh登录服务器，设置后git用户可以通过ssh正常使用git服务，但无法登录shell。

$ nano /etc/passwd

将最后一行的bash处改为git-shell

git:x:1001:1001:,,,:/home/git:/bin/bash 改成 git:x:1001:1001:,,,:/home/git:/bin/git-shell

# 3.2.3 初始化git仓库并配置SSH

Step1：初始化git仓库

$ cd /home/git                    //切换到git用户目录
$ mkdir blog.git                  //创建仓库目录，以blog.git为例
$ cd blog.git                     //进入仓库目录
$ git init --bare                 //使用--bare参数初始化为裸仓库，这样创建的仓库不包含工作区

1
2
3
4

Step2：查看公钥

打开本地的 git bash，输入以下命令查看公钥（前提是本地已经配好了git环境并完成初始化），复制公钥

$ cat ~/.ssh/id_rsa.pub

Step3：配置SSH

$ cd /home/git                   //切换到git用户目录
$ mkdir .ssh                     //创建.ssh目录
$ cd .ssh                        //进入.ssh目录
$ nano authorized_keys           //将本地的公钥复制到authorized_keys文件里

1
2
3
4

Step4：用户组管理

修改/home/git/blog.git目录的用户组权限为git:git

$ sudo chown git:git -R /home/git/blog.git

修改后执行下列命令后再查看

$ ls -l /home/git

# 3.2.4 本地连接远程仓库

打开本地的git bash，检出仓库并设置记住用户名和密码，然后我们就可以使用git进行版本控制了，git无需手动设置开机自启。

Step1：本地检出仓库

$ git clone ssh://git@ip:port/home/git/blog.git

Step2：设置记住用户名和密码

$ git config --global credential.helper store

# 3.3 VPS搭建网站环境

# 3.3.1 新建网站

Step1：通用的创建网站开启HTTPS见本文3.1节。

Step2：修改网站根目录的用户组权限为git:git

$ sudo chown git:git -R 网站根目录

修改后执行下列命令后再查看

$ ls -l 网站根目录

# 3.3.2 修改Nginx配置

在Nginx配置文件里注释掉以下代码

  location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
    expires 30d;
    access_log off;
  }
  location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
  }

1
2
3
4
5
6
7
8

再添加如下代码（按照自己的网站根目录来）

    location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
        root 网站根目录;
        access_log   off;
        expires      1d;
    }

    location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
        root 网站根目录;
        access_log   off;
        expires      10m;
    }

    location / {
        root 网站根目录;
        if (-f $request_filename) {
        rewrite ^/(.*)$  /$1 break;
        }
    }

    location /nginx_status {
        stub_status on;
        access_log off;
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

再把错误页配置里404错误页的配置注释放开

    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END

1
2
3
4

# 4. Git Hooks自动部署

# 4.1 自动部署原理

在本地编辑Markdown文章，然后使用Git推送到VPS的Git仓库。Git Hooks实际上就是当Git仓库收到最新的push时，将Git仓库接受到的内容复制到VPS上的网站目录内。相当于完成了手动将public文件夹复制到VPS的网站根目录里的操作。

# 4.2 配置Git Hooks

创建post-receive文件

$ cd /home/git/blog.git/hooks     //切换到hooks目录下
$ nano post-receive               //创建post-receive文件并编辑

1
2

复制下面的内容到post-receive文件中：

#!/bin/bash
GIT_REPO=/home/git/blog.git
TMP_GIT_CLONE=/tmp/blog
PUBLIC_WWW=网站根目录
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

1
2
3
4
5
6
7
8

保存退出后，赋予其执行权限

$ chmod +x post-receive

# 5. Hexo基本使用

# 5.1 搭建Hexo博客并部署到VPS

# 5.1.1 本地安装Hexo环境

先使用npm安装hexo-cli

$ npm install -g hexo-cli

安装完毕后，在适当的位置新建一个文件夹，并在文件夹内打开终端执行

$ hexo init
$ npm install

1
2

执行完后，文件夹目录结构如图所示：

Hexo目录结构

# 5.1.2 配置Hexo并连接远程Git仓库

在hexo根目录里打开git bash，先 clone 一下远程git仓库

$ git clone ssh://git@ip:port/home/git/blog.git

找到hexo根目录下的_config.yml文件，找到最后的deploy配置，修改为：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repo: git@ip:blog.git
    branch: master

1
2
3
4
5
6

安装hexo-deployer-git插件

$ npm install hexo-deployer-git --save

注：如果未安装该插件，后续执行hexo deploy命令的时候会报ERROR Deployer not found: git错误。

# 5.1.3 测试Hexo远程部署

新建一篇文章，先本地预览，再远程部署。

$ hexo new 文章名                // 然后打开\source\_posts目录下的对应md文档进行编写
$ hexo generate                 // 生成hexo静态网页，存在public目录下，这个也就是部署实际用到的
$ hexo server                   // 本地部署预览，打开http://localhost:4000进行查看（可用Ctrl+C中止）   
$ hexo deploy                   // 远程部署，打开https://域名即可访问

1
2
3
4

# 5.2 Hexo常用命令

hexo的命令可以简写，也可以合并使用，下面的常用命令也是能简写就简写。

$ hexo init                     // 新建hexo工作区
$ hexo n 文章名                  // 新建文章
$ hexo n page 页面名             // 新建单独页面
$ hexo g                        // 生成静态网页
$ hexo g --watch                // 生成静态网页并监视变动
$ hexo s                        // 本地部署预览
$ hexo s -p 5000                // 自定义端口
$ hexo d                        // 远程部署
$ hexo clean                    // 清除缓存
$ hexo h                        // 查看帮助
$ hexo v                        // 查看版本
$ hexo s -g                     // 生成并本地预览
$ hexo d -g                     // 生成并远程部署

1
2
3
4
5
6
7
8
9
10
11
12
13

# 5.3 Hexo更换主题

更换 Hexo 主题非常容易，只要把下载好的主题放到在 themes 文件夹内，并修改 _config.yml 内的 theme 设定，即可切换主题。

以 kratos-rebirth 主题为例，首先需要把该主题放到 themes 文件夹内解压，然后修改Hexo主目录的 _config.yml文件，theme处即为解压后的文件夹名。然后依次执行hexo clean和hexo s -g命令即可。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: kratos-rebirth

1
2
3
4

注：有的主题需要额外修改配置或者到主题文件夹内 npm install 某指定的包才可使用，具体参考主题的 README 进行配置。

另注：hexo使用某些主题会出现{% extends ‘_layout.swig‘ %} {% import ‘_macro/post.swig‘ as post_template %}问题，这是因为hexo在5.0之后把swig给删除了，需要自己手动安装。

$ npm i hexo-renderer-swig

# 6. 使用kratos-rebirth主题

注：以下采用的是kratos-rebirth主题的1.6.3版，其他版本可能与之有所出入，以糖喵大佬的文档为准。

# 6.1 运行kratos-rebirth主题

由于本主题使用了和Hexo默认主题landscape一样的ejs引擎，因此当你完成Hexo站点的安装后，并完成主题更换后，无需再安装其他依赖，能够直接运行本主题。

在运行之前，请将本主题下的_config.yml.example文件重命名为_config.yml（就放在主题目录下，不要去动Hexo根目录的那个）

# 6.2 kratos-rebirth主题配置说明

主题配置文件位置：./kratos-rebirth/_config.yml，配置说明详见原作者的 Kratos-Rebirth-Manual (opens new window)

# 6.3 其他补充说明

# 6.3.1 配置文件的位置

本主题的_config.yml和Hexo根目录的_config.yml都有网站页面的相关配置，有的配置找不到不妨去Hexo根目录的那个配置文件里找找看，比如分页配置、站点信息配置...就是在这里面配的。

# 6.3.2 添加RSS订阅

RSS(Really Simple Syndication)：简易信息聚合，当网站内容更新时，可以通过订阅RSS源在RSS阅读器上获取更新的信息。

要使我们的hexo博客也支持RSS，首先我们要安装hexo-generator-feed包。

$ npm install hexo-generator-feed

然后在Hexo根目录的_config.yml文件中配置该插件即可。

feed:
    type: atom
    path: atom.xml
    limit: false 
    content: true
    order_by: -date
    icon: /images/avatar.webp

1
2
3
4
5
6
7

详细配置说明见：https://github.com/hexojs/hexo-generator-feed (opens new window)

# 6.3.3 添加评论系统

推荐使用Waline评论系统，可以VPS部署也可以白嫖云服务部署，具体详见我的另一篇博客：使用Waline给Hexo静态博客添加评论系统 (opens new window)

# 6.3.4 添加Live2d看板娘

Live2d技术简介：是一种应用于电子游戏的绘图渲染技术，由日本Cybernoids公司开发，通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。

下面我们将Live2d看板娘整合到Hexo博客里。

Step1：首先需要下载live2d依赖包

$ npm install --save hexo-helper-live2d

Step2：去Github或npm里下载Live2d模型

Github上有很多开源的Live2d模型，我们可以直接使用。详见：https://github.com/summerscar/live2dDemo (opens new window)

我从中挑了几个自己比较喜欢的看板娘模型，从左到右依次是：live2d-model-hijiki、live2d-model-kesyoban、live2d-model-poi、live2d-model-tororo、live2d-model-yukari。

Live2d-Models

在Hexo的根目录新建一个live2d_models目录，将下载的模型放进去（一个模型一个文件夹）

Step3：在_config.yml文件里添加参数

在Hexo根目录的_config.yml文件里配置下添加以下参数（根据自己需要进行调整即可）：

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
 enable: true  # 是否开启live2d看板娘
 scriptFrom: local
 pluginRootPath: live2dw/
 pluginJsPath: lib/
 pluginModelPath: assets/
 tagMode: false
 debug: false
 model:
   use: live2d-model-yukari   # live2d模型
 display:
   position: left     # 左侧或右侧
   width: 150         # canvas的宽度
   height: 300        # canvas的高度
   hOffset: 25        # 水平偏移
   vOffset: -75       # 垂直偏移
 mobile:
   show: false        # 是否在移动设备上显示
   scale: 0.5         # 移动设备上的缩放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Step4：执行hexo clean和hexo d -g命令重新部署即可看到Live2d看板娘。

注意事项：这里的Live2d模型不能是加密后的lpk文件，从Steam下载的很多模型都是这种的，愿意折腾就逆向工程破解，懒得折腾还是换个能用的模型吧。

# 6.3.5 定制友链页面

如果要使用默认的友链页面：本主题配置文件里friends下的href: 处填href: "friends"，然后填写page、list、 verify等信息。

如果要定制友链页面，本主题配置文件里friends下的href: 处留空，然后填写list、verify等信息，最后在任一页面或文章里使用{% friends %}引用。

另注：使用hexo n page 页面名命令去生成单独的页面，这样它不会出现在博客列表里。

# 6.3.6 定制文章模板

hexo 根目录下的 scaffolds 目录里放置文章模板，为了与kratos-rebirth主题搭配使用，修改 post.md 的内容如下：

---
title: {{ title }}
comments: true
toc: true
date: {{ date }}
categories: 
tags:
pic:
---

1
2
3
4
5
6
7
8
9

这样 hexo new 的时候，添加的文章页面就自动带上了所需的文章模板内容。

# 6.4 二次开发说明

为了保证最终部署时的有效空间利用，kratos-rebirth引入了gulp对静态资源文件（js、css）进行压缩，因而在src文件夹下直接修改的静态文件会无法实时生效。

修改完代码后，应执行 npm run build 命令来构建一次静态文件。构建完后，使用 hexo s 命令进行本地效果预览，线上的话可能会受CDN的影响导致效果没有及时生效。

# 7. 网站开启CDN服务

# 7.1 CDN与Cloudflare是什么

CDN的全称是Content Delivery Network，即内容分发网络。 CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。 CDN的关键技术主要有内容存储和分发技术。

Cloudflare 是一家全球最著名的 CDN 加速服务商，提供了免费和付费的网站加速和保护服务。即使是免费版，也提供了比较全面和强大的功能，非常不错。对于国外访问（或者使用代理）的加速效果十分明显，但对国内访问加速效果十分有限，如果是国内商用的话还是要买国内的CDN服务。

Cloudflare-CDN

通过使用 Cloudflare CDN 服务提供的全球节点，一方面可以提高网站响应速度和性能，节省源站资源；另一方面也可以保护站点抵御攻击，保证网站长期稳定在线。

# 7.2 开启 Cloudflare CDN 服务

Step1：打开 Cloudflare CDN官网 (opens new window)注册账号，登录后点击添加站点（填根域名即可），选择选择 Free 套餐，确认计划。

Step2：这时 Cloudflare 会自动扫描域名已有的 DNS 解析记录，如果扫描到的话，会显示在下面，没有或者显示不正确，则需要我们自己设置。

Step3：添加成功后会显示在下面，点击 Continue 继续，按说明修改自己的域名服务器为 Cloudflare 给出的地址。

修改域名服务器地址

NameSilo的修改方式是：勾选域名——点击Change Nameservers——删掉原有的名称服务器，添加新的域名服务器。

NameSilo修改域名服务器

注：修改域名服务器后需要一定时间生效，不会立即检测到，需要稍微等待一会儿（可打开cmd输入nslookup 域名进行验证，如有多个IP出现，则证明已生效）。配置了CDN之后再ping域名指向的就不是我们服务器本身的IP地址了，这样对保护我们的服务器也有好处。

Step4：CDN生效后主页的域名处会标注绿色的“有效“二字，这时我们就可以开启CDN的各种服务了，根据自己需求进行配置就好。

Cloudflare-CDN功能

# 7.3 CDN缓存问题

开启了CDN之后，网站的一些静态资源在更新后不会即时刷新，需要等待一段时间。如果你是在调试过程，想要即时看到结果，可以开启开发模式（登录Cloudflare CDN——缓存——配置——打开“开发模式”的按钮）

Cloudflare-CDN的开发模式

# 8. SEO分析优化

# 8.1 网站SEO分析

[1] 借助 Google Search Console (opens new window) 分析Google搜索引擎的收录情况

[2] 借助站长工具 (opens new window) 分析搜索引擎对站点的收录情况

站长工具

[3] 借助“SEOquake (opens new window)”Chrome扩展程序，获取网站SEO信息。

打开目标网站，工具条就自动显示出该网站的alex排名、google、bing、百度收录量，外链内链数量等信息。

[4] 借助Google的 https://web.dev/measure/ (opens new window) 在线工具或“Lighthouse (opens new window)”Chrome扩展程序，获取网站响应速度及SEO信息，并给出修改建议。

Lighthouse

# 8.2 提交站点地图

# 8.2.1 什么是站点地图

站点地图是可帮助搜索引擎查找、爬取和索引网站的所有内容。它还会告诉搜索引擎您网站上的哪些页面最重要。

网站地图主要有四种类型：

普通XML网站地图：这是迄今为止最常见的网站地图类型。通常以XML Sitemap的形式链接到您网站上的页面。
视频站点地图：专门用于帮助Google了解您页面上的视频内容。
新闻站点地图：帮助Google在“Google新闻”审核过的网站上查找内容。
图片站点地图：帮助Google 查找您网站上托管的所有图片。

# 8.2.2 为什么网站地图很重要

正如Google所说：“如果正确链接了您网站的页面，则我们的网络爬虫通常可以发现您的大部分网站内容。”

Google在很大程度上是通过链接找到网页，如果您的网站是全新的，并且只有很少的外部反向链接，那么网站地图非常适合帮助Google在您的网站上查找页面。

# 8.2.3 如何生成并提交网站地图给Google

Step1：需要安装hexo-generator-sitemap插件来生成 sitemap 文件。

$ npm install hexo-generator-sitemap --save

另注：使用第三方站点地图生成器（不推荐），例如 http://XML-Sitemaps.com (opens new window)，它将生成一个XML文件，可以将其用作站点地图。

Step2：修改站点配置文件

将sitemap文件添加到站点配置文件_config.yml中，并修改url字段的值

url: https://域名
sitemap: 
  path: sitemap.xml

1
2
3

安装完成后执行hexo g即会在站点public目录下生成sitemap.xml和baidusitemap.xml

Step3：添加蜘蛛协议

在站点source文件夹下新建robots.txt文件，文件内容如下：

User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/ 
Allow: /resources/ 
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://域名/sitemap.xml
Sitemap: https://域名/baidusitemap.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Allow字段的值即为允许搜索引擎爬区的内容，可以对应到主题配置文件中的menu目录配置，如果菜单栏还有其他选项都可以按照格式自行添加。

Step4：先执行hexo clean清理原来的目录，再执行hexo d -g命令重新生成并部署（里面包含了sitemap.xml和robots.txt文件）

Step5：打开Google Search Console，完成站点验证，提交站点地图，测试 robots.txt 文件。

“完成站点验证、提交站点地图”这两步操作根据提示信息来即可。
“测试 robots.txt 文件”的位置比较隐蔽，先点击左侧的”旧版工具和报告“，再点击“了解详情”即会在右侧出现“robots.txt测试工具”的链接（即：https://www.google.com/webmasters/tools/robots-testing-tool），选择资源进行测试即可。

# 8.3 修改博文链接格式

Hexo默认的文章链接格式为domain/year/month/day/postname，是一个四级url，对搜索引擎是十分不友好的，我们可以将其改成对搜索引擎友好的domain/postname 格式。编辑站点_config.yml文件，修改其中的permalink字段改为permalink: :title.html即可。

# permalink: :year/:month/:day/:title/
permalink: :title.html

1
2

# 9. 参考资料

[1] Hexo搭建个人博客并使用Git部署到VPS from 简书 (opens new window)

[2] 解决git /usr/bin/bash: line 0: exec: nc: not found 问题 from idzd (opens new window)

[3] 自定义 Git - Git Hooks from Git官方文档 (opens new window)

[4] hexo d命令报错 ERROR Deployer not found: git from CSDN (opens new window)

[5] Hugo零基础建站教程 from gohugo (opens new window)

[6] Hexo博客部署到VPS from 岁虚山 (opens new window)

[7] Hexo+Github搭建个人博客(Sagiri主题) from gudo (opens new window)

[8] Sagiri主题的css文件加载不出来问题 from Github issues (opens new window)

[9] hexo使用theme出现“extends layout.swig“问题 from CSDN (opens new window)

[10] Hexo的一个小BUG(Template render error) from 简书 (opens new window)

[11] Kratos-Rebirth食用说明 from 糖果部落 (opens new window)

[12] 什么是站点地图？如何优化站点地图？from 知乎 (opens new window)

[13] Hexo博客Next主题SEO优化方法 from hoxis' blog (opens new window)

[14] 为hexo博客添加RSS订阅功能 from segmentfault (opens new window)

[15] 在Hexo添加live2d看板娘模型 from 米奇GiaoGiao屋 (opens new window)

[16] live2d模型示例 from Github (opens new window)

[17] hexo文章模板设置 from 简书 (opens new window)

[18] Vuepress SEO优化教程(附完整方法) from 腾讯云 (opens new window)

Quantum Bit