VuePress 博客优化之开启 HTTPS

简介: 在 《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript4 中文文档。注意此时,我们的域名还是 ts.yayujs.com,众所周知,开启 HTTPS 有很多好处,比如可以实现数据加密传输等,那我们如何开启 HTTPS 配置呢?

0.png


前言


《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript4 中文文档


注意此时,我们的域名还是 ts.yayujs.com,众所周知,开启 HTTPS 有很多好处,比如可以实现数据加密传输等,那我们如何开启 HTTPS 配置呢?


1. 购买证书


阿里云提供了免费证书可以使用,在每个自然年内,都可以通过 SSL 证书服务一次性申领 20 张免费证书。


1.1 购买证书


访问云盾证书服务购买页,选择 「DV 单域名证书(免费试用)」,按照提示下单购买(订单价格为 0 元)。


1.png


1.2 创建证书


登录 SSL证书控制台,选择 「SSL 证书」 - 「免费证书」,点击「创建证书」,就会自动创建一个证书:


2.png


1.3 证书申请


在新创建的证书上,点击 「证书申请」,填写以下信息:


3.png


注意免费证书绑定的域名,只能是普通域名,比如 ts.yayujs.com 或者 yayujs.com,所谓通配符域名,就是指以 *. 号开头的域名,比如 *.yayujs.com


4.png


注意 xxx.comwww.xxx.com,申请一个域名就行。


填写完后,进入申请第二步,验证信息:


5.png


点击 「验证」,会出现:


6.png


接下来提交审核,会出现提示:


7.png


实际上,不需要等邮件,很快证书状态就会变为「已签发」,此时就可以接着操作了。


8.png


2. 安装证书


2.1 下载证书


证书状态变为 「已签发」后,点击「下载」:


9.png


然后根据 Web 服务器的类型,下载对应格式的证书文件,这里我们选择 Nginx 进行下载:


10.png


像我下载的就是一个名为 6982037_ts.yayujs.com_nginxzip 压缩包,本地解压后,是一个文件夹,里面有两个文件:


  • 6982037_ts.yayujs.com.key
  • 6982037_ts.yayujs.com.pem


2.2 上传证书


接下来我们要做的就是将下载的证书文件上传到 Web 服务器,并修改服务器的相关配置,开启 HTTPS 监听。


我们先登上服务器,创建一个文件夹存放证书文件:


# 登陆服务器
ssh -v root@8.141.xxx.xxx
# 进入 nginx 配置目录
cd /etc/nginx
# 创建目录存放证书
mkdir cert
复制代码


然后上传下载好的证书文件到服务器上,这里使用 Linux 的 scp命令上传:


scp命令的语法为:


scp [可选参数] file_source file_target
复制代码


在本地起一个命令行,然后执行:


scp ~/desktop/6982037_ts.yayujs.com_nginx/6982037_ts.yayujs.com.key root@8.141.xxx.xxx:/etc/nginx/cert
scp ~/desktop/6982037_ts.yayujs.com_nginx/6982037_ts.yayujs.com.pem root@8.141.xxx.xxx:/etc/nginx/cert
复制代码


再在服务器上查看是否成功上传:


[root@iZ2ze nginx]# cd cert/
[root@iZ2ze cert]# ls
[root@iZ2ze cert]# ls
6982037_ts.yayujs.com.key  6982037_ts.yayujs.com.pem
复制代码


2.3 修改配置


接下来我们修改 Nginx 配置:


vim /etc/nginx/nginx.conf
复制代码


在 http 下新建一个 server:


server {
    listen 443 ssl;
    server_name ts.yayujs.com; #替换成证书绑定的域名。
    ssl_certificate cert/6982037_ts.yayujs.com.pem;  #替换成已上传的证书文件的目录和名称。
    ssl_certificate_key cert/6982037_ts.yayujs.com.key; #替换成已上传的证书私钥文件的目录和名称。
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    location ^~ /learn-typescript/ {
      alias /home/www/website/ts/;
    }
    location / {
      alias /home/www/website/ts/;
      index index.html;
    }
}
复制代码


注意我们修改完后,别忘了重新加载一下 nginx 配置:


systemctl reload nginx
复制代码


2.4 http 重定向


对于原本的 http 请求,我们可以写一个 rewrite 语句,重定向所有的 http 请求到 https 请求:


server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        rewrite ^(.*)$ https://$host$1;
        location ^~ /learn-typescript/ {
          alias /home/www/website/ts/;
        }
        location / {
          alias /home/www/website/ts/;
          index index.html;
        }
}
复制代码


2.5 开启端口


阿里云服务器,默认没有开启 HTTPS 监听的 443 端口,所以我们需要 ECS管理控制台的 「安全组」页面,开放 443 端口:


11.png


2.6 验证


现在,我们访问一下证书绑定的域名,这里是https://ts.yayujs.com,如果网页地址栏出现小锁标志,表示证书已经安装成功:


12.png


系列文章


博客搭建系列是我至今写的唯一一个偏实战的系列教程,讲解如何使用 VuePress 搭建博客,并部署到 GitHub、Gitee、个人服务器等平台。


  1. 一篇带你用 VuePress + GitHub Pages 搭建博客


  1. 一篇教你代码同步 GitHub 和 Gitee


  1. 还不会用 GitHub Actions ?看看这篇


  1. Gitee 如何自动部署 Pages?还是用 GitHub Actions!


  1. 一份前端够用的 Linux 命令


  1. 一份简单够用的 Nginx Location 配置讲解


  1. 一篇教你博客如何部署到自己的服务器


  1. VuePress 博客优化之 last updated 最后更新时间如何设置


  1. VuePress 博客优化之添加数据统计功能


微信:「mqyqingfeng」,加我进冴羽唯一的读者群。


如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者 有所启发,欢迎 star,对作者也是一种鼓励。



相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
7月前
|
Java 应用服务中间件 Linux
HTTPS && Tomcat && Servlet && 博客系统 && 软件测试的概念 && Linux
HTTPS && Tomcat && Servlet && 博客系统 && 软件测试的概念 && Linux
32 0
|
9月前
|
域名解析 运维 负载均衡
【运维知识进阶篇】Tomcat集群实战之部署zrlog博客(Tomcat服务安装+静态资源挂载NFS+Nginx负载均衡+HTTPS证书+Redis会话保持)
【运维知识进阶篇】Tomcat集群实战之部署zrlog博客(Tomcat服务安装+静态资源挂载NFS+Nginx负载均衡+HTTPS证书+Redis会话保持)
260 1
|
10月前
|
域名解析 缓存 网络协议
HTTP 的基本优化策略
HTTP 的基本优化策略
61 0
|
存储 缓存 安全
HTTPS 优化总结
HTTPS 优化总结
353 0
|
Web App开发 tengine 网络协议
Tengine 使用 Brotli 开启TLS1.3 并优化 HTTPS 访问速度
本文介绍 Tengine 的编译安装,并启用 Brotli 压缩,配置开启 https。
352 0
Tengine 使用 Brotli 开启TLS1.3 并优化 HTTPS 访问速度
|
安全 应用服务中间件 网络安全
Nginx中安装免费SSL证书开启Https请求(下)
在部分场景中,我们必须使用 https 请求,因为 https 请求更为安全,常用于支付方面的请求调用
316 0
Nginx中安装免费SSL证书开启Https请求(下)
|
安全 应用服务中间件 网络安全
Nginx中安装免费SSL证书开启Https请求(上)
在部分场景中,我们必须使用 https 请求,因为 https 请求更为安全,常用于支付方面的请求调用
249 0
Nginx中安装免费SSL证书开启Https请求(上)
|
域名解析 网络协议 应用服务中间件
博客全站升级https记录,七牛云链接处理
首先在阿里云控制台申请一个免费SSL证书,我这里域名托管在阿里云的所以为了方便就在这里申请。
|
网络协议 安全 应用服务中间件
使用SSL证书,免费给个人网站开启HTTPS防护
以.com结尾的python-office.com则存在:部分浏览器默认使用https进行访问导致打不开网页的问题。
307 0
使用SSL证书,免费给个人网站开启HTTPS防护
|
运维 Java 应用服务中间件
关于tomcat 开启https配置
记录下关于通过tomcat来配置https ,使java web项目可以直接通过https来访问,之前的时候都是走nginx来配置https,由于特殊原因443端口不能开启(具体是啥不清楚,运维不让开),只能如此配置下。
关于tomcat 开启https配置