1. Hexo简介
1.1 Hexo是什么
Hexo 是一个快速、简洁且高效的博客框架。 Hexo 使用 Markdown 解析文章,在几秒内即可利用靓丽的主题生成静态网页。
1.2 Hexo主题推荐
Hexo有着非常丰富的主题与插件供我们使用,可以从官网或者Github找到它们,以下推荐几款主题,本站使用的是kratos-rebirth主题。
Hexo主题:https://hexo.io/themes/
Hexo插件:https://hexo.io/plugins/
1.2.1 kratos-rebirth主题
项目地址:https://github.com/Candinya/Kratos-Rebirth
使用指南:https://github.com/Candinya/Kratos-Rebirth/blob/master/Kratos-Rebirth-Manual.md
1.2.2 hexo-theme-next主题
项目地址:https://github.com/theme-next/hexo-theme-next
使用指南:https://github.com/theme-next/hexo-theme-next/blob/master/docs/INSTALLATION.md
1.2.3 hexo-theme-yun主题
项目地址:https://github.com/YunYouJun/hexo-theme-yun/tree/dec237e7936524059c541dc4b5aa9ddff2a9a57d
使用指南:https://hexo-theme-yun.vercel.app/guide/#docker
1.3 Hexo与其他建站工具对比
Wordpress是动态生成工具,全球有31%的网站使用了Wordpress,它有各种主题和插件,而且也足够方便使用。但也有非常多的缺点,诸如:SEO不够友好,不够安全,对Markdown支持不好(插件支持,但样式不美观)。适合无任何编程基础的小白使用。
Hexo与Hugo是静态生成工具,可以利用主题快速生成静态页面,SEO友好,更安全,访问速度更快,使用Markdown编写文章并Git推送至仓库。适合有一定编程基础的开发者使用。
2. 搭建本地开发环境
2.1 本地搭建Git环境
2.1.1 下载安装Git
下载:Git官网(墙内下载极慢,需要翻墙下载)
安装过程中一路next即可,安装成功后桌面右键单击出现Git GUI Here以及Git Bash Here
2.1.2 生成SSH KEY
本地Git仓库和远程仓库之间的传输是通过SSH加密的,先看一下C:\Users\xxx
有没有.ssh
目录,有的话再看下里面有没有id_rsa
和id_rsa.pub
这两个文件,如果没有就通过下面命令创建:
1 | $ 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官网(下载对应平台的.msi
版本即可)
测试:打开cmd,输入node -v
和npm -v
,若显示node和npm的版本号即安装成功。
2.2.2 npm换源
由于 npm 的源在国外,所以国内用户使用起来可能下载速度很慢,可换源解决此问题。
1 | $ npm config set registry https://registry.npm.taobao.org // 配置淘宝镜像 |
注:可使用以下命令清除设置的淘宝镜像
1 | $ npm config delete registry |
3. 搭建服务器部署环境
以下使用的VPS系统是Debian 10 x86_64。VPS的购买及配置、域名解析、宝塔面板的搭建及使用…这些基本的就不再赘述了,如果不会的话见我的另一篇博客:VPS基本部署环境的搭建与配置。
3.1 VPS搭建Git环境
3.1.1 安装配置Git
Step1:下载安装Git服务器
1 | $ apt-get install git |
Step2:验证是否安装成功
1 | $ git --version |
若显示版本信息则说明安装成功。
3.1.2 创建用户并赋予权限
Step1:创建git用户
1 | $ adduser git |
用户名以git为例,根据提示设置密码。
Step2:赋予git用户权限
1 | $ chmod 740 /etc/sudoers |
在root ALL=(ALL:ALL) ALL
这一行下面添加git ALL=(ALL:ALL) ALL
1 | # User privilege specification |
保存退出后,修改回文件权限
1 | $ chmod 440 /etc/sudoers |
Step3:关闭git用户的shell权限
考虑到安全因素,需要禁止git用户ssh登录服务器,设置后git用户可以通过ssh正常使用git服务,但无法登录shell。
1 | $ nano /etc/passwd |
将最后一行的bash
处改为git-shell
1 | git:x:1001:1001:,,,:/home/git:/bin/bash 改成 git:x:1001:1001:,,,:/home/git:/bin/git-shell |
3.1.3 初始化git仓库并配置SSH
Step1:初始化git仓库
1 | $ cd /home/git //切换到git用户目录 |
Step2:查看公钥
打开本地的 git bash,输入以下命令查看公钥(前提是本地已经配好了git环境并完成初始化),复制公钥
1 | $ cat ~/.ssh/id_rsa.pub |
Step3:配置SSH
1 | $ cd /home/git //切换到git用户目录 |
Step4:用户组管理
修改/home/git/blog.git
目录的用户组权限为git:git
1 | $ sudo chown git:git -R /home/git/blog.git |
修改后执行下列命令后再查看
1 | $ ls -l /home/git |
3.1.4 本地连接远程仓库
打开本地的git bash,检出仓库并设置记住用户名和密码,然后我们就可以使用git进行版本控制了,git无需手动设置开机自启。
Step1:本地检出仓库
1 | $ git clone ssh://[email protected]:port/home/git/blog.git |
Step2:设置记住用户名和密码
1 | $ git config --global credential.helper store |
3.2 VPS搭建网站环境
3.2.1 新建网站
Step1:宝塔面板安装Nginx环境(软件商店——搜索安装Nginx)
Step2:网站——添加站点——填写域名(不创建FTP、数据库、PHP)后提交即可
Step3:修改网站根目录的用户组权限为git:git
1 | $ sudo chown git:git -R 网站根目录 |
修改后执行下列命令后再查看
1 | $ ls -l 网站根目录 |
3.2.2 修改Nginx配置
网站——指定站点——设置——配置文件
在宝塔默认的配置文件里注释掉以下代码
1 | location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ |
再添加如下代码(按照自己的网站根目录来,宝塔生成的根目录默认为新建网站时加的域名)
1 | location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ { |
再把错误页配置里404错误页的配置注释放开
1 | #ERROR-PAGE-START 错误页配置,可以注释、删除或修改 |
3.3 申请泛域名SSL证书并开启HTTPS
SSL证书是一种数字证书,用于加密从用户的浏览器发送到Web服务器的数据。 通过这种方式,发送的数据对于使用Wireshark等数据包嗅探器来拦截和窃听您的通信的黑客来说是安全的。
Chrome一直在推动https,所有的http协议网站被标记为不安全,如果再不对网站进行https改造的话,那么可能会对信任度造成一定的影响,所以说对一个面向用户的网站来说,开启https是非常有必要的。
下面将使用acme.sh开源项目申请免费的Let’s Encrypt 泛域名SSL证书。
3.3.1 安装 acme.sh
1 | $ curl https://get.acme.sh | sh |
普通用户和 root 用户都可以安装使用,安装过程进行了以下几步:
[1] 把 acme.sh 安装到你的 root 目录下,并创建 一个 bash 的 alias, 方便你的使用。
[2] 自动为你创建 cronjob, 每天 0:00 点自动检测所有的证书, 如果快过期了, 需要更新, 则会自动更新证书。
注:安装过程不会污染已有的系统任何功能和文件,所有的修改都限制在安装目录中。那个socat未安装的问题不用管,那是http验证无Web Server时才需要的。
3.3.2 生成SSL泛域名证书
acme.sh 实现了 acme 协议支持的所有验证协议,一般有两种方式验证:http 和 dns 验证。
- http 验证:http 方式需要在你的网站根目录下放置一个文件,来验证你的域名所有权。
- dns 验证:dns 方式,在域名上添加一条 txt 解析记录,验证域名所有权。
dns 方式的可以使用域名解析商提供的 API 自动添加 txt 记录完成验证,下面我们将采用这种方法申请Namesilo的泛域名证书。
Step1:打开 https://www.namesilo.com/account/api-manager 去申请 NameSilo API,勾选第2个复选框,点击Generate,即可生成。
注:务必不要勾选上Generate key for read-only access的哪个复选框,否则会导致Unable to add the DNS record. Error add txt for domain
的问题。另外,生成的API只出现一次,如果没记下来只能重置。
Step2:在服务器输入以下命令,实现自动dns验证生成泛域名证书。
1 | $ cd /root/.acme.sh |
等待1800s即可看到申请下来的SSL证书(NameSilo的验证比较慢,官方文档上写的900s有时不足以验证完)
生成文件都放在/root/.acme.sh/example.com/
目录下,其中:example.com.key
是密钥文件,fullchain.cer
是证书文件。
注:如果你的域名不是NameSilo的,上述操作有所不同,具体请参考: https://github.com/acmesh-official/acme.sh/wiki/dnsapi
3.3.3 给网站开启HTTPS
打开宝塔面板——网站——设置——SSL——其他证书,把example.com.key
密钥文件、fullchain.cer
证书文件复制上去,强制https。
4. Git Hooks自动部署
4.1 自动部署原理
在本地编辑Markdown文章,然后使用Git推送到VPS的Git仓库。Git Hooks实际上就是当Git仓库收到最新的push时,将Git仓库接受到的内容复制到VPS上的网站目录内。相当于完成了手动将public文件夹复制到VPS的网站根目录里的操作。

4.2 配置Git Hooks
创建post-receive文件
1 | $ cd /home/git/blog.git/hooks //切换到hooks目录下 |
复制下面的内容到post-receive文件中:
1 | #!/bin/bash |
保存退出后,赋予其执行权限
1 | $ chmod +x post-receive |
5. Hexo基本使用
5.1 搭建Hexo博客并部署到VPS
5.1.1 本地安装Hexo环境
先使用npm安装hexo-cli
1 | $ npm install -g hexo-cli |
安装完毕后,在适当的位置新建一个文件夹,并在文件夹内打开终端执行
1 | $ hexo init |
执行完后,文件夹目录结构如图所示:
5.1.2 配置Hexo并连接远程Git仓库
在hexo根目录里打开git bash,先 clone 一下远程git仓库
1 | $ git clone ssh://[email protected]:port/home/git/blog.git |
找到hexo根目录下的_config.yml
文件,找到最后的deploy配置,修改为:
1 | # Deployment |
安装hexo-deployer-git
插件
1 | $ npm install hexo-deployer-git --save |
注:如果未安装该插件,后续执行hexo deploy
命令的时候会报ERROR Deployer not found: git
错误。
5.1.3 测试Hexo远程部署
新建一篇文章,先本地预览,再远程部署。
1 | $ hexo new 文章名 // 然后打开\source\_posts目录下的对应md文档进行编写 |
5.2 Hexo常用命令
hexo的命令可以简写,也可以合并使用,下面的常用命令也是能简写就简写。
1 | $ hexo init // 新建hexo工作区 |
5.3 Hexo更换主题
更换 Hexo 主题非常容易,只要把下载好的主题放到在 themes 文件夹内,并修改 _config.yml
内的 theme 设定,即可切换主题。
以 kratos-rebirth 主题为例,首先需要把该主题放到 themes 文件夹内解压,然后修改Hexo主目录的 _config.yml
文件,theme处即为解压后的文件夹名。然后依次执行hexo clean
和hexo s -g
命令即可。
1 | # Extensions |
注:有的主题需要额外修改配置或者到主题文件夹内 npm install 某指定的包才可使用,具体参考主题的 README 进行配置。
另注:hexo使用某些主题会出现{% extends ‘_layout.swig‘ %} {% import ‘_macro/post.swig‘ as post_template %}
问题,这是因为hexo在5.0之后把swig给删除了,需要自己手动安装。
1 | $ 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
6.5 其他补充说明
6.5.1 配置文件的位置
本主题的_config.yml
和Hexo根目录的_config.yml
都有网站页面的相关配置,有的配置找不到不妨去Hexo根目录的那个配置文件里找找看,比如分页配置、站点信息配置…就是在这里面配的。
6.5.2 添加RSS订阅
RSS(Really Simple Syndication):简易信息聚合,当网站内容更新时,可以通过订阅RSS源在RSS阅读器上获取更新的信息。
要使我们的hexo博客也支持RSS,首先我们要安装hexo-generator-feed
包。
1 | $ npm install hexo-generator-feed |
然后在Hexo根目录的_config.yml
文件中配置该插件即可。
1 | feed: |
详细配置说明见:https://github.com/hexojs/hexo-generator-feed
6.5.3 添加评论系统
推荐使用Waline评论系统,可以VPS部署也可以白嫖云服务部署,具体详见我的另一篇博客:使用Waline给Hexo静态博客添加评论系统
6.5.4 添加Live2d看板娘
Live2d技术简介:是一种应用于电子游戏的绘图渲染技术,由日本Cybernoids公司开发,通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。
下面我们将Live2d看板娘整合到Hexo博客里。
Step1:首先需要下载live2d依赖包
1 | $ npm install --save hexo-helper-live2d |
Step2:去Github或npm里下载Live2d模型
Github上有很多开源的Live2d模型,我们可以直接使用。详见:https://github.com/summerscar/live2dDemo
我从中挑了几个自己比较喜欢的看板娘模型,从左到右依次是:live2d-model-hijiki
、live2d-model-kesyoban
、live2d-model-poi
、live2d-model-tororo
、live2d-model-yukari
。
在Hexo的根目录新建一个live2d_models
目录,将下载的模型放进去(一个模型一个文件夹)
Step3:在_config.yml文件里添加参数
在Hexo根目录的_config.yml
文件里配置下添加以下参数(根据自己需要进行调整即可):
1 | # Live2D |
Step4:执行hexo clean
和hexo d -g
命令重新部署即可看到Live2d看板娘。
注意事项:这里的Live2d模型不能是加密后的lpk文件,从Steam下载的很多模型都是这种的,愿意折腾就逆向工程破解,懒得折腾还是换个能用的模型吧。
6.5.5 定制友链页面
如果要使用默认的友链页面:本主题配置文件里friends
下的href:
处填href: "friends"
,然后填写page、list、 verify等信息。
如果要定制友链页面,本主题配置文件里friends
下的href:
处留空,然后填写list、verify等信息,最后在任一页面或文章里使用{% friends %}
引用。
另注:使用hexo n page 页面名
命令去生成单独的页面,这样它不会出现在博客列表里。
7. 网站开启CDN服务
7.1 CDN与Cloudflare是什么
CDN的全称是Content Delivery Network,即内容分发网络。 CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。 CDN的关键技术主要有内容存储和分发技术。
Cloudflare 是一家全球最著名的 CDN 加速服务商,提供了免费和付费的网站加速和保护服务。即使是免费版,也提供了比较全面和强大的功能,非常不错。对于国外访问(或者使用代理)的加速效果十分明显,但对国内访问加速效果十分有限,如果是国内商用的话还是要买国内的CDN服务。
通过使用 Cloudflare CDN 服务提供的全球节点,一方面可以提高网站响应速度和性能,节省源站资源;另一方面也可以保护站点抵御攻击,保证网站长期稳定在线。
7.2 开启 Cloudflare CDN 服务
Step1:打开 Cloudflare CDN官网 注册账号,登录后点击添加站点(填根域名即可),选择选择 Free 套餐,确认计划。
Step2:这时 Cloudflare 会自动扫描域名已有的 DNS 解析记录,如果扫描到的话,会显示在下面,没有或者显示不正确,则需要我们自己设置。

Step3:添加成功后会显示在下面,点击 Continue 继续,按说明修改自己的域名服务器为 Cloudflare 给出的地址。
NameSilo的修改方式是:勾选域名——点击Change Nameservers——删掉原有的名称服务器,添加新的域名服务器。
注:修改域名服务器后需要一定时间生效,不会立即检测到,需要稍微等待一会儿(可打开cmd输入nslookup 域名
进行验证,如有多个IP出现,则证明已生效)。配置了CDN之后再ping域名指向的就不是我们服务器本身的IP地址了,这样对保护我们的服务器也有好处。
Step4:CDN生效后主页的域名处会标注绿色的“有效“二字,这时我们就可以开启CDN的各种服务了,根据自己需求进行配置就好。
7.3 CDN缓存问题
开启了CDN之后,网站的一些静态资源在更新后不会即时刷新,需要等待一段时间。如果你是在调试过程,想要即时看到结果,可以开启开发模式(登录Cloudflare CDN——缓存——配置——打开“开发模式”的按钮)
8. SEO分析优化
8.1 网站SEO分析
[1] 借助 Google Search Console 分析Google搜索引擎的收录情况
[2] 借助 站长工具 分析搜索引擎对站点的收录情况
[3] 借助“SEOquake”Chrome扩展程序,获取网站SEO信息。
打开目标网站,工具条就自动显示出该网站的alex排名、google、bing、百度收录量,外链内链数量等信息。
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 文件。
1 | $ npm install hexo-generator-sitemap --save |
另注:使用第三方站点地图生成器(不推荐),例如 http://XML-Sitemaps.com,它将生成一个XML文件,可以将其用作站点地图。
Step2:修改站点配置文件
将sitemap
文件添加到站点配置文件_config.yml
中,并修改url
字段的值
1 | url: https://域名 |
安装完成后执行hexo g
即会在站点public
目录下生成sitemap.xml
和baidusitemap.xml
Step3:添加蜘蛛协议
在站点source
文件夹下新建robots.txt
文件,文件内容如下:
1 | User-agent: * |
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
即可。
1 | # permalink: :year/:month/:day/:title/ |
9. 参考资料
[1] Hexo搭建个人博客并使用Git部署到VPS from 简书
[2] 解决git /usr/bin/bash: line 0: exec: nc: not found 问题 from idzd
[3] 自定义 Git - Git Hooks from Git官方文档
[4] hexo d命令报错 ERROR Deployer not found: git from CSDN
[7] Hexo+Github搭建个人博客(Sagiri主题) from gudo
[8] Sagiri主题的css文件加载不出来问题 from Github issues
[9] hexo使用theme出现“extends layout.swig“问题 from CSDN
[10] Hexo的一个小BUG(Template render error) from 简书
[11] Kratos-Rebirth食用说明 from 糖果部落
[13] Hexo博客Next主题SEO优化方法 from hoxis’ blog
[14] 为hexo博客添加RSS订阅功能 from segmentfault