1 Overview
I always want to build my own website recently, but my wallet is empty and I can’t afford to rent a server, let alone a domain name. So I was wondering if I could build a server myself for free?
After a few days of surfing, I discovered that there are two free website building tools: Apache and Nginx
2 steps
2.1 Install Nginx
First go to the Nginx official website (nginx.org[1]) to download, or you can directly use the link I provided to download
version 1.23: http://nginx.org/download/nginx-1.23.1.zip[2]
After installation, unzip it and you will see the following directory:
Since Nginx has many functions, and we are just building a server today, we will only use some of them.
2. 2 Configure Nginx
Enter the conf folder and open the nginx.conf
file for editing. There are many configurations in it. I have explained some of the important configurations (# in front of it means that the configuration is not actually written. If you want to add it, just remove the #)
2.3 Start Nginx service
After configuring Nginx, return to the Nginx root directory, find nginx.exe, double-click to run it, and you will see a small black box flashing past, which means that Nginx has started successfully! You can open the browser, enter: virtual host name: listening port (just configured), press Enter, and you will see the following web page:
Congratulations, you have successfully set up the Nginx server!
2. 4. Add files to your website
Just turning on the service is not enough. If others see that your website only has a dry paragraph of text, what is the use? Next, enter the folder location you just configured, create a new txt under the folder, open it and enter this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta >
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.container {
height: 100%;
background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.login-wrapper {
background-color: #fff;
width: 358px;
height: 588px;
border-radius: 15px;
padding: 0 50px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.header {
font-size: 38px;
font-weight: bold;
text-align: center;
line-height: 200px;
}
.input-item {
display: block;
width: 100%;
margin-bottom: 20px;
border: 0;
padding: 10px;
border-bottom: 1px solid rgb(128, 125, 125);
font-size: 15px;
outline: none;
}
.input-item:placeholder {
text-transform: uppercase;
}
.btn {
text-align: center;
padding: 10px;
width: 100%;
margin-top: 40px;
background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
color: #fff;
}
.msg {
text-align: center;
line-height: 88px;
}
a {
text-decoration: none;
color: #abc1ee;
}
</style>
</head>
<body>
<div class="container">
<div class="login-wrapper">
<div class="header">Login</div>
<div class="form-wrapper">
<input type="text" >
<input type="password" >
<div class="btn">Login</div>
</div>
<div class="msg">
Don't have account?
<a href="#">Sign up</a>
</div>
</div>
</div>
</body>
</html>
Then change the file name to index.html, save it, and finally open the browser again, enter the virtual host name: listening port (just configured), press Enter, and you will see the following page: Isn’t it very nice
? This index.html is actually written using HTML+CSS. Interested students can learn it.In addition to html files, you can also put any files in this folder, such as pictures, videos, compressed packages, etc.
2.5 Intranet penetration
The server is set up and the web page is available, but in fact, except for people on the same LAN as you, no one can access your website.
Intranet penetration is used here. The so-called intranet penetration means that the local area network can be directly accessed through the public network IP
, which greatly facilitates the use of some daily remote operations by users. Here I recommend that you use Feige intranet penetration. The usage method is as follows:
2.5.1 Registration
Enter the Feige intranet, penetrate the official website, and register. I won’t go into details about this step.
2.5.2 Open tunnel
After registering, we click on the "Open Tunnel" option and select "Free Node". Those who have the ability can also choose expensive ones.
Then fill in the information, the prefixed domain name can be customized, and the local ip port must be set to: your intranet ip: the port number just configured.
Finally, click OK to confirm the activation, and you will get a free domain name + free public IP.
2.5.3 Start the service
Click this link to download the client according to your computer system. After downloading, unzip it. There are two files in total: click me to run for fool. vbs and npc.exe. Click Foolish Run and click me. vbs. After opening, you will see a pop-up window asking you to fill in the instructions. We switch back to the Feige official website and click "Tunnel Management", as shown below: Select the command according to the computer system, click Copy, then switch back to the pop-up window just now, enter the command, and click OK.
In this way, intranet penetration is successful! Open the browser, enter the access address of the tunnel you just opened (the area that was erased in the picture above), and press Enter. You can also open the web page you wrote before, and you are successful.