A detailed tutorial from purchasing a server to deploying blog code

foreword

We are in "An article that takes you to build a blog with VuePress + Github Pages" implements VuePress to build a personal blog, in "An article that teaches you to synchronize Github and Gitee with code" and "How does Githee automatically deploy Pages? Still use GitHub Actions!" achieve automatic code synchronization and deployment of Github and Gitee, but I finally decided to build my own website, just do it, let's start.

buy server

Because of personal work experience, we chose Alibaba Cloud server. We directly bought a cloud server ECS, the so-called ECS server, directly citing the official introduction:

ECS (Elastic Compute Service) is a simple and efficient computing service with scalable processing power. Help you build more stable and secure applications, improve operation and maintenance efficiency, reduce IT costs, and enable you to focus more on core business innovation.

For simplicity, direct one-click purchase :

Region, mirror, network type, etc. I directly selected the default.

Considering that no one visited it at the beginning, the website is completely static. Even if you buy it, you can configure it later. For the instance specification of I chose 1 vCPU 1 GiB .

public network bandwidth

Payment methods

In the public network bandwidth , there are two payment methods, one is based on fixed bandwidth and the other is based on usage traffic.

The so-called fixed bandwidth is paid first and then used. If the user chooses 10M bandwidth, Alibaba Cloud will allocate 10M exclusive bandwidth to the user. The official recommendation is suitable for customers with stable network bandwidth requirements in business scenarios, that is, your page traffic. It is more stable, and it is more appropriate to choose a fixed bandwidth.

The so-called per-use traffic, first-use-later payment, billing according to the specific traffic flow, deduction per hour, the official recommendation is suitable for scenarios where the business scenario has a large change in network bandwidth requirements, such as the usual low bandwidth usage but intermittent Scenarios where network access peaks occur.

Bandwidth selection

If you use the fixed bandwidth mode, then how much bandwidth is appropriate to choose, we might as well do a rough calculation:

The so-called network bandwidth refers to the amount of data that can be transmitted in a unit of time (generally 1 second). The network is similar to a highway. The greater the bandwidth, the more lanes on the highway, and the stronger the traffic capacity. Simply put, the greater the bandwidth, the faster the website access speed.

The 1M corresponding to the bandwidth to download the peak is 128KB/S , because the cloud server cloud vendors provide the bandwidth unit is bit (bits), we usually say 1M complete wording actually 1Mb/s , pay attention to this one b lowercase. The unit of user download speed is Byte (byte), 1Byte (byte) = 8bit (bit), so 1Mb = 1/8MB = 0.125MB , we know 1MB = 1024KB , so 1Mb = 0.125MB = 128KB , of course, you can also convert it like this:

1Mbit/s = 1024kbit/s = 1024/8(KByte/s) = 128(KByte/s)

In short, the bandwidth is 8 times the download speed. 1M bandwidth corresponds to 128KB/s, 2M corresponds to 256KB/s, 4M corresponds to 512KB/s, and so on.

What is the resource size of our page? We can view the total resource size of the page in NetWorks TypeScript learning site I built as an example, open the development tool to view:

We can see that the size of the transmitted resource is 443kB , and the 852kB . The reason for the difference is that the data transmitted by the server and the browser can be compressed, such as gzip compression.

When the client and the server shake hands, the client will tell the server whether compression is supported. If the server enables compression and the client supports compression, the compressed data will be transmitted, and the client will decompress it. We can check the compression method headers of content-encoding

Then the actual transmission size here is 443kB . If we want users to open our website within 1s, we need at least 443 / 128 = 3.46 M of bandwidth. Of course, this calculation is very rough. User bandwidth, CDN optimization, etc. I didn't take it into account, so I just calculated it casually. If the optimization is done well, even with only 1M bandwidth, it can bring good results.

If we buy 4M fixed bandwidth for 1 month, the price given here is 155.60 yuan.

But if we use pay-per-traffic, if 4M runs full per 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 Calculate, it is about 33 yuan per day, and about 1,000 yuan per 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 per day, assuming that they open the homepage and withdraw it, the traffic generated is probably 1000 * 443KB = 0.42GB , and the daily cost is 3 cents, which is about 9 yuan a month.

Considering that there was no traffic at the beginning, here I chose to charge by usage and set the maximum network bandwidth to 25M. The reason for setting the maximum network bandwidth is to take into account the high cost of sudden bursts of traffic. The maximum network bandwidth is a little limited.

1. Reset the instance login password

If it is a one-click purchase, we should see a prompt like this:

After purchasing, we https://help.aliyun.com/document_detail/25439.html 161dc26d57e858 on this page, otherwise we will not be able to log in to the server.

2. Configure security groups

We know that when we use the HTTP protocol to access a website, the default monitoring port is 80, but the Alibaba Cloud server closes port 80 by default. In order to support HTTP access, we log in to the cloud server ECS management background, select the security group, and then click the A security group:

Click add manually, add port 80, the effect of adding is as follows:

3. Login instance

1. ssh login

# 语法：ssh root@<实例的固定公网IP或EIP>

# 示例：
ssh [e-mail]

# 输入实例登录密码
# 如果出现 Welcome to Alibaba Cloud Elastic Compute Service ! 表示成功连接到实例。

After logging in, if we do not operate for a period of time, we will need to log in again and enter the password again when we operate again. In order to log in automatically, we need to:

# 在本地起一个终端，获取本地公钥
cat ~/.ssh/id_rsa.pub

# 登陆服务器，将获取的公钥写入服务器的 authorized_keys
echo "这里修改为你的公钥内容" >> ~/.ssh/authorized_keys

This way we don't need to enter a password when we log in again. Note that what we wrote is in the ~ directory, which means that if we switch users, we need to configure it again in this way.

2. Console entry

We log in to ECS management console , we can see our server instance, click connect remotely:

Click to log in immediately, jump to https://ecs-workbench.aliyun.com/ , enter the password, and you can log in.

Of course, there are many ways to log in. You can click the cloud server ECS document see more ways.

4. Install Nginx

Introduction to Nginx

Nginx is a lightweight web server and 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.

Install and enable

# 安装
yum install -y nginx

# 启用 Nginx
systemctl start nginx

# 设置为在系统启动时自动启动
systemctl enable nginx

The effect is:

At this point, we enter the IP of the server in the browser. If you see the following page prompt, the activation is successful:

Create test files

We create a index.html file for testing and place it in the /home/www/website/ directory

# 创建目录
mkdir -p /home/www/website

# 进入目录
cd /home/www/website

# 创建文件
touch index.html

# 写入内容
echo '<!doctype html><html><head><meta charset="utf-8"><title>Hello World!</title></head><body>Hello World!</body></html>' > index.html

Modify the configuration file

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

# 修改配置文件内容
vim nginx.conf

location / {} so that when you visit the home page, the file you just created will be 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;

            # 这里是添加的内容
        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 {
        }
    }

After saving and exiting the changes, reload the configuration file:

# 重新加载配置文件
systemctl reload nginx

At this point, we open the browser and enter the server, IP, and you can see that the configuration takes effect:

So far, we have completed the basic configuration of Nginx. Next, we upload the blog warehouse code to the server, and then modify the Nginx configuration to point to the code in the warehouse.

5. Install Git

Install

yum install git

Create git user

Here we think about a problem, observe the SSH address of Github Clone, here is my blog warehouse address as an example:

Why does this SSH address start with [e-mail] ?

In "A Front-End Sufficient Linux Command" , we mentioned that the syntax of ssh is:

ssh [USER@]HOSTNAME

We can find that we are actually logged in to github.com as a git user.

We also follow this approach and create a git user to manage the remote repository. The specific operation is also in 161dc26d57ebc6 "A Front-End Sufficient Linux Command" , here is a brief description:

# 添加一个名为 git 的用户
adduser git
# 设置 git 用户的密码
passwd git
# 提权
sudo visudo
# 在文件里写入
git ALL=(ALL:ALL) ALL
# 保存提出，然后切换到 git 用户
su git

git user free login

If we now log into the server with the git user:

ssh -v [e-mail]

We still need to enter the password, in order to avoid logging in, we need to do the same operation again:

# 进入用户主目录
cd ~

# 创建 .ssh 目录
mkdir .ssh && cd .ssh

# 创建 authorized_keys 文件
touch authorized_keys

# 在本地起一个终端，获取本地公钥
cat ~/.ssh/id_rsa.pub

# 登陆服务器，将获取的公钥写入服务器的 authorized_keys
echo "这里修改为你的公钥内容" >> ~/.ssh/authorized_keys

# 给相关文件添加执行权限
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh

At this point, we can log in directly to the server as the git user.

Create a remote repository

# 进入代码仓库目录
cd /home/www/website

# 赋予 git 用户权限
sudo chown git:git /home/www/website

# 创建代码目录
mkdir ts.git

# 进入代码目录
cd ts.git

# 初始化
git init --bare .

So far, we have generated a remote warehouse address whose SSH address is:

git@8.141.152.253:/home/www/website/ts.git

Here we use git init --bare initialize the warehouse, and we often use it git init initialize the warehouse not the same, you can understand it designed to create a remote repository, the git version control repository includes only relevant documents, without the project source file, so we need the help of a hooks, when there is in the code submitted to the warehouse, migrating the code to a different directory submissions, here we are ts.git create a directory at the same level ts folder to store the source code files submitted by:

# 进入 hooks 目录
cd hooks

# 创建并编辑 post-receive 文件
vim post-receive

# 这里是 post-receive 写入的内容

#!/bin/bash
git --work-tree=/home/www/website/ts checkout -f

# 赋予执行权限
chmod +x post-receive

# 退出目录到 ts.git 同级目录并创建文件
cd ../../ && mkdir ts

push code to server

In "An article that takes you to build a blog with VuePress + Github Pages" , we wrote a deploy.sh script for the convenience of submitting code, and now modify the script file:

git push -f git@8.141.152.253:/home/www/website/ts.git master

execute script

sh deploy.sh

After execution, we can view the submitted code in the ts folder:

6. Modify Nginx configuration

Now that the code has been uploaded, we need to modify the configuration of Nginx so that users can point to the index.html file when they visit the home page.

# 修改配置文件
cd /etc/nginx

# 拿到权限
sudo chown git:git nginx.conf

# 编辑配置文件
vim nginx.conf

# 这里是修改的内容
location / {
    alias /home/www/website/ts/;
    index index.html;
}

# 重新加载 nginx 配置文件
sudo systemctl reload nginx

At this point, we enter the IP address of the server in the browser and find that we can already access our page, but the style is learn-typescript up. When we check the request, we will find that the requested address starts with 061dc26d57ed6b:

learn-typescript is the baseurl we set, we can modify the baseurl, or we can directly add an nginx configuration:

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

Don't forget to execute this sentence after modification, the configuration will take effect:

sudo systemctl reload nginx

At this point, we refresh the page again, and the style can return to normal.

So far, we have completed the construction of the blog. The final access address is: http://www.ts.yayujs.com , which will be one of the best TypeScript introductory tutorials in China.

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
2. An article teaches you how to synchronize code with GitHub and Gitee
3. will not use 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

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.