preface

In “a blog with VuePress + Github Pages”, we build a blog with VuePress and see what TypeScript4 looks like.

Note that our domain name is ts.yayujs.com. Enabling HTTPS has many benefits, such as encrypting data transmission.

1. Purchase a certificate

Ali Cloud provides free certificates for use. In each natural year, you can apply for 20 free certificates at a time through SSL certificate service.

1.1 Purchasing a Certificate

Visit the purchase page of Cloud Shield certificate service, select “DV single domain name certificate (free trial)”, and place the order as prompted (order price is 0 yuan).

1.2 Creating a Certificate

Log in to SSL Certificate console, select “SSL Certificate” – “Free Certificate”, click “Create Certificate”, a certificate will be created automatically:

1.3 Certificate Application

On the newly created certificate, click “Certificate Application” and fill in the following information:

Note that the domain name bound to the free certificate must be a common domain name, such as ts.yayujs.com or yayujs.com. Wildcard domain names start with *. Domain names that start with a hyphen, such as *.yayujs.com:

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

After filling in, enter the second step of application and verify the information:

Click “Verify” and the following will appear:

Next submit for review, you will be prompted:

In fact, there is no need to wait for the mail, and soon the certificate status changes to “issued,” at which point you can proceed.

2. Install the certificate

2.1 Downloading a 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 choose Nginx to download:

For example, I downloaded a zip package named 6982037_ts.yayujs.com_nginx, which, when extracted locally, is a folder containing two files:

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

2.2 Uploading a Certificate

The next step is to upload the downloaded certificate file to the Web server, modify the configuration of the server, and enable HTTPS listening.

Let’s go to the server and create a folder to store the certificate file:

#Log in to the serverSSH -v [email protected]
#Go to the nginx configuration directory
cd /etc/nginx

#Create a directory to store the certificate
mkdir cert
Copy the code

Then upload the downloaded certificate file to the server using the SCP command of Linux:

The syntax of the SCP command is:

SCP [Optional] file_source file_targetCopy the code

Start a command line locally and execute:

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
Copy the code

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
Copy the code

2.3 Modifying The Configuration

Next we modify the Nginx configuration:

vim /etc/nginx/nginx.conf
Copy the code

Create a new server under HTTP:

server {
    listen 443 ssl;
    server_name ts.yayujs.com; # Replace with the domain name bound to the certificate.
    ssl_certificate cert/6982037_ts.yayujs.com.pem;  Replace with the directory and name of the uploaded certificate file.
    ssl_certificate_key cert/6982037_ts.yayujs.com.key; Replace with the directory and name of the uploaded certificate private key file.
    ssl_session_timeout 5m;
    ssl_ciphersECDHE-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/;
	    indexindex.html; }}Copy the code

Note that when we are done, don’t forget to reload the nginx configuration:

systemctl reload nginx
Copy the code

2.4 HTTP Redirection

For the original HTTP request, we could 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://$hostThe $1;

        location^ ~ /learn-typescript/ {
          alias /home/www/website/ts/;
        }

        location / {
          alias /home/www/website/ts/;
          indexindex.html; }}Copy the code

2.5 Enabling Ports

Ali cloud server does not enable HTTPS monitoring port 443 by default, so we need the “Security Group” page of ECS management console to open port 443:

2.6 validation

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

series

Blog Building is the only practical tutorial series I’ve written so far, explaining how to use VuePress to build a blog and deploy it on GitHub, Gitee, personal servers, etc.

  1. Build a blog with VuePress + GitHub Pages
  2. This article will teach you how to synchronize GitHub and Gitee code
  3. Can’t use GitHub Actions yet? Look at this article
  4. How does Gitee automatically deploy Pages? GitHub Actions again!
  5. A Linux command with an adequate front end
  6. A simple enough Nginx Location configuration explained
  7. How to deploy your blog to your own server
  8. VuePress’s last updated date is set
  9. VuePress blog optimized to add statistics features

Wechat: “MQyqingfeng”, add me Into Hu Yu’s only readership group.

If there is any mistake or not precise place, please be sure to give correction, thank you very much. If you like or are inspired by it, welcome star and encourage the author.