运用Nginx搭建一个简单的个人网站

百科大全

更新时间：2025-10-05 18:57:3840

admin管理员组
文章数量:1794759

运用Nginx搭建一个简单的个人网站

一、目的
二、完成步骤
- 1.安装Nginx
- 2.设置Nginx
- 3.创建服务器块
三、打开网站
四、总结
五、参考资料

一、目的

尽你所学（采用html、或CSS、或Javascript等）完成一个静态网页，比如制作一个简单的个人介绍网页，至少包含一张图片、一个二级网页跳转链接和一个文件下载链接；将制作的网页资料上传至Ubuntu系统，用ngnix完成一个简单web网站。

二、完成步骤 1.安装nginx

（1）在ubuntu终端中输入如下命令

sudo apt-get install nginx

（2）使用命令查看Nginx服务状态

sudo systemctl status nginx

如图所示，说明安装成功

（3）更改防火墙状态

sudo ufw allow 'Nginx Full'

（4）在浏览器中输入自己的ip地址，默认的 nginx 登录页面

如图，则Nginx安装成功

2.设置Nginx

（1）将域名指向本机

输入命令

sudo vim /etc/hosts

再在其中添加你想设置的域名

我添加的是

127.0.0.1 www.namck

完成之后，重启网络设置

sudo /etc/init.d/networking restart

（2）创建目录结构

①为www.namck 创建根目录

sudo mkdir -p /var/www/www.namck/public_html

②进入域文档根目录下，创建一个文本文件供下载

sudo vim xiazai.txt sudo rar a download.rar xiazai.txt

③接着再创建一个html文件，并添加进如下代码

sudo vim index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>网站</title> <link rel="stylesheet" type="text/css" href="style002.css" /> <script> function Click() { document.getElementById("ClickDo").style.color = "sky-blue"; } </script> </head> <body> <h1>这是一个简单的个人信收集网页</h1> <div class="first-1"> <h1>HELLO</h1> <h4>作者: NAM丶CK</h4> <p>这是一个简单的填写个人资料的网页，运用了HTML和CSS的知识创建，</p> <img src="ss3.bdstatic/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=144245908,1071974981&fm=26&gp=0.jpg" alt="风景tu" height="300" /> </div> <a href="www.runoob/html/html5-intro.html" target="_blank">点击此处学习编写网页</a> <div> <div> <form> 姓名：<input type="name" /><br /> 密码：<input type="password" /><br /> 学号：<input type="text" /><br /> 性别：<input type="radio" name="1" />男 <input type="radio" name="1" />女 <br /> 专业信：<input type="checkbox" />18级 <input type="checkbox" />南岸校区 <input type="checkbox" />物联网专业 <br /> </form> 所属学院： <select> <option>信学院</option> <option>数理学院</option> <option>经管学院</option> <option>人文学院</option> <option>航空学院</option> </select> </div> </div> <div> <div class="first-3"> <button onclick="btn()">点击提交信</button> <h2 id="btt">信未提交</h2> </div> </div> <script> function btn() { var s = document.getElementById("btt"); s.innerHTML = "信已提交"; s.style.color = "red"; } </script> </body> </html>

④现在根目录下有三个文件

3.创建服务器块

①首先创建基本配置文件

sudo nano /etc/nginx/sites-available/www.namck

输入以下内容

server { listen 80; listen [::]:80; root /var/www/www.namck/public_html/; index index.html; server_name www.namck; access_log /var/log/nginx/www.namck.access.log; error_log /var/log/nginx/www.namck.error.log; location / { try_files $uri $uri/ =404; } }

②要启用新的服务器块文件，我们需要创建一个从文件到启动站点的符号链接，该目录在启动期间由 nginx 读取

sudo ln -s /etc/nginx/sites-available/www.namck /etc/nginx/sites-enabled/

③查看nginx 是否正确

sudo nginx -t

如图则说明运行成功

⑤重新启动 nginx 服务

sudo systemctl restart nginx 三、打开网站

在浏览器中输入域名浏览自己写的网站

四、总结

通过上面的方法，可以实现在自己的电脑上完成访问自己所建的网站。

五、参考资料

1.Ubuntu 18.04 安装 nginx 并搭建一个简单的网站 2.如何在Ubuntu 18.04上设置Nginx服务器模块

本文标签：简单网站 nginx

版权声明：本文标题：运用Nginx搭建一个简单的个人网站内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686848974a109852.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。