VuePress 博客优化之开启 HTTPS

冴羽 等级 578 1 0
标签:

前言

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

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

1. 购买证书

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

1.1 购买证书

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

VuePress 博客优化之开启 HTTPS

1.2 创建证书

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

VuePress 博客优化之开启 HTTPS

1.3 证书申请

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

VuePress 博客优化之开启 HTTPS

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

VuePress 博客优化之开启 HTTPS

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

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

VuePress 博客优化之开启 HTTPS

点击 「验证」,会出现:

VuePress 博客优化之开启 HTTPS

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

VuePress 博客优化之开启 HTTPS

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

VuePress 博客优化之开启 HTTPS

2. 安装证书

2.1 下载证书

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

VuePress 博客优化之开启 HTTPS

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

VuePress 博客优化之开启 HTTPS

像我下载的就是一个名为 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 端口:

VuePress 博客优化之开启 HTTPS

2.6 验证

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

VuePress 博客优化之开启 HTTPS

系列文章

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

  1. 一篇带你用 VuePress + GitHub Pages 搭建博客
  2. 一篇教你代码同步 GitHub 和 Gitee
  3. 还不会用 GitHub Actions ?看看这篇
  4. Gitee 如何自动部署 Pages?还是用 GitHub Actions!
  5. 一份前端够用的 Linux 命令
  6. 一份简单够用的 Nginx Location 配置讲解
  7. 一篇教你博客如何部署到自己的服务器
  8. VuePress 博客优化之 last updated 最后更新时间如何设置
  9. VuePress 博客优化之添加数据统计功能

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

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

收藏
评论区

相关推荐

HTTPS
### 最近网站更新为https,于是做个笔记 ### 将域名 [www.domain.com](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.domain.com) 的证书文件1\_www.domain.com\_bundle.crt 、 ### 私钥文件2\_www.doma
HTTPS
楔子 谣言粉碎机前些日子发布的《[用公共WiFi上网会危害银行账户安全吗?](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.guokr.com%2Farticle%2F100110%2F)》,文中介绍了在使用HTTPS进行网络加密传输的一些情况,从回复来看,争议还是有的。随着网络越
HTTPS、SSL、TLS三者之间的联系和区别
**SSL(Secure Socket Layer 安全套接层)**是基于HTTPS下的一个协议加密层,最初是由网景公司(Netscape)研发,后被IETF(The Internet Engineering Task Force - 互联网工程任务组)标准化后写入(RFCRequest For Comments 请求注释),RFC里包含了很多互联网技术的规
HTTPS请求
##HTTPS请求## > **HttpsUtils代码** package com.ices.utils.httpsHelp; import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader;
HTTPS 传输优化详解之动态 TLS Record Size
笔者在过去分析了诸多可以减少 HTTPS 传输延迟的方法,如分布式 Session 的复用; 启用 HSTS,客户端默认开启 HTTPS 跳转;采用 HTTP/2 传输协议;使用 ChaCha20-Poly1305 算法减少移动端 CPU 运算时间等。 通过这些方法,可以在很大程度上优化 HTTPS 在传输上的延迟,给网站用户带来较好的访问体验。 最近
Nginx配置https
一、开启nginx的ssl模块 1.未安装过nginx,编译安装配置参数如下: ./configure \--prefix=/usr/local/nginx \--with-pcre \--with-http\_ssl\_module #ssl模块 \--with-http\_stub\_status\_module \--wit
TCP、UDP、HTTP、HTTPS之前的区别
网络由下往上分为: 物理层--- 数据链路层--- 网络层 --  IP协议 传输层 --  TCP协议 会话层 -- 表示层和应用层 --  HTTP协议 ![](https://oscimg.oschina.net/oscnet/aeb8a94598094caf8c377e1277ba95948ea.png) 1、TCP/IP连接 TC
VuePress 博客优化之 last updated 最后更新时间如何设置
前言在 中,我们使用 VuePress 搭建了一个博客,但是浏览最终搭建的站点:,我们会发现,在每篇文章的底部,并没有像 VuePress 官方文档那样,出现最后更新的时间:这篇我们来探究下如何实现最后更新时间。 官方自带查阅 VuePress 的,我们可以知道,VuePress 自带显示最后更新时间的插件,在默认主题下,无需安装本插件,因为 VuePre
VuePress 博客优化之添加数据统计功能
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果点击查看:。今天我们给博客添加数据统计功能。 1. 百度统计 1.1 创建站点 1.1.1 登陆站点登陆百度统计后台: 1.1.2 新增网站 在 「管理」 「网站列表」中,点击「新增网站」: 1.1.3 填写信息添加网站域名、网站首页等信息: 1.1.4 获取代码添加完后,会自动跳转到代码获
VuePress 博客优化之开启 HTTPS
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果查看:。注意此时,我们的域名还是 ,众所周知,开启 HTTPS 有很多好处,比如可以实现数据加密传输等,那我们如何开启 HTTPS 配置呢? 1. 购买证书阿里云提供了免费证书可以使用,在每个自然年内,都可以通过 SSL 证书服务一次性申领 20 张免费证书。 1.1 购买证书访问,选择 「D
VuePress 博客优化之开启 Gzip 压缩
前言在 中,我们使用 VuePress 搭建了一个博客,在 中,我们将代码部署到服务器上,最终的效果查看:。今天我们来学习如何开启服务器的 Gzip 压缩。 Gzip 压缩关于 Gzip 压缩,引用 MDN 的: Gzip 是一种用于文件压缩与解压缩的文件格式。它基于 Deflate 算法,可将文件压缩地更小,从而实现更快的网络传输。 Web服务器与现代浏览
从零实现一个 VuePress 插件
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果查看:。但在搭建 VuePress 博客的过程中,也并不是所有的插件都能满足需求,所以本篇我们以实现一个代码复制插件为例,教大家如何从零实现一个 VuePress 插件。 本地开发开发插件第一个要解决的问题就是如何本地开发,我们查看 VuePress 1.0 官方文档的「」章节,并没有找到解决
VuePress 博客优化之拓展 Markdown 语法
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果查看:。如果我们浏览过 TypeScript ,我们会发现一个很好用的功能,那就是很多代码块,在悬浮上去的时候都会出现一个 Try 按钮:点击就会跳转到对应的 Playground,比如图示的按钮跳转的就是,我们可以在这个 Playground 修改并验证代码效果。如果我们要实现这样的功能,该