VuePress blog optimization to open HTTPS

foreword

In "An article that takes you to build a blog with VuePress + Github Pages" , we used VuePress to build a blog, and the final effect can be viewed: TypeScript4 Chinese document .

Note that at this time, our domain name is still http://ts.yayujs.com . As we all know, enabling HTTPS has many benefits, such as enabling data encryption transmission, etc. How do we enable HTTPS configuration?

1. Purchase a certificate

Alibaba Cloud provides free certificates to use. In each calendar year, you can apply for 20 free certificates at one time through the SSL certificate service.

1.1 Purchase a certificate

Visit the cloud shield certificate service purchase page , select "DV single domain name certificate (free trial)", and follow the prompts to place an order (the order price is 0 yuan).

1.2 Create a certificate

Log in to the SSL certificate console , select "SSL Certificate" - "Free Certificate", click "Create Certificate", and a certificate will be automatically created:

1.3 Certificate Application

On the newly created certificate, click "Certificate Request" and fill in the following information:

Note that the domain name bound to the free certificate can only be a common domain name, such as ts.yayujs.com or yayujs.com . The so-called wildcard domain name refers to the domain name starting with *., such as *.yayujs.com :

Pay attention to xxx.com and www.xxx.com , just apply for a domain name.

After filling in, go to the second step of the application, verify the information:

Click "Verify", it will appear:

Next submit the review, a prompt will appear:

In fact, there is no need to wait for the email, the certificate status will soon change to "Issued", and you can continue to operate at this time.

2. Install the certificate

2.1 Download the certificate

After the certificate status changes to "Issued", click "Download":

Then download the certificate file in the corresponding format according to the type of Web server. Here we select Nginx to download:

For example, what I downloaded is a zip 6982037_ts.yayujs.com_nginx . After local decompression, it is a folder with two files in it:

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

2.2 Upload certificate

The next thing we need to do is to upload the downloaded certificate file to the web server, and modify the relevant configuration of the server to enable HTTPS monitoring.

We first board the server and create a folder to store the certificate files:

# 登陆服务器
ssh -v [e-mail]

# 进入 nginx 配置目录
cd /etc/nginx

# 创建目录存放证书
mkdir cert

Then upload the downloaded certificate file to the server, here use the Linux scp command to upload:

The syntax of the scp

scp [可选参数] file_source file_target

Start a command line locally and execute:

scp ~/desktop/6982037_ts.yayujs.com_nginx/6982037_ts.yayujs.com.key [e-mail]:/etc/nginx/cert
scp ~/desktop/6982037_ts.yayujs.com_nginx/6982037_ts.yayujs.com.pem [e-mail]:/etc/nginx/cert

Then check whether the upload is successful on the server:

[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 Modify the configuration

Next we modify the Nginx configuration:

vim /etc/nginx/nginx.conf

Create a new server under http:

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;
      }
}

Note that after we make changes, don't forget to reload the nginx configuration:

systemctl reload nginx

2.4 http redirection

For the original http request, we can write a rewrite statement to redirect all http requests to https requests:

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 Open the port

Cloud Server does not open port 443 for HTTPS monitoring by default, so we need to the "Security Group" page of 161e54532d2400 in the 161e54532d23fe ECS management console and open port 443:

2.6 Verification

Now, let's visit the domain name bound to the certificate, here is https://ts.yayujs.com , if a small lock sign appears in the address bar of the web page, it means that the certificate has been installed successfully:

series of articles

The blog building series is the only series of practical tutorials I have written so far, explaining how to use VuePress to build a blog and deploy it to GitHub, Gitee, personal servers and other platforms.

1. An article that takes you to build a blog with VuePress + GitHub Pages
2. An article teaches you how to synchronize GitHub and Gitee code
3. Not using GitHub Actions yet? Check out this
4. How does Gitee automatically deploy Pages? Or use GitHub Actions!
5. A front-end Linux command
6. A simple and sufficient Nginx Location configuration explanation
7. An article teaches you how to deploy your blog to your own server
8. How to set the last updated time of VuePress blog optimization
9. VuePress blog optimization to add data statistics function

WeChat: "mqyqingfeng", add me to the only readership of Xianyu.

If there are any mistakes or inaccuracies, please be sure to correct me, thank you very much. If you like or have inspiration, welcome to star, which is also an encouragement to the author.