I’ve been playing around with Hexo’s blog for a while now, and I’ve tried hosting my blog to GiteePages and CodingPages before, and I don’t think it’s perfect. So I decided to play a completely controllable personal blog. After some deliberation, we decided to use Hexo + VPS + Freenon + Cloudflare to build. I also share the process here, and hope it will help you. My blog

Writing in the front

The specific usage of Hexo is not explained here. It is relatively simple, and the official documentation is also relatively complete. You can refer to the official documentation directly to use Hexo. Hexo official documentation

This is just to record the process of VPS, Freenom and Cloudflare.

It can be roughly divided into the following points:

  1. Buy a VPS for a small price
  2. VPS environment setup
  3. Use a Freenom domain name
  4. Resolve domain names to VPS using Cloudflare
  5. Enable forced Https access
  6. Implement automatic deployment of Hexo on VPS

Buy a VPS for a small price

Virtual Private Server (VPS) divides a Server into multiple dedicated Virtual servers.

As for why choose VPS, look at the domestic cloud service providers, server costs are more expensive, and my economy is limited, domestic server is also a lot of domain name registration, more trouble, so here had to choose to buy a foreign VPS to use.

VPS I chose Vultr

First, it’s inexpensive, it uses SSDS, and it has a lot of nodes to choose from. The payment method also supports Alipay and wechat, and the most important is that new users who have registered before will be given 100 RMB directly.

I would like to recommend Vultr’s discount site, which has occasional offers and tutorials. Preferential Vultr network

Set up a Vultr account

Click on me to set up a Vultr account

Jump to the page, enter your email and password here, and click Create Account button to Create an account (ps: email does not support QQ email).

Once created, click Products on the left to deploy your VPS service.

As shown above.

  • Choose ServerThis is select service type, select hereCloud Compute.
  • Server LocationThis is the node of VPS, which can be selected according to your preference (I chose Tokyo, Japan).
  • Server TypeThis is the VPS system image type, also according to my preference (I choose CentOS 8 X64).
  • Server SizeThis is the VPS specification, according to the monthly amount of the calculation, according to their own preferences and economic choice (I of course chose the cheapest $5 a month).
  • Additional FeaturesThese are additional attributes, unexplained, chosen according to preference.
  • Startup ScriptThis is to add the script file executed at VPS startup, can be added according to personal needs.
  • SSH KeysThis is the key information for adding SSH login.
  • Server Hostname & LabelThis is to set the VPS system Hostname, optionally fill in.

After selecting all the options, click the Deploy Now button and you can Deploy the VPS service, just wait until the service is deployed.

After the deployment is complete, you can see a list of VPS services that you have successfully deployed in Products.

In the VPS details list, you can see the IP address of the deployed VPS as well as the account and login password (root account after creation). You can use the IP and password to remotely log in to the VPS for operations.

Due to some reasons, the IP assigned by the VPS after deployment may not be accessible, at this time, you can repeat the steps above to redeploy the VPS until there is access, because Vultr is paid by volume, so the VPS that are not used will not be charged if they are destroyed directly. Only VPS that are running will be charged.

VPS environment setup

With the VPS set up, the next step was to create an environment that could run the static files generated by Hexo, and I chose to use Nginx.

My VPS system image uses CentOS. Here I use CentOS and Nginx as examples.

If you do not use the root account to log in to the system and encounter some permission problems during the installation, please add sudo before the command to execute the command as root.

Install Nginx

CentOS install Nginx is relatively simple, a command can solve.

yum install nginx
Copy the code

After the installation is complete, the Nginx configuration file directory is /etc/nginx/. The default configuration file is the nginx.conf file in this directory. After that, we can modify the configuration directly in this file, or load other self-defined configuration files. For convenience, I modify this file directly.

[Optional] After the installation is complete, you can set Nginx to start with the system.

systemctl enable nginx
Copy the code

After using systemctl to manage the Nginx service, we can start, stop, and check the status with systemctl command.

Nginx start:

systemctl start nginx
Copy the code

Restart the Nginx:

systemctl restart nginx
Copy the code

Stop Nginx:

systemctl stop nginx
Copy the code

Nginx running status

systemctl status nginx
Copy the code

Configure Nginx

Now that the Nginx installation is complete, you need to do some simple configuration. Open the nginx.conf file in the /etc/nginx directory and go to the server node. The default configuration is as follows.

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
- root /usr/share/nginx/html;
+ root The directory where you put Hexo static files in VPS;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
Copy the code

Change the root attribute to the path to the Hexo static files we put on the VPS. For example, my Hexo static files are stored in /usr/share/nginx/web directory on the VPS. So we change the root value to /usr/share/nginx/web.

Then run the systemctl restart nginx command to restart nginx and enter the VPS IP address to access the nginx. If the access fails, port 80 of the VPS is not enabled. You can run the command to enable port 80.

Firewall-cmd --zone=public --add-port=80/ TCP --permanent // Refresh firewall rules firewall-cmd --reloadCopy the code

And then I should be able to access it again.

Use a Freenom domain name

A personal blog can’t be accessed only using IP, which makes it hard to remember. Here’s how to buy a free domain name for a year.

Register a Freenom account

Go to the Freenom website and find the developers

Click on the developer to enter the page and find the today to get a random domain account button at the bottom of the page.

Click the button to enter the registration page.

Enter your Email Address, click Verify My Email Address, and then fill out the information to sign up. It should be noted that when filling in the address information, select the US one so that you can apply for the free domain name.

Apply for a free domain name

After registering, return to the home page.

Enter the domain name you want and it will list the free domain names available.

Click Get Now.

You can see the obtained domain name in My Domains in the Services menu.

Resolve the domain name to the VPS server

After applying for the domain name, we can use the DNS resolution service provided by Freenom to resolve the domain name to the VPS server.

Enter the Domain name list and click the Manage Domain button to enter the page for configuring DNS resolution.

Select Manage Freenom DNS TAB to configure DNS resolution records.

The simplest is to configure a domain name without WWW access, which can be configured as shown in the following figure

After the configuration is complete, you need to go to the VPS Nginx to update the configuration file server_name to your domain name.

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
- server_name _;
+ server_name Your domain name (multiple domain names separated by Spaces);
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
Copy the code

Restart Nginx and, unsurprisingly, you can now use the domain name to access your blog.

Resolve domain names to VPS using Cloudflare

Freenom’s OWN DNS is foreign and the resolution speed is slow, while Cloudflare is a free provider of DNS resolution and global CDN, so putting DNS resolution on Cloudflare can improve the access speed of some sites.

Start by signing up for an account at Cloudflare.

Then on the home page, click the Add Site button to add your Freenom fucking domain name.

You are then redirected to the option selection page, where you select the free option.

After that, it’s time to add a domain name resolution record, just like adding a record in Freenom.

You will be prompted to change the DNS service address

Here are two service addresses, we need to go to Freenom to change, log in to Freenom, find Nameservers under Management Tools.

Then check Use Custom Nameservers (Enter below) and fill the Cloudflare service names into Nameserver 1 and Nameserver 2. Click the Change Namesers button to complete the switch.

After a while, your DNS resolution service will switch to Cloudflare.

Enable forced Https access

Why to enable Https access, there is no need to say it, anyway, is to keep up with the pace of the trend.

And Cloudflare’s certificate is good for 15 years, which is conscience.

Find SSL/TLS at Cloudflare and select the encryption mode as strict.

Then the source server TAB

Click create Create certificate button, all the way to the next step, the last source certificate and private key content, respectively, the source certificate content as a.pem file, private key content as a.key file, and then upload to your VPS (file save path can be customized).

After uploading to VPS, go to configure Nginx, open the Nginx configuration file, and add the following configuration:

server { listen 443 ssl http2 default_server; listen [::]:443 ssl http2 default_server; Server_name Your domain name, separated by Spaces; Root Static resource path for your blog; Ssl_certificate "Path to the.pem source certificate you uploaded "; Ssl_certificate_key "Path to the. Key private key file you uploaded "; ssl_session_cache shared:SSL:1m; ssl_session_timeout 10m; ssl_ciphers PROFILE=SYSTEM; ssl_prefer_server_ciphers on; include /etc/nginx/default.d/*.conf; location / { } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } }Copy the code

VPS port 443 is open. If it is not, run the following command to open port 443:

Firewall-cmd --zone=public --add-port=443/ TCP --permanent // Refresh firewall rules firewall-cmd --reloadCopy the code

If nothing else, Https configuration is complete.

An optional action here is to enforce that all access must come from a Cloudflare proxy, preventing clients from bypassing Cloudflare and making direct requests to the server.

Open to see the individual, here or say how to configure.

You need to turn on a switch first. On the Source server TAB page under SSL/TLS, find the authenticated source server and pull the switch to turn it on.

To download the certificate, click me to download the certificate.

Save the downloaded certificate as a.crt file and upload it to the VPS server.

Open the Nginx configuration file and add two configurations to the previous configuration.

server { listen 443 ssl http2 default_server; listen [::]:443 ssl http2 default_server; Server_name Your domain name, separated by Spaces; Root Static resource path for your blog; Ssl_certificate "Path to the.pem source certificate you uploaded "; Ssl_certificate_key "Path to the. Key private key file you uploaded ";Ssl_client_certificate "Path to the.crt file you just uploaded ";
+ ssl_verify_client on;
        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout  10m;
        ssl_ciphers PROFILE=SYSTEM;
        ssl_prefer_server_ciphers on;

	    # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
Copy the code

Then restart Nginx.

Well. Forcing Https on is done.

Implement automatic deployment of Hexo on VPS

Deploying hexo-generated files to VPS is not like hosting them in Coding, which can be automatically updated each time it is committed. So one more thing that needs to be done here is that every time we have a new commit, the files on the VPS need to be updated synchronously.

Git Hook is needed to listen to our file update and do some operations.

Log in to VPS, define your own directory, and run the following command:

Git init --bare git git init --bareCopy the code

Then create a Git Hook file. Execute command:

// Go to the hook directory in the repository directory CD web.git/hook // create a hook script and execute vim post-receive when the file is updatedCopy the code

Add the following to the post-receive file:

#! /bin/bashGit --work-tree= your Nginx static file directory --git-dir= checkout -f where you created your bare Git libraryCopy the code

Once configured, modify the Hexo configuration file, locate the Deploy property in the Hexo configuration file, and do the following configuration.

deploy:
  type: git
  repo: VPS The user name @ VPS IP: you're in VPS The directory of the bare library created in
  branch: master
Copy the code

Emmm, now that automatic deployment is configured, updates can be automatically deployed using the hexo D command.

The tail

At this point, the deployment of Hexo + VPS + Freenom + Cloudflare is complete.