前言

之前写过一篇折腾博客的文章,主要介绍了:

  • 自定义多说
  • 引入不蒜子
  • 引入打赏模块
  • 引入APlayer
  • 性能与SEO
  • 从多说迁移到Disqus

当时留着一些没完成的坑,比如支持Https访问,通过CDN分发内容,这次抽时间给填上了,为了对整个站点的掌控度更高,也把托管内容从Github迁移到了Linode VPS,下面开始做详细介绍

迁移到Linode VPS

最初纠结过买Linode还是Vultr,看了一些测评和介绍最后还是选择了Linode,每月5刀,最低配置也不错,拿来放博客绰绰有余了。至于节点我选择了Fremont, CA,没有选日本东京节点。因为Linode上最受欢迎的东京节点其实已经售完了,现在在售的是东京2号节点,和原本的东京1号节点还是有些差距的,相比之下弗里蒙特节点要更胜一筹。

关于至于购买和启动的过程我就不赘述了,可以看Linode VPS 新手使用教程 超详细这篇文章的前半部分,待机器启动成功后就可以用SSH登陆到VPS上开始配置了,我的操作系统是CentOS7

从Github迁移到自己的VPS上有两种可行的方案:

  • 方案一:继续以Git的方式做hexo deploy,在VPS上配置webhooks监听托管博客内容的repo发出的hook事件,当有新内容push到该repo时会触发服务器去拉取最新的内容,从而完成部署
  • 方案二:以Rsync的方式做hexo deploy,在Hexo官方文档的部署这个章节可以看到提供了很多种部署方式,GitRsync等都是官方支持的方式之一,Rsync在部署原理上则相对直接,就是每次把新内容上传到服务器来完成部署

这里我选择了方案二,因为配置RsyncWebhooks要相对简单一些
首先通过SSH登录你的VPS,ssh root@<你的ip>
添加 CenOS 7 的 epel 软件包,yum install epel-release
安装Nginx,yum install nginx
启动Nginx,systemctl start nginx.service
设置 Nginx 自动跟随系统启动,systemctl enable nginx.service

安装Rsync与xinetd包,yum -y install xinetd rsync static
修改/etc/xinetd.d/rsync配置文件,把disable=yes改成disable=no

1
2
3
4
5
6
7
8
9
10
service rsync
{
disable = no
socket_type = stream
wait = no
user = root
server = /usr/bin/rsync
server_args = --daemon
log_on_failure += USERID
}

修改rsync配置文件/etc/rsyncd.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#密码文件位置,认证文件设置,设置用户名和密码
secrets file=/etc/rsyncd.secrets
#欢迎信息文件名称和存放位置(此文件没有,可以自行添加)
#motd file = /etc/rsyncd.motd
# yes只读 值为NO意思为可读可写模式,数据恢复用NO
read only=no
list=yes
#以什么身份运行rsync
uid=nobody
gid=nobody
#模块名
[blog]
#欢迎信息
comment=Welcome
#rsync同步的路径,也就是存放博客静态资源的目录
path=/blog
#授权帐号,认证的用户名,如果没有这行则表明是匿名,多个用户用,分隔。
auth users=root
#允许访问的IP
hosts allow=X.X.X.X

注意上面配置信息中的rsyncd.secrets,如果没有该文件的话就创建一个,内容格式username:password
例如root:123456
修改密码文件权限与所有权,重启xinetd服务

1
2
3
chown root.root /etc/rsyncd.*
chmod 600 /etc/rsyncd.*
service xinetd restart

到此服务端配置完毕,回到本地
在Hexo目录下安装rsync,npm install hexo-deployer-rsync --save
_config.yml文件中原本type为git的配置信息,替换为

1
2
3
4
5
6
7
8
9
deploy:
type: rsync
host: 你 VPS 的 IP 地址或者域名
user: root
root: 你想将 Hexo 生成的静态文件存放在 VPS 中的目录 例如: /blog
port: 你 VPS 的 ssh 端口号
delete: true
verbose: true
ignore_errors: false

到这里,就可以通过hexo d指令把public文件夹中的内容同步到服务器上了
接着,为了让我们能通过浏览器访问到服务器上储存着的博客内容,继续配置Nginx
在nginx的conf.d文件夹中创建default.conf配置文件,并打开编辑
vim /etc/nginx/conf.d/default.conf
写入以下内容

1
2
3
4
5
6
7
8
9
10
server {
root /blog; # 这里是你网站的路径,路径下包含index.html等一系列文件,也就是之前通过Rsync同步到服务器上的内容
index index.html index.htm;
server_name www.blog.codeest.moe blog.codeest.moe; # 这里写域名
location / {
try_files $uri $uri/ /index.html;
}
}

重启Nginx,浏览器上访问看看能否看到博客首页

1
2
3
nginx -s stop
systemctl start nginx.service
systemctl enable nginx.service

配置SSL

配置SSL前首先你需要有可用的SSL证书,我是在SSL.DO上购买了ShinoSaki SDV证书,5.9刀一年,这个价格能hold住ww,如果不嫌麻烦的话你也可以通过Let’s Encrypt申请到免费的证书,不过需要折腾一番,购买证书的过程中会要求你出示CSR文件,这个文件由我们自己在服务端生成
登陆到自己的VPS上,执行openssl genrsa -out blog.codeest.moe.key 2048,注意替换成你的域名,这时会生成一个.key文件,这个key非常重要,相当于RSA加密算法中的私钥,只有自己持有,而SSL证书本身是公钥,所有客户端可见,在后续Nginx的配置中都会用到

获得.key后执行指令openssl req -new -key blog.codeest.moe.key -out blog.codeest.moe.csr,随后会让你根据提示输入一些信息,对照下面

1
2
3
4
5
6
7
8
9
10
11
Country Name (2 letter code) [AU]:CN (这里输入两位大写字母的国家代码 CN是中国)
State or Province Name (full name) [Some-State]:Shanghai (这里省份 可以填写简称,一般填写拼音)
Locality Name (eg, city) []:Shanghai (这里是城市可以填写简称,一般填拼音)
Organization Name (eg, company) [Internet Widgits Pty Ltd]:codeest (组织或公司名)
Organizational Unit Name (eg, section) []: (不填写直接回车)
Common Name (eg, YOUR name) []:blog.codeest.moe (输入使用ssl的域名,一般不带www)
Email Address []:codeest.dev@gmail.com (填写邮箱,有时候证书是发送到这个邮箱)
Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []: (不填写直接回车)
An optional company name []: (不填写直接回车)

最后,会生成.csr文件,把这个文件提交给SSL提供商,他们随后就会寄出SSL证书到你的邮箱
拿到证书后的配置我就不赘述了,可以参考SSL.DO的支持文档,写的非常详细。
在加入了ssl的配置后,最终我的Nginx配置文件default.conf内容如下

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
server {
listen 443 ssl http2; # 侦听端口
listen [::]:443 ssl http2; # 如果您希望同时侦听 IPv6,请取消此行注释
server_name www.blog.codeest.moe blog.codeest.moe; # 请改为您的域
# ssl on;
ssl_certificate /etc/ssl/private/blog_codeest_moe.bundle.crt; # 证书链
ssl_certificate_key /etc/ssl/private/blog.codeest.moe.key; # 密钥
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 10m;
ssl_session_tickets off;
ssl_dhparam /etc/ssl/certs/dhparam.pem;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # 支持的协议,Windows XP 不支持
ssl_ciphers "EECDH+ECDSA+AESGCM EECDH+aRSA+AESGCM EECDH+ECDSA+SHA384 EECDH+ECDSA+SHA256 EECDH+aRSA+SHA384 EECDH+aRSA+SHA256 EECDH+aRSA+RC4 EECDH EDH+aRSA !aNULL !eNULL !LOW !3DES !MD5 !EXP !PSK !SRP !DSS !RC4";
ssl_prefer_server_ciphers on; # 启用 Forward Secrecy
keepalive_timeout 70;
add_header Strict-Transport-Security max-age=63072000;
# add_header X-Frame-Options DENY; # 如果不需要引用 iframe 则可以加上
add_header X-Content-Type-Options nosniff;
root /blog;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
}
server {
listen 80;
listen [::]:80;
server_name www.blog.codeest.moe blog.codeest.moe;
rewrite ^ https://blog.codeest.moe$request_uri? permanent;
#root /blog;
#index index.html index.htm;
}

现在已经可以通过https访问站点了,并且上面的80端口的配置会把http访问也强制定向到https,但是敲入链接后并没有出现预想中的小绿锁,用Chrome开发者工具查看console后发现,是因为网页中混合了不支持https的内容,比如我正在用的七牛图片外链。

和七牛官方联系后得知七牛现在支持https的图片外链域名需要自己提供,而且要经过国内备案,我可等不及漫长的备案=。= 所以迁图床在所难免,选定了支持https的新浪微博图床。这里要推荐这款第三方开发的开源Chrome插件新浪微博图床,非常好用,支持拖拽图片直接生成https图片外链。

接下来需要把七牛图床中的所有图片文件保存到本地,再上传到新浪微博图床,但是一番研究后发现七牛不支持将对象存储库中的文件整体打包下载,后台只支持单个文件下载,打包下载只能依靠他们对外提供的api或是命令行工具qshell,折腾到这里真是感觉身体被掏空( ̄﹏ ̄),WTF! 太麻烦了吧!

没办法,下载qshell,配置到zsh的指令目录中,开始操作

1
2
3
4
5
6
# 设置密钥
qshell account [AccessKey] [SecretKey]
# 查看设置
qshell account
# 开始下载
qshell qdownload 10 qshell.conf

注意上面的指令中有一个qshell.conf文件,这是下载信息的配置文件,内容格式是json
我的配置文件如下

1
2
3
4
5
6
{
"dest_dir" : "/imgs",
"bucket" : "codeest",
"prefix" : "",
"suffixes" : ".png,.jpg,.gif"
}

你可以按照自己的需求修改,如果提示找不到路径就把相对路径修改为绝对路径,操作完成后拿到了七牛上存储的全部图片,通过微博图床插件,把新外链替换到文章中即可(这步替换也很麻烦!( ̄口 ̄)

重新生成替换外链后的博客内容,rsync到服务器上,再去浏览器上打开博客,终于看到了期望中的小绿锁

配置CDN

这个过程相比上面两步就轻松多了,直接接入百度云加速即可,有两种接入方式:NS方式CNAME方式

  • NS方式更彻底一些,需要修改域名的NS记录,之前我是用DNSPod来做DNS解析的,已经提供了默认的NS解析,无法修改,为了接入百度云加速只能把整个DNS解析服务迁到百度上了,需要把之前DNSPod上的所有记录都在百度云加速上也添加一份,并且到域名商那里把域名服务器替换为百度云加速提供的地址
  • CNAME方式更方便一些,不用更换DNS服务商,直接在原有的解析中加上一条TXT配置和一条CNAME配置即可,为了兼容性更好一些,我还是选择了NS方式

当检测到NS记录变更为百度云加速的地址后,后台中域名前的符号会变为绿色对勾,到这里就算接入完成了

最后

完成这些配置也断断续续的花了2天的时间,期间也踩到不少坑,文章中可能没有一一指出,用GoogleStackoverFlow基本都能解决,而且折腾的过程也学到了一些web和后端方面的知识,对强迫症患者来说也算不虚此行了(= ̄ω ̄=)

后续补充:

经过一段时间的测试,发现开启百度云加速后https访问会有几率失败,和客服沟通后了解到免费版CDN目前不支持https,所以在接入前请先考虑好和https的冲突!
下面介绍一些CDN服务商的方案方便大家备选~

  • CloudFlare:免费,无需备案,支持https,但国内速度较慢,国外速度可观
  • VeryCloud:免费50G,需备案,支持https
  • 百度云加速:免费版不支持https,收费版支持,无需备案
  • 七牛云 & 又拍云 & 腾讯云:收费,需备案,支持https,成熟稳定的服务商

参考文章

在搬瓦工 VPS 上搭建 Hexo
hexo的rsync发布方式
在Linux服务器或VPS上生成KEY(密钥文件)以及CSR(证书请求文件)
NGINX 配置 SSL
批量下载七牛云的文件

声明:本站所有文章均为原创或翻译,遵循署名-非商业性使用-禁止演绎 4.0 国际许可协议,如需转载请确保您对该协议有足够了解,并附上作者名(Est)及原贴地址