Hexo + VPS + Freenom + Cloudflar

折腾 Hexo 博客也是有一段时间了，之前试过将博客托管到 GiteePages 和 CodingPages 自己感觉上来说都不是很完美。
所以索性决定自己打一个完全自己可控个人博客。
经过一番斟酌之后，决定使用 Hexo + VPS + Freenon + Cloudflare 来搭建。
在此也分享一下折腾的过程，希望对你有帮助。
我的博客

写在前面

Hexo 的具体使用这里就不展开再说，比较简单，官方的文档也是比较全，可以直接参考官方文档使用。Hexo 官方文档

这里具体只是记录一下 VPS、Freenom、Cloudflare 的折腾过程。

大概分为一下几点：

1. 花点小钱买个 VPS
2. VPS 环境搭建
3. 使用 Freenom 白嫖一个域名
4. 使用 Cloudflare 解析域名到 VPS
5. 开启强制 Https 访问
6. 实现 Hexo 在 VPS 上的自动部署

花点小钱买个 VPS

VPS 即 Virtual Private Server 虚拟专用服务器技术，将一台服务器分割成多个虚拟专享服务器的优质服务。

至于为什么选择 VPS，看了下国内的各个云服务商，服务器费用都比较贵，而本人经济也有限，国内的服务器也是好多需要域名备案，比较麻烦，所以这里只好选择买个国外的 VPS 来用。

VPS 我选择的是 Vultr

首先是价格不贵，使用的又是 SSD，并且有很多节点可选。支付方式也是支持支付宝和微信，最最主要的是之前注册新用户直接送100刀。

这里推荐下 Vultr 的一个优惠网站，上面不定期会有优惠信息分享，和一些教程分享。Vultr 优惠网

注册一个 vultr 账号

点我注册一个 Vultr 账号

跳转到页面，在页面的这里输入邮箱和密码，点击 Create account 按钮创建一个账号（ps: 邮箱好像不支持 QQ 邮箱）。

注册 vultr 账号

创建成功之后，点击左边的 Products ，部署你的 VPS 服务。

选择 VPS

如上图所示。

• Choose Server 这个是选择服务类型，这里选择 Cloud Compute。
• Server Location 这个是 VPS 的节点，这里可以根据自己的喜好选择（我选择的是日本东京的）。
• Server Type 这个是 VPS 的系统镜像类型，也是按照自己的喜好选择（我选的是 CentOS 8 X64）。
• Server Size 这个是 VPS 的规格，按照每月多少钱计算，按照自己的喜好和经济选择（我当然选择的是最便宜的 $5 一个月的）。
• Additional Features 是一些附加的属性，不作说明，根据喜好选择。
• Startup Script 这个是添加 VPS 启动时执行的脚本文件，可按照个人需要添加。
• SSH Keys 这个是添加 SSH 登录的密钥信息。
• Server Hostname & Label 这个是设置 VPS 系统的 Hostname 的，可填可不填。

选择好所有的选项之后，点击 Deploy Now 按钮，然后就开始部署 VPS 服务了，此时只需要耐心等到服务部署完成。

部署完成之后，在 Products 可以看到你已经部署成功的 VPS 服务列表。

vultr 服务器列表

在列表进入 VPS 详情可以看到部署好的 VPS 的 IP 还有账号和登录密码（创建好了之后都是 root 账号），使用 IP 和 密码就可以远程登录到 VPS 进行操作了。

因为某些原因，部署之后的 VPS 分配的 IP 可能是访问不了的，这个时候可以重复上面的步骤重新部署 VPS 直到有可以访问的为止，因为 Vultr 是按量付费的，所以不用的 VPS 直接销毁了就不会收费，只有有在运行的 VPS 才会计算费用。

VPS 环境搭建

VPS 已经搭建好了，下一步就是需要搞一个能够运行 Hexo 生成的静态文件的环境，我选择使用 Nginx。

我的 VPS 系统镜像使用的是 CentOS，这里就使用 CentOS 和 Nginx 来举例。

执行命令时使用的都是 root 账户登录执行的，如果你不是使用的 root 账户登录，遇到有些安装时的权限问题，请在命令前加 sudo 来以 root 权限执行命令。

安装 Nginx

CentOS 装 Nginx 还是比较简单，一条命令就可以解决。

yum install nginx

安装完成之后，Nginx 配置文件目录为 /etc/nginx/ ， 默认的配置文件是这个目录下的 nginx.conf 文件。之后我们配置都可以直接在这个文件修改，或者是 load 其他自己定义的配置文件，为了方便，我是直接修改的这个文件。

[可选操作] 安装完成之后，可以选择设置 Nginx 随系统启动。

systemctl enable nginx

使用 systemctl 来管理 Nginx 服务之后，以后我们启动，停止，查看状态都可以是用 systemctl 命令来执行。

启动 Nginx:

systemctl start nginx

重启 Nginx:

systemctl restart nginx

停止 Nginx:

systemctl stop nginx

查看 Nginx 运行状态:

systemctl status nginx

配置 Nginx

Nginx 安装完成之后，现在需要做一些简单的配置，打开 /etc/nginx 目录下的 nginx.conf 文件，找到 server 节点，默认的配置如下，我们需要进行一些更改。

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
-       root         /usr/share/nginx/html;
+       root         你放在 VPS 中的 Hexo 静态文件的目录;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

修改 root 属性为我们放在 VPS 上的 Hexo 生成的静态文件的路径，比如说，我的 Hexo 生成的静态文件，存放在 VPS 上的 /usr/share/nginx/web 目录下，那么我们就修改 root 的值为 /usr/share/nginx/web。

然后使用 systemctl restart nginx 命令重启一下 Nginx ，在浏览其输入 VPS 的 IP 访问一下可以访问到不。如果访问不了的话，一般都是 VPS 的 80 端口没有开放，可以执行命令开放 80 端口。

// 永久开放 80 端口
firewall-cmd --zone=public --add-port=80/tcp --permanent

// 刷新防火墙规则
firewall-cmd --reload

然后再访问应该就可以访问到了。

使用 Freenom 白嫖一个域名

一个个人博客肯定不能只能使用 IP 来访问，这样让人很难记住，下面就讲一讲如何白嫖一个一年的免费域名。

注册 Freenom 账号

进入到 Freenom 官网，找到 开发人员

注册 Freenom 账号

点击 开发人员 进入到页面之后，找到页面底部的 今天就获得一个随机的域账户 按钮。

注册 Freenom 账号

点击按钮即可进入到注册页面。

注册 Freenom 账号

输入邮箱地址，点击 Verify My Email Address，之后跟着提示填写信息注册就行。需要说下的是，填写地址信息的时候，选择美国的，这样才能申请到免费域名。

申请一个免费域名

注册完成之后，回到首页。

申请域名

输入你想要的域名，会列出可用的免费域名。

申请域名

点击 现在获取 即可。

获取到的域名，可以在 services 菜单的 My Domains 中看到。

域名列表

将域名解析到 VPS 服务器

域名申请好了之后，我们可以通过 Freenom 提供的 DNS 解析服务，将域名解析到 VPS 服务器。

进入域名列表，点击 Manage Domain 按钮，进入页面配置 DNS 解析。

选择 Manage Freenom DNS tab，配置 DNS 解析记录。

配置 DNS 解析

最简单的，我们配置一个不带 www 访问的域名，可以如下图配置

配置 DNS 解析

配置完了之后，需要到 VPS 的 Nginx 更新下配置，将之前修改的配置文件中的 server_name 改成你的域名。

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
-       server_name  _;
+       server_name  你的域名（多个域名以空格分开）;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

重启 Nginx，不出意外已经可以使用域名来访问你的博客了。

使用 Cloudflare 解析域名到 VPS

由于 Freenom 自带的 DNS 是国外的，解析速度比较慢，而 Cloudflare 是一个免费提供 DNS 解析和全球 CDN 的服务商，所以将 DNS 解析放到 Cloudflare 上面来做可以提升一点站点的访问速度。

首先到 Cloudflare 官网 注册一个账号。

然后在首页，点击 添加站点 按钮，添加你在 Freenom 上面白嫖的域名。

添加网站

然后会跳转到方案选择的页面，这里选择免费的方案。

选择方案

之后，就是添加域名解析记录了，就像在 Freenom 中添加记录一样，将解析记录填上就行了。

添加解析记录

填完之后，会提示你去修改 DNS 服务地址

修改 DNS 服务地址

这里给出了两个服务地址，我们需要到 Freenom 中修改，登录到 Freenom ，找到 Management Tools 下的 Nameservers 。

修改 DNS 服务地址

然后勾选 Use custom nameservers (enter below) ，将 Cloudflare 的那两个服务名填入到 Nameserver 1 和 Nameserver 2，点击 Change Namesers 按钮就完成切换了。

修改 DNS 服务地址

等上一小会儿，你的 DNS 解析服务就切换到 Cloudflare 了。

开启强制 Https 访问

为什么要开启 Https 访问，就就不用多说了吧，反正就是要跟上潮流的步伐。

而且 Cloudflare 提供的证书有效期是 15 年，简直是良心。

在 Cloudflare 找到 SSL/TLS，将加密模式选择为严格。

开启 https

然后 源服务器 tab

创建证书

点击创建 创建证书 按钮，一路下一步，将最后的源证书和私钥的内容，分别复制下来，源证书的内容保存为 .pem 的文件，私钥内容保存为 .key 的文件，然后上传到你的 VPS （文件的保存路径可自己定义）。

上传到 VPS 之后，再去配置 Nginx，打开 Nginx 的配置文件，加入以下配置：

    server {
        listen       443 ssl http2 default_server;
        listen       [::]:443 ssl http2 default_server;
        server_name  你的域名，多个以空格隔开;
        root         你的博客静态资源路径;

        ssl_certificate "你上传的 .pem 源证书的路径";
        ssl_certificate_key "你上传的 .key 私钥文件路径";
        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout  10m;
        ssl_ciphers PROFILE=SYSTEM;
        ssl_prefer_server_ciphers on;

        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

配置完了之后，重启下 Nginx，使用 Https 协议访问以下，看下是不是能够访问了，如果不行的话，检查下 VPS 的 443 端口是否开放了，如果没有开放的话，执行命令开放下 443 端口：

// 永久开放 443 端口
firewall-cmd --zone=public --add-port=443/tcp --permanent

// 刷新防火墙规则
firewall-cmd --reload

不出意外的话，Https 的配置就算完成了。

这里还有个可选操作就是，强制限制，所有的访问都必须是来自 Cloudflare 代理之后的请求，避免客户端绕过 Cloudflare 来直接请求服务器。

开不开看个人，这里还是说下怎么配置的。

需要先打开一个开关，在 SSL/TLS 下的 源服务器 tab 页下，找到 经过身份验证的源服务器拉取 这个开关，将其打开。

开关

然后下载证书，点我下载证书。

将下载的证书保存为 .crt 文件，然后上传到 VPS 服务器。

打开 Nginx 配置文件，在刚才配置的中加入两个配置。

    server {
        listen       443 ssl http2 default_server;
        listen       [::]:443 ssl http2 default_server;
        server_name  你的域名，多个以空格隔开;
        root         你的博客静态资源路径;

        ssl_certificate "你上传的 .pem 源证书的路径";
        ssl_certificate_key "你上传的 .key 私钥文件路径";
+      ssl_client_certificate "你刚才上传的 .crt 文件路径";
+      ssl_verify_client on;
        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout  10m;
        ssl_ciphers PROFILE=SYSTEM;
        ssl_prefer_server_ciphers on;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

然后重启 Nginx 就好了。

嗯。强制开启 Https 就算完成了。

实现 Hexo 在 VPS 上的自动部署

将 Hexo 生成的文件部署到 VPS 不比托管在 Coding ，每次提交了之后可以自动的更新。所以这里还需要做一个操作就是，我们每次有新的提交之后，在 VPS 上面的文件也要同步的更新。

这个提交文件自动更新就需要用到 Git Hook 来监听到我们的文件更新之后做一些操作。

登录到 VPS，自己定义一个目录，执行命令：

// 创建一个文件加，名字自己定
mkdir web.git
cd web.git
// git 初始化一个裸库
git init --bare

然后创建一个 Git Hook 文件。执行命令：

// 进入到仓库目录下的 hook 目录
cd web.git/hook
// 创建一个 hook 脚本，文件有更新的时候执行
vim post-receive

在 post-receive 文件中加入以下内容：

#!/bin/bash
git --work-tree=你的 Nginx 静态文件目录 --git-dir=你创建的 git 裸库的位置 checkout -f

配置完了这些之后，修改一下 Hexo 的配置文件，找到 Hexo 配置文件中的 deploy 属性，做以下配置。

deploy:
  type: git
  repo: VPS 用户名@VPS IP:你在 VPS 中创建的裸库的目录
  branch: master

emmm，至此，自动部署也配置完成了，以后只要使用 hexo d 的命令，就能自动部署更新了。

尾巴

至此，使用 Hexo + VPS + Freenom + Cloudflare 的部署就算是完成了，可能写的不是很好，有些细节不是很清楚，各位可以留言一起讨论以下。