Step-by-Step Guide to Installing and Configuring Nginx for a Free Self-Hosted Website with Intranet Tunneling
This article explains how to download, install, and configure Nginx on a local machine, create a simple HTML site, launch the server, and expose it to the public internet using a free tunneling service, providing a complete low‑cost web‑hosting solution.
Author: NuoyaLucas (source: https://blog.csdn.net/Lucas0623/article/details/126584307)
Why build a free website?
Because the author has limited funds for servers and domains, they explore building a website without any cost.
Free tools
The two free web‑server tools discovered are Apache and Nginx; the guide uses Nginx as an example.
1. Install Nginx
Visit the official Nginx website (nginx.org) or download the 1.23 version directly from http://nginx.org/download/nginx-1.23.1.zip . After downloading, unzip the package and you will see the standard Nginx directory structure.
The guide only uses a subset of Nginx's many features, sufficient for a basic static site.
2. Configure Nginx
Edit nginx.conf inside the conf folder. Important directives are explained; lines starting with # are comments and can be uncommented by removing the # symbol.
3. Start the Nginx service
After configuration, go to the Nginx root directory, double‑click nginx.exe . A brief black console window indicates successful startup. Open a browser and navigate to your‑domain:your‑port to see the default page.
Congratulations, the Nginx server is up and running.
4. Add website files
Create an index.html file in the configured folder with the following HTML/CSS content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* { margin:0; padding:0; }
html, body { height:100%; }
.container { height:100%; background-image:linear-gradient(to right, #fbc2eb, #a6c1ee); }
.login-wrapper { background:#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 #807d7d; font-size:15px; outline:none; }
.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" placeholder="Username">
<input type="password" placeholder="Password">
<div class="btn">Login</div>
</div>
<div class="msg">Don't have account?Rename the file to index.html , then reload the browser at the same address to see the custom page.
5. Intranet penetration (exposing the site)
To make the site accessible outside the local LAN, use a free tunneling service (Feige). Register on the Feige website, create a tunnel, select a free node, and set the local IP and port you configured in Nginx.
Download the client, run the provided .vbs script, paste the command copied from the Feige portal, and start the tunnel. After the tunnel is active, visiting the public URL will display the same page you created locally.
Finally, the article includes promotional material for a paid community offering ChatGPT resources, interview questions, and other benefits, but the technical guide itself provides a complete, free method to host a website.
Top Architect
Top Architect focuses on sharing practical architecture knowledge, covering enterprise, system, website, large‑scale distributed, and high‑availability architectures, plus architecture adjustments using internet technologies. We welcome idea‑driven, sharing‑oriented architects to exchange and learn together.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.