Recently, I always want to build my own website, but my wallet is empty, and I can't afford to rent a server, let alone a domain name. So I wondered if I could build a server by myself without paying?
Really good! ! !
After a few days of surfing, I found out that there are two free website builders: Apache and Nginx
Since the building methods of the two tools are similar, I will take Nginx as an example
1. Install Nginx
First go to the Nginx official website ( nginx.org ) 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
Unzip after installation, and you will see the following directory:
Since Nginx has many functions, and we are only building a server today, we will only use some of them.
2. Configure Nginx
Enter the conf folder, open the nginx.conf file for editing, there are many configurations in it, I have explained some of the important configurations (the "#" in front means that the configuration is not actually written, if you want to join, just remove "#"):
3. Start the Nginx service
After configuring Nginx, return to the root directory of Nginx, find nginx.exe, double-click to run it, and you will see a small black box flashing past, which means that Nginx has been successfully started! 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 built the Nginx server!
4. Add files for your website
Just turning on the service is not enough. If someone sees your website with only a dry paragraph of text, what's the use? Next, enter the folder location just configured, create a new txt under the folder, and enter this code after opening:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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-line: 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" name="username" placeholder="username" class="input-item">
<input type="password" name="password" placeholder="password" class="input-item">
<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: the listening port (the configuration just now), press Enter, and you will see the following page:
Isn't it very beautiful? This index.html is actually written in 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 files, etc.
5. Intranet penetration
The server is set up and the webpage is available, but in fact, no one can access your website except people on the same LAN as you.
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 daily remote operations of users. Here I suggest that you use Flying Pigeon intranet penetration, the method of use is as follows:
5.1 Registration
Enter the Feige Intranet to penetrate the official website and register. I won’t talk about this step.
5.2 Open the tunnel
After registration, we click on the "Open Tunnel" option and select "Free Node". Those who are capable can also choose expensive ones.
Then fill in the information, where the front domain name can be customized, and the local ip port must be set as: your intranet ip: the port number just configured.
Finally, click OK to activate, and you will get a free domain name + free public network ip.
5.3 Start the service
Click this link to download the client according to your computer system. Unzip it after downloading, there are two files in total: click me.vbs and npc.exe. Click to run like a fool and click on my.vbs. After opening, you will see a pop-up window for you to fill in the instructions. We switch back to the official website of Feige, click "Tunnel Management", as shown in the figure 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 just opened (the place that was erased in the above picture), press Enter, and you can also open the webpage you wrote before, and you are successful.