折騰 Hexo 博客也是有一段時間了,之前試過將博客托管到 GiteePages 和 CodingPages 自己感覺上來說都不是很完美。
所以索性決定自己打一個完全自己可控個人博客。
經(jīng)過一番斟酌之后,決定使用 Hexo + VPS + Freenon + Cloudflare 來搭建。
在此也分享一下折騰的過程,希望對你有幫助。
我的博客
寫在前面
Hexo 的具體使用這里就不展開再說,比較簡單,官方的文檔也是比較全,可以直接參考官方文檔使用。Hexo 官方文檔
這里具體只是記錄一下 VPS、Freenom、Cloudflare 的折騰過程。
大概分為一下幾點:
花點小錢買個 VPS
VPS 即 Virtual Private Server 虛擬專用服務(wù)器技術(shù),將一臺服務(wù)器分割成多個虛擬專享服務(wù)器的優(yōu)質(zhì)服務(wù)。
至于為什么選擇 VPS,看了下國內(nèi)的各個云服務(wù)商,服務(wù)器費用都比較貴,而本人經(jīng)濟也有限,國內(nèi)的服務(wù)器也是好多需要域名備案,比較麻煩,所以這里只好選擇買個國外的 VPS 來用。
VPS 我選擇的是 Vultr
首先是價格不貴,使用的又是 SSD,并且有很多節(jié)點可選。支付方式也是支持支付寶和微信,最最主要的是之前注冊新用戶直接送100刀。
這里推薦下 Vultr 的一個優(yōu)惠網(wǎng)站,上面不定期會有優(yōu)惠信息分享,和一些教程分享。Vultr 優(yōu)惠網(wǎng)
注冊一個 vultr 賬號
跳轉(zhuǎn)到頁面,在頁面的這里輸入郵箱和密碼,點擊 Create account 按鈕創(chuàng)建一個賬號(ps: 郵箱好像不支持 QQ 郵箱)。

創(chuàng)建成功之后,點擊左邊的 Products ,部署你的 VPS 服務(wù)。

如上圖所示。
-
Choose Server這個是選擇服務(wù)類型,這里選擇Cloud Compute。 -
Server Location這個是 VPS 的節(jié)點,這里可以根據(jù)自己的喜好選擇(我選擇的是日本東京的)。 -
Server Type這個是 VPS 的系統(tǒng)鏡像類型,也是按照自己的喜好選擇(我選的是 CentOS 8 X64)。 -
Server Size這個是 VPS 的規(guī)格,按照每月多少錢計算,按照自己的喜好和經(jīng)濟選擇(我當然選擇的是最便宜的 $5 一個月的)。 -
Additional Features是一些附加的屬性,不作說明,根據(jù)喜好選擇。 -
Startup Script這個是添加 VPS 啟動時執(zhí)行的腳本文件,可按照個人需要添加。 -
SSH Keys這個是添加 SSH 登錄的密鑰信息。 -
Server Hostname & Label這個是設(shè)置 VPS 系統(tǒng)的 Hostname 的,可填可不填。
選擇好所有的選項之后,點擊 Deploy Now 按鈕,然后就開始部署 VPS 服務(wù)了,此時只需要耐心等到服務(wù)部署完成。
部署完成之后,在 Products 可以看到你已經(jīng)部署成功的 VPS 服務(wù)列表。

在列表進入 VPS 詳情可以看到部署好的 VPS 的 IP 還有賬號和登錄密碼(創(chuàng)建好了之后都是 root 賬號),使用 IP 和 密碼就可以遠程登錄到 VPS 進行操作了。
因為某些原因,部署之后的 VPS 分配的 IP 可能是訪問不了的,這個時候可以重復(fù)上面的步驟重新部署 VPS 直到有可以訪問的為止,因為 Vultr 是按量付費的,所以不用的 VPS 直接銷毀了就不會收費,只有有在運行的 VPS 才會計算費用。
VPS 環(huán)境搭建
VPS 已經(jīng)搭建好了,下一步就是需要搞一個能夠運行 Hexo 生成的靜態(tài)文件的環(huán)境,我選擇使用 Nginx。
我的 VPS 系統(tǒng)鏡像使用的是 CentOS,這里就使用 CentOS 和 Nginx 來舉例。
執(zhí)行命令時使用的都是 root 賬戶登錄執(zhí)行的,如果你不是使用的 root 賬戶登錄,遇到有些安裝時的權(quán)限問題,請在命令前加
sudo來以 root 權(quán)限執(zhí)行命令。
安裝 Nginx
CentOS 裝 Nginx 還是比較簡單,一條命令就可以解決。
yum install nginx
安裝完成之后,Nginx 配置文件目錄為 /etc/nginx/ , 默認的配置文件是這個目錄下的 nginx.conf 文件。之后我們配置都可以直接在這個文件修改,或者是 load 其他自己定義的配置文件,為了方便,我是直接修改的這個文件。
[可選操作] 安裝完成之后,可以選擇設(shè)置 Nginx 隨系統(tǒng)啟動。
systemctl enable nginx
使用 systemctl 來管理 Nginx 服務(wù)之后,以后我們啟動,停止,查看狀態(tài)都可以是用 systemctl 命令來執(zhí)行。
啟動 Nginx:
systemctl start nginx
重啟 Nginx:
systemctl restart nginx
停止 Nginx:
systemctl stop nginx
查看 Nginx 運行狀態(tài):
systemctl status nginx
配置 Nginx
Nginx 安裝完成之后,現(xiàn)在需要做一些簡單的配置,打開 /etc/nginx 目錄下的 nginx.conf 文件,找到 server 節(jié)點,默認的配置如下,我們需要進行一些更改。
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
- root /usr/share/nginx/html;
+ root 你放在 VPS 中的 Hexo 靜態(tài)文件的目錄;
# 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 生成的靜態(tài)文件的路徑,比如說,我的 Hexo 生成的靜態(tài)文件,存放在 VPS 上的 /usr/share/nginx/web 目錄下,那么我們就修改 root 的值為 /usr/share/nginx/web。
然后使用 systemctl restart nginx 命令重啟一下 Nginx ,在瀏覽其輸入 VPS 的 IP 訪問一下可以訪問到不。如果訪問不了的話,一般都是 VPS 的 80 端口沒有開放,可以執(zhí)行命令開放 80 端口。
// 永久開放 80 端口
firewall-cmd --zone=public --add-port=80/tcp --permanent
// 刷新防火墻規(guī)則
firewall-cmd --reload
然后再訪問應(yīng)該就可以訪問到了。
使用 Freenom 白嫖一個域名
一個個人博客肯定不能只能使用 IP 來訪問,這樣讓人很難記住,下面就講一講如何白嫖一個一年的免費域名。
注冊 Freenom 賬號
進入到 Freenom 官網(wǎng),找到 開發(fā)人員

點擊 開發(fā)人員 進入到頁面之后,找到頁面底部的 今天就獲得一個隨機的域賬戶 按鈕。

點擊按鈕即可進入到注冊頁面。

輸入郵箱地址,點擊 Verify My Email Address,之后跟著提示填寫信息注冊就行。需要說下的是,填寫地址信息的時候,選擇美國的,這樣才能申請到免費域名。
申請一個免費域名
注冊完成之后,回到首頁。

輸入你想要的域名,會列出可用的免費域名。

點擊 現(xiàn)在獲取 即可。
獲取到的域名,可以在 services 菜單的 My Domains 中看到。

將域名解析到 VPS 服務(wù)器
域名申請好了之后,我們可以通過 Freenom 提供的 DNS 解析服務(wù),將域名解析到 VPS 服務(wù)器。
進入域名列表,點擊 Manage Domain 按鈕,進入頁面配置 DNS 解析。
選擇 Manage Freenom DNS tab,配置 DNS 解析記錄。

最簡單的,我們配置一個不帶 www 訪問的域名,可以如下圖配置

配置完了之后,需要到 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,不出意外已經(jīng)可以使用域名來訪問你的博客了。
使用 Cloudflare 解析域名到 VPS
由于 Freenom 自帶的 DNS 是國外的,解析速度比較慢,而 Cloudflare 是一個免費提供 DNS 解析和全球 CDN 的服務(wù)商,所以將 DNS 解析放到 Cloudflare 上面來做可以提升一點站點的訪問速度。
首先到 Cloudflare 官網(wǎng) 注冊一個賬號。
然后在首頁,點擊 添加站點 按鈕,添加你在 Freenom 上面白嫖的域名。

然后會跳轉(zhuǎn)到方案選擇的頁面,這里選擇免費的方案。

之后,就是添加域名解析記錄了,就像在 Freenom 中添加記錄一樣,將解析記錄填上就行了。

填完之后,會提示你去修改 DNS 服務(wù)地址

這里給出了兩個服務(wù)地址,我們需要到 Freenom 中修改,登錄到 Freenom ,找到 Management Tools 下的 Nameservers 。

然后勾選 Use custom nameservers (enter below) ,將 Cloudflare 的那兩個服務(wù)名填入到 Nameserver 1 和 Nameserver 2,點擊 Change Namesers 按鈕就完成切換了。

等上一小會兒,你的 DNS 解析服務(wù)就切換到 Cloudflare 了。
開啟強制 Https 訪問
為什么要開啟 Https 訪問,就就不用多說了吧,反正就是要跟上潮流的步伐。
而且 Cloudflare 提供的證書有效期是 15 年,簡直是良心。
在 Cloudflare 找到 SSL/TLS,將加密模式選擇為嚴格。

然后 源服務(wù)器 tab

點擊創(chuàng)建 創(chuàng)建證書 按鈕,一路下一步,將最后的源證書和私鑰的內(nèi)容,分別復(fù)制下來,源證書的內(nèi)容保存為 .pem 的文件,私鑰內(nèi)容保存為 .key 的文件,然后上傳到你的 VPS (文件的保存路徑可自己定義)。
上傳到 VPS 之后,再去配置 Nginx,打開 Nginx 的配置文件,加入以下配置:
server {
listen 443 ssl http2 default_server;
listen [::]:443 ssl http2 default_server;
server_name 你的域名,多個以空格隔開;
root 你的博客靜態(tài)資源路徑;
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 協(xié)議訪問以下,看下是不是能夠訪問了,如果不行的話,檢查下 VPS 的 443 端口是否開放了,如果沒有開放的話,執(zhí)行命令開放下 443 端口:
// 永久開放 443 端口
firewall-cmd --zone=public --add-port=443/tcp --permanent
// 刷新防火墻規(guī)則
firewall-cmd --reload
不出意外的話,Https 的配置就算完成了。
這里還有個可選操作就是,強制限制,所有的訪問都必須是來自 Cloudflare 代理之后的請求,避免客戶端繞過 Cloudflare 來直接請求服務(wù)器。
開不開看個人,這里還是說下怎么配置的。
需要先打開一個開關(guān),在 SSL/TLS 下的 源服務(wù)器 tab 頁下,找到 經(jīng)過身份驗證的源服務(wù)器拉取 這個開關(guān),將其打開。

然后下載證書,點我下載證書。
將下載的證書保存為 .crt 文件,然后上傳到 VPS 服務(wù)器。
打開 Nginx 配置文件,在剛才配置的中加入兩個配置。
server {
listen 443 ssl http2 default_server;
listen [::]:443 ssl http2 default_server;
server_name 你的域名,多個以空格隔開;
root 你的博客靜態(tài)資源路徑;
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 就算完成了。
實現(xiàn) Hexo 在 VPS 上的自動部署
將 Hexo 生成的文件部署到 VPS 不比托管在 Coding ,每次提交了之后可以自動的更新。所以這里還需要做一個操作就是,我們每次有新的提交之后,在 VPS 上面的文件也要同步的更新。
這個提交文件自動更新就需要用到 Git Hook 來監(jiān)聽到我們的文件更新之后做一些操作。
登錄到 VPS,自己定義一個目錄,執(zhí)行命令:
// 創(chuàng)建一個文件加,名字自己定
mkdir web.git
cd web.git
// git 初始化一個裸庫
git init --bare
然后創(chuàng)建一個 Git Hook 文件。執(zhí)行命令:
// 進入到倉庫目錄下的 hook 目錄
cd web.git/hook
// 創(chuàng)建一個 hook 腳本,文件有更新的時候執(zhí)行
vim post-receive
在 post-receive 文件中加入以下內(nèi)容:
#!/bin/bash
git --work-tree=你的 Nginx 靜態(tài)文件目錄 --git-dir=你創(chuàng)建的 git 裸庫的位置 checkout -f
配置完了這些之后,修改一下 Hexo 的配置文件,找到 Hexo 配置文件中的 deploy 屬性,做以下配置。
deploy:
type: git
repo: VPS 用戶名@VPS IP:你在 VPS 中創(chuàng)建的裸庫的目錄
branch: master
emmm,至此,自動部署也配置完成了,以后只要使用 hexo d 的命令,就能自動部署更新了。
尾巴
至此,使用 Hexo + VPS + Freenom + Cloudflare 的部署就算是完成了,可能寫的不是很好,有些細節(jié)不是很清楚,各位可以留言一起討論以下。