记录15 分钟 读完 (大约 2232 个字)  0次访问

在Ubuntu服务器部署Nginx和Hexo并加载SSL证书

看这篇文章的你，有自己手动部署博客的想法，应该有一定的技术基础。所以本文略过基础内容，主要记录一下我遇到的一些相对复杂的问题。

服务器

不多作介绍，本来以为阿里建站挺稳的，但是发现新手套餐的2.4GHz实在拖后腿。

开了台以前瞧不起的Vultr，High Frequency 3.8GHz真香。测试完之后，就决定是它了。

  • 点我的推广链接注册充值，可以白拿$100 我的推广链接
    • 利益相关：我可以拿$25回报

Node.js

建议安装新版本，参看 https://github.com/nodesource/distributions

Hexo

测试运行

官网链接 https://hexo.io/

  1. 安装 npm install hexo-cli -g
  2. 切换到你想要放置博客的目录，然后初始化Hexo hexo init <目录名>
  3. 切换到刚才初始化的目录，然后安装依赖 npm install
  4. 此时，已经可以运行Demo了 hexo s，或者 hexo s -p 80 指定端口
  5. 推荐使用Screen保持Hexo运行 Screen -R hexo

值得一提：Hexo基于Node.js，本质是一个Web程序。包管理、运行以及迁移与普通Node.js程序一致

配置

配置你的博客，参考 https://hexo.io/zh-cn/docs/configuration

主题

默认主题太简陋，选择一个好看的主题吧： https://hexo.io/themes/

本站使用的是 Icarus ，主题的配置教程在其Demo页面可以查看。

Icarus 配置记录

记录一些我遇到的难点

  • 生成SVG矢量图。可以采用比较方便的操作，在 Unsplash 等网站下载自己喜欢的图片，然后在 SVGCreator 等网站在线转换为SVG。avatar头像等图片可以在 TinyPNG 压缩后上传。
  • ShareThis分享模块。这是Icarus目前默认的分享模块，在 ShareThis 注册登录之后，打开 Image Share Buttons 点击 Get The Code 然后把 <script></script>标签中的src 复制到主题的配置文件即可。
  • Disqus评论模块。在 Disqus注册后把Short Name填入配置文件即可

Nginx

命令 Hexo s 是使用Node.js 内置服务端启动项目。由于配置Https比较繁琐；也难以实现一些个性化配置，例如类似于本站的双语博客。一般不直接使用此内置服务端。

更常用的运行方式是使用Nginx分配或反向代理网络请求。

在Ubuntu中使用apt安装的Nginx，配置文件在 /etc/nginx中，主体配置文件是 /etc/nginx/nginx.conf ，而网站有关的server配置模块拆分开来放在 sites-enabled 文件夹中，我们主要需要修改的是后者，也就是 /etc/nginx/sites-enabled/default

  • sites-enabled 中的文件其实是 sites-available 对应文件的软链接

Nginx 直接作为服务端

因为Hexo是静态博客，只需要将/etc/nginx/sites-enabled/default中Server的root设置为博客的目录即可。此方法能显著降低博客访问时间，推荐此方法。

1
2
3
4
5
6
7
8
server {
	listen 	80;	
	listen 	[::]:80;
	
	server_name blog.zifan.wang;	# 改正你的域名
	root	/www/hexo/blog/public;	# 改成你的博客目录地址/public
	index	index.html;
}

保存后重启Nginx即可访问你的博客：service nginx restart

Nginx 反代Node.js服务端

此方法需要同时运行Nginx和Node.js，因此比上一种方法需要多占用约100MB的内存，并且访问速度大幅增加。

Nginx 反代配置

如果你不需要加载SSL，即Https，你可以如下更改配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
	listen 	80;	
	listen 	[::]:80;
	
	location / {
		add_header Cache-Control no-cache;
		proxy_set_header Host blog.zifan.wang;		# 改成你的域名
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_pass http://127.0.0.1:4000;			# Node.js运行Hexo的默认地址
		proxy_connect_timeout 30s;
	}	
}

在Screen中运行Hexo然后重启Nginx就可以访问你的博客啦：service nginx restart

SSL

2020年了，几乎所有网站都支持Https了，你的博客当然也该支持啦！

SSL证书，有免费也有付费，免费可以拿来玩玩，如果想稳定建站还是推荐付费SSL证书。 本站使用的是NameCheap的PositiveSSL证书，便宜好用。

加载SSL需要三步：

  1. 生成你的钥匙对
  2. 证书颁发机构验证你的域名
  3. 在Nginx上加载SSL

生成钥匙对

在你想要存放的目录输入以下代码，server.key 以及 server.csr 可以改名，妥善保管。

openssl req -new -newkey rsa:2048 -nodes -keyout server.key -out server.csr

按照命令提示输入位置名称等内容，需要注意的是

  • Common Name 填域名作为验证
  • A challenge password 作为保险机制，可以设置一个不会忘记的密码

验证域名

将生成的.csr的内容复制到颁发机构给的验证窗口，可以选择以下三种方式验证

  • Email 如果有域名邮箱，推荐此方法
  • DNS 解析一条记录证明你持有此域名
  • Http 上传个指定的可以被访问的文件证明你运行此域名。如果没有域名邮箱，而且新增解析的生效时间较长，此方法可能更为方便

Http 方法排坑

如果你在上一步选择方法一，直接使用Nginx作为服务端。你需要上传给定文件到对应目录，然后将/etc/nginx/sites-enabled/default改成：

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
	listen 	80;	
	listen 	[::]:80;
	
	server_name blog.zifan.wang;	# 改成你的域名
	root	/www/hexo/blog/public;	# 改成你的博客目录地址/public
	index	index.html;
	
	# 新增内容
	location /.well-known {
		allow all;
	}
}

而如果选择的是方法二。你需要上传给定文件到对应目录，然后将/etc/nginx/sites-enabled/default改成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
server {
	listen 	80;	
	listen 	[::]:80;
	
	server_name blog.zifan.wang;	# 改成你的域名
	
	location / {
		add_header Cache-Control no-cache;
		proxy_set_header Host blog.zifan.wang;		# 改成你的域名
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_pass http://127.0.0.1:4000;			# Node.js运行Hexo的默认地址
		proxy_connect_timeout 30s;
	}
	
	# 新增内容
	location /.well-known {
        proxy_pass http://127.0.0.1:4000/.well-known;
    }
}

加载SSL

验证成功后，下载证书，将.crt上传到之前.csr同目录。然后配置Nginx的443端口。

如果你在上一步选择方法一，直接使用Nginx作为服务端。你需要上传给定文件到对应目录，然后将/etc/nginx/sites-enabled/default改成：

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
server {
	listen 	80;	
	listen 	[::]:80;
	
	# 如果需要强制跳转Https，取消注释下一行
	# return	301		https://$host$request_uri;
	
	# 如果需要强制跳转Https，将下三行移动到下一段Server内
	server_name blog.zifan.wang;	# 改成你的域名
	root	/www/hexo/blog/public;	# 改成你的博客目录地址/public
	index	index.html;
	
	# 如果需要强制跳转Https，将下三行移动到下一段Server内
	location /.well-known {
		allow all;
	}
}

# 新增内容
server {
	listen 	443 ssl;
	listen 	[::]:443 ssl;

	ssl_certificate		/www/hexo/blog_zifan_wang.crt;	# 改成你的crt文件地址
	ssl_certificate_key	/www/hexo/blog_zifan_wang.key;	# 改成你的key文件地址
}

而如果选择的是方法二。你需要上传给定文件到对应目录，然后将/etc/nginx/sites-enabled/default改成：

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
server {
	listen 	80;	
	listen 	[::]:80;
	
	# 如果需要强制跳转Https，取消注释下一行
	# return	301		https://$host$request_uri;
	
	# 如果需要强制跳转Https，将下九行移动到下一段Server内
	server_name blog.zifan.wang;	# 改成你的域名
	location / {
		add_header Cache-Control no-cache;
		proxy_set_header Host blog.zifan.wang;		# 改成你的域名
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_pass http://127.0.0.1:4000;			# Node.js运行Hexo的默认地址
		proxy_connect_timeout 30s;
	}
	
	# 如果需要强制跳转Https，将下三行移动到下一段Server内
	location /.well-known {
        proxy_pass http://127.0.0.1:4000/.well-known;
    }
}

# 新增内容
server {
	listen 			443 ssl;
	listen 			[::]:443 ssl;

	ssl_certificate		/www/hexo/blog_zifan_wang.crt;	# 改成你的crt文件地址
	ssl_certificate_key	/www/hexo/blog_zifan_wang.key;	# 改成你的key文件地址
}

建议选择强制跳转Https

重启Nginx就可以访问带小绿锁的博客啦：service nginx restart

其他

至此，本文主要内容已经结束了。说点其他内容吧。

迁移

从阿里云迁移到Vultr，其实很简单。

  • 安装Node.js以及Hexo
  • 将旧服务器上博客目录打包传至新服务器拆包（包含SSL所需要的文件）
  • 安装Nginx并配置

然后启动就可以啦，这就是Node.js的便利性；

双语配置

https://tstrs.me/1448.html

#

喜欢这篇文章？打赏一下作者吧

评论

×