Webify实战：快速、低成本部署个人Hexo静态博客

作者：Mintimate

博客：https://www.mintimate.cn

Mintimate's Blog，只为与你分享

封面嗷

Hexo

Hexo是一款简洁且高效的博客框架，我一般称呼为Hexo博客引擎。使用Hexo，可以快速根据自己本地的博客配置和文章内容自动创建为纯静态的博客网站。对比Wordpress这样的动态博客框架，有以下特点：

• 资源消耗少：服务器后托管平台，只需要提供Nginx、Apache等网站环境即可，无需提供数据库。
• 易于迁移：Wordpress的站点迁移，一直是一个麻烦的事情。但是Hexo就简单多了。
• 自定义程度高：可以自己随心所欲地更改CSS和JS。

部署平台

Hexo只需要有一个可以提供Web环境的平台即可。比如：

• 个人服务器的Nginx
• GitHub Pages
• Cloudbase Webify

前两个，大家肯定不陌生，本次教大家一点新鲜的：Webify+Coding代码托管实现Hexo博客。

Webify

Webify大家可能有点陌生。这里简单介绍一下：使用Webify可以方便地把GitHub、Gitee和Coding等代码托管平台的Web工程，在同步代码时候，进行自动部署，省去用户每次打包了项目后，还需要用户手动部署的操作。

支持自动部署的项目（部分）

具体可以参考云开发 Webify官方文档

本次就演示，本地搭建Hexo，然后托管生成的静态网站到Coding，并使用Webify自动部署。最后效果……我博客就是最后效果啦：https://www.mintimate.cn

原理解析

我们看看Webify+Coding代码托管实现Hexo博客这套方案的流程：

原理示意图

图可能画的不是很好，要点：用户推送Hexo生成的Public文件夹到Coding代码托管，会触发更新事件，Webify自动抓去并映射为网站供游客浏览器访问。

同时，用户提供自己的域名和SSL证书，实现CDN加速。

所需工具

这里我们先来看看所需的工具：

-> 本地（个人电脑）上软件依赖：

• Node.js：用于安装Hexo
• Git：用于推送Hexo生成的静态文件到代码托管平台（本文使用Coding）

-> 远程平台：

• 备案的域名：用于自定义域名。如果你没有域名，只能用腾讯云给的默认随机域名。如果有域名，没有备案，可以进行备案（很简单的嗷，就是需要等待……）
• 代码托管平台：本次使用Coding，你也可以使用GitHub和Gitee。

Coding设置

Coding其实和GitHub差不多，但是多了一些团队协作功能，个人使用，当成代码托管平台就可以了。

Coding

创建项目

我们进入Coding的官网，创建一个项目：

创建项目

我们使用代码托管即可：

代码托管

之后，进入项目内。准备后续操作。

创建仓库

现在，我们创建一个仓库：

创建仓库

这里推荐使用私有仓库。

设置SSH验证

创建好仓库后，我们需要设置SSH密钥，用于后续Hexo的推送。选择仓库的设置：

仓库设置

点击部署公钥。在这里加上自己的密钥：

密钥

如果你不知道怎么生成密钥，偷偷告诉你嗷：

# Windows/macOS/Linux上使用Terminal/Powershell输入：
ssh-keygen -t rsa -C "your_email@email_domainl.com"

其中：your_email@email_domainl.com替换为你自己的Email，生成的密钥在~/.ssh/id_rsa.pub：

生成的 密钥（macOS）

到此，Coding的配置完成。

安装Hexo

在本地（开发环境），我们需要安装Hexo，Hexo使用node.js的npm即可安装，如果你不知道如何安装Node.js，可以参考我以前的文章：

• 如何使用NVM安装并管理多版本Node

安装了Node.js（我建议目前使用v12版本的node.js去创建Hexo），我们用所属的npm下载和安装Hexo：

npm install -g hexo

其中：-g为全局安装。

之后，使用hexo -v即可看到已经安装的Hexo版本：

hexo -v

初始化Hexo

在Hexo安装好后，我们创建一个空白目录，并用Terminal或Powershell等命令工具，进入其中，进行初始化：

# Hexo初始化
hexo init

在空目录初始化

安装推送

我们需要安装hexo-deployer-git插件，这样我们才可以推送Hexo生成的public到Coding等远程平台。

npm install hexo-deployer-git --save

安装hexo-deployer-git

之后，在Hexo目录下的_config.yml更改：

deploy:
  type: ''

为：

deploy:
  type: git
  message: update
  repo: codingPATH
  branch: master

其中：codingPath为：

这个嗷

部署至Coding

最后，我们可以推送：

hexo g -d

推送完成

到Coding仓库即可可看到：

仓库已经同步上了

More

具体的 Hexo设置很多，一个目录说完不现实。大家可以结合官方文档和搜索引擎编程╮(￣▽￣"")╭

Webify设置

现在，我们使用Webify进行设置。打开Webify的控制台，选择新建：

新建

选择从Coding导入，并绑定Coding账号：

绑定账号

之后，选择我们的仓库：

选择仓库

完成后，我们需要选择模版。

选择模版

这里注意，我们不选择Hexo模版，是选择静态模版：

选择静态模版

并选择我们刚刚在Coding创建的账号：

选择初始化

之后，就需要耐心地等待了->>第一次初始化，会比较久：

耐心等待

等部署完成后，使用项目默认链接即可访问项目：

默认链接

访问成功

最后，我们设置一下域名即可。

绑定域名

用这么一长串的域名，没有自己的特色。我们可以绑定自己的域名。首先，需要到腾讯云的SSL证书托管内，上传或申请SSL证书：

证书托管

上传/申请好证书后，我们可以到Webify内设置：

进入控制台

找到域名绑定：

自定义域名设置

添加域名，之后按提示设置DNS：

提示

设置DNS

这里设置的DNS，不是A记录值，这里需要设置的是CNAME记录值：

设置记录值

设置好后，等10分钟左右，就可以通过域名访问了：

域名访问

为什么用Webify

自动部署

使用Webify，可以自动部署，在代码托管平台部署的网站，没有CDN加速，使用Webiify，可以在推送到代码平台后，自动完成网站的部署和更新，实在是很方便。

配置简单

可以看到，配置是很简单的（不要看图文长……其实是我太详细……）。你甚至不用配置Nginx和CDN缓存。

价格合适

相比部署到服务器，需要服务器的成本，还要另外购买CDN流量包，Webify的按量计费，可以说很划算了：

价格很便宜了

参考：1000PV的网站，一天大概0.21元的费用。

END

最后，以上就是Webify的部署演示。其实Webify还有一些缺点，比如：无法强制Https、部署时候提示不完全等。不过相信未来一定会改善。

真不错╮(￣▽￣"")╭

另外，有些小伙伴会问，为什么不用Webify的Hexo模版？

Hexo模版是在Coding拉取后，固定执行特定命令，如果用Hexo模版，就是上传本地Hexo文件夹，有Webify自动进行hexo g的部署，最后映射public文件夹。这样也挺好，但是我认为：Hexo博客的书写，基本要用hexo s在本地查看和预览，所以就没必要有Webify来部署啦。