preface
We implemented VuePress to build a personal blog in an article to help you build a blog with VuePress + Github Pages, in an article to teach you to Synchronize Github and Gitee code and how Gitee automatically deploy Pages. GitHub Actions again! Automatic code synchronization and deployment of Github and Gitee were implemented, but I finally decided to build my own site and just do it, so here we go.
Buy a server
Because of personal work experience, WE choose Ali cloud server, we directly buy a cloud server ECS, the so-called ECS server, directly quote the official introduction:
The Elastic Compute Service (ECS) is a simple, efficient and flexible computing Service. Help you build more stable and secure applications, improve operation and maintenance efficiency, reduce IT costs, and enable you to focus on core business innovation.
For simplicity, buy directly with one click:
I chose the default for region, mirror, network type, etc.
Considering that there is no one to visit at the beginning, the website is completely static, even if bought, later can also lift configuration, instance specifications I chose 1 vCPU 1 GiB.
Public network bandwidth
Payment method
In terms of public network bandwidth, there are two payment methods, one is by fixed bandwidth, the other is by traffic.
If the user chooses 10 mbit/s bandwidth, Aliyun will allocate 10 mbit/s exclusive bandwidth to the user. The official recommendation applies to business scenarios for customers with stable network bandwidth requirements, that is to say, if your page traffic is stable, it is more appropriate to choose fixed bandwidth.
By traffic, charging is based on the traffic used and charging is deducted per hour. It is recommended to apply to service scenarios where the network bandwidth requirements vary greatly, for example, the bandwidth usage is low but network access peaks occur intermittently.
Bandwidth selection
If you are using a fixed bandwidth mode, then how much bandwidth is appropriate? Let’s calculate roughly:
Network bandwidth refers to the amount of data that can be transmitted per unit of time (usually 1 second). The network is similar to the highway, the greater the bandwidth, the more similar to the highway lane, its capacity is stronger, simply speaking, the greater the bandwidth, the faster the website access speed.
The peak download of 1M bandwidth is 128KB/S, which is because the unit of cloud server bandwidth provided by cloud vendors is bit. The full version of 1M is actually 1Mb/ S, and note that the B is lowercase. 1MB = 1/8MB = 0.125MB. We know that 1MB = 1024KB, so 1MB = 0.125MB = 128KB. Of course, you can do it this way:
1Mbit/s = 1024kbit/s = 1024/8(KByte/s) = 128(KByte/s)
In general, the bandwidth is 8 times the download speed. 1 MB bandwidth corresponds to 128KB/s, 2 MB bandwidth corresponds to 256KB/s, 4 MB corresponds to 512KB/s, and so on.
So what is the resource size of our page? You can check the total resource size of a page in the NetWorks option of your browser. Here is an example of the TypeScript learning site I built:
We can see that the transferred resource size is 443kB and the selected resource size is 852kB. The difference is because the data transmitted by the server and the browser can be compressed, such as gzip compression.
When the server and client shake hands, the client will tell the server whether compression is supported or not. If compression is enabled on the server and the client supports compression, the compressed data will be transmitted to the client, and the client will decompress the data.
So the actual transmission size here is 443kB. If we want users to open our website within 1s, we need at least 443/128 = 3.46m bandwidth. Of course, this calculation is very rough, and user bandwidth, CDN optimization and so on are not taken into account. So it is so casually calculated, if the optimization is done well, even if only 1M bandwidth, can also bring good results.
If we buy the fixed bandwidth of 4M for one month, the price given here is 155.60 yuan.
But if we use pay-per-traffic, if 4M runs full every second (many people visit every second), the total traffic is: 4 * 128KB/S * 86400 = 11059200KB = 42.1875GB, according to the price of ￥0.800/GB, is about 33 yuan a day, about 1000 yuan a month, which is why, if your traffic is relatively stable, it is recommended to use fixed bandwidth.
Let’s take another example. If my website has 1000 PV every day, assuming they open the home page and then remove it, the traffic generated is about 1000 * 443KB = 0.42GB, and the daily cost is 30 cents, about 9 yuan a month.
Considering that there was no traffic at the beginning, I chose charging by traffic and set the maximum network bandwidth as 25M. The reason for setting the maximum network bandwidth was that the sudden burst of traffic would cause high cost, so we specified the maximum allowable network bandwidth for a little limitation.
1. Reset the instance login password
If it’s a one-click purchase, we should see a prompt like this:
After purchase, we follow this page at help.aliyun.com/document_de… Reset the password, otherwise we can not log in the server.
2. Configure security groups
As we know, when we use HTTP protocol to visit the website, the default monitoring is port 80, but Ali Cloud server turns off port 80 by default. In order to support HTTP access, we go to the ECS management background of the landing cloud server, select the security group, and click the first security group:
Click Manual add to add port 80. The result is as follows:
3. Login instance
1. SSH to log in
SSH root@< instance fixed public IP or EIP>
# sample:SSH [email protected]Enter the instance login password
# Welcome to Alibaba Cloud Elastic Compute Service! Indicates a successful connection to the instance.
Copy the codeAfter logging in, if we do not operate for a period of time, we will need to log in again and enter the password again. In order to automatically log in, we need:
Get the local public key from a local terminal
cat ~/.ssh/id_rsa.pub
Write the obtained public key to authorized_keys
echo "Change this to your public key content." >> ~/.ssh/authorized_keys
Copy the codeSo we don’t need to enter a password when we log in again. Note that we are writing to the ~ directory, which means that if we switch users, we will need to configure this again.
2. Access the console
We log in to the ECS administration Console and see our server instance, click Remote Connection:
Click log in now, go to ecs-workbench.aliyun.com/, enter your password and log in.
Of course, there are many ways to log in, you can click on the cloud server ECS document to see more ways.
4. Install Nginx
Nginx is introduced
Nginx is a lightweight web server, reverse proxy server. Compared with Apache and LighttPD, it has the advantages of less memory and higher stability. Its most common use is to provide reverse proxy services.
Installation and Enabling
# installation
yum install -y nginx
# enable Nginx
systemctl start nginx
Set to start automatically when the system starts
systemctl enable nginx
Copy the codeEffect:
Enter the IP address of the server in the browser. If the following message is displayed, the server is enabled successfully:
Create test files
We create an index. HTML file for the test and place it under the directory /home/www/website/
Create a directory
mkdir -p /home/www/website
# enter directory
cd /home/www/website
# create file
touch index.html
# write content
echo '
Hello World! Hello World! ' > index.html
Copy the codeModifying a Configuration File
Go to the configuration file directory
cd /etc/nginx
Modify the content of the configuration file
vim nginx.conf
Copy the codeAdd something to location / {} so that when you visit the home page, the file you just created is returned:
server {
listen 80 default_server;
listen[: :] :80 default_server;
server_name _;
root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
# Here are the additions
location / {
root /home/www/website/;
index index.html;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
Copy the codeAfter saving and exiting the modification, reload the configuration file:
Reload the configuration file
systemctl reload nginx
Copy the codeOpen the browser and enter the server, IP, to see that the configuration takes effect:
Now that we have completed the basic configuration of Nginx, we can upload the blog repository code to the server and modify the Nginx configuration to point to the repository code.
5. Install Git
The installation
yum install git
Copy the codeCreating a Git user
Here we consider a question: observe the SSH address of Github Clone, and take the address of my blog repository as an example:
Why does this SSH address start with [email protected]?
In a Linux command with a Good Front End, we looked at the syntax of SSH:
ssh [USER@]HOSTNAME
Copy the codeYou can see that you have logged into github.com as a Git user.
We also created a Git user to manage the remote repository. The specific operation is also described in “a front-end sufficient Linux command”, here is a brief description:
Add a user named git
adduser git
Git user password
passwd git
# to ask right
sudo visudo
# Write to file
git ALL=(ALL:ALL) ALL
# Save the presentation, then switch to the Git user
su git
Copy the codeGit users are free to log in
If we log in to the server as git user:
SSH -v [email protected]Copy the codeWe still need to enter the password, in order to avoid login, we need to do the same operation again:
Enter the user home directory
cd ~
# create.ssh directory
mkdir .ssh && cd .ssh
Create authorized_keys file
touch authorized_keys
Get the local public key from a local terminal
cat ~/.ssh/id_rsa.pub
Write the obtained public key to authorized_keys
echo "Change this to your public key content." >> ~/.ssh/authorized_keys
Add execute permission to related files
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh
Copy the codeAt this point, we can log in to the server as git user again, then we can log in directly.
Creating a remote repository
Enter the repository directory
cd /home/www/website
Grant git user permission
sudo chown git:git /home/www/website
Create a code directory
mkdir ts.git
Go to the code directory
cd ts.git
# initialization
git init --bare .
Copy the codeAt this point, we have generated a remote repository address whose SSH address is:
[email protected]: / home/WWW/website/ts. The gitCopy the codeGit init –bare: Git init –bare: Git init –bare: Git init –bare: Git init –bare: Git init –bare: Git init –bare: Git init –bare In this case, we create a ts folder in the ts.git equivalent directory where we can store the submitted source files:
# Access the hooks directory
cd hooks
Create and edit a post-receive file
vim post-receive
# here is what was written post-receive
#! /bin/bash
git --work-tree=/home/www/website/ts checkout -f
# Grant execute permission
chmod +x post-receive
Go to ts.git and create the file
cd. /.. / && mkdir tsCopy the codePush code to the server
In VuePress + Github Pages, we wrote a deploy. Sh script to make it easy to submit the code. Now modify the script file:
Git push - f [email protected]: / home/WWW/website/ts. Git masterCopy the codeExecute the script
sh deploy.sh
Copy the codeAfter executing, we can view the submitted code in the TS folder:
6. Modify the Nginx configuration
Now that the code has been uploaded, we need to modify the Nginx configuration so that users can point to the index.html file when they visit the home page.
Modify the configuration file
cd /etc/nginx
# get permission
sudo chown git:git nginx.conf
Edit the configuration file
vim nginx.conf
# Here is the modified content
location / {
alias /home/www/website/ts/;
index index.html;
}
Reload the nginx configuration file
sudo systemctl reload nginx
Copy the codeAt this point, we enter the server’s IP address in the browser and find that our page is already accessible, but the style is wrong. We look at the request and see that the address of the request starts with the learn-typescript:
Learning-typescript is the baseurl that we set up. We can modify baseurl, or we can just add an nginx configuration:
location^ ~ /learn-typescript/ {
alias /home/www/website/ts/;
}
Copy the codeDo not forget to execute this sentence after the modification, the configuration will take effect:
sudo systemctl reload nginx
Copy the codeAt this point, we can refresh the page again, and the style is back to normal.
At this point, the blog is complete, and the final address is www.ts.yayujs.com, which will be one of the best TypeScript tutorials in China.
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.
- Build a blog with VuePress + GitHub Pages
- This article will teach you how to synchronize GitHub and Gitee code
- Can’t use GitHub Actions yet? Look at this article
- How does Gitee automatically deploy Pages? GitHub Actions again!
- A Linux command with an adequate front end
- A simple enough Nginx Location configuration explained
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.