目录
- 一、目的
- 二、完成步骤
- 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.com/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="https://ss3.bdstatic/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=144245908,1071974981&fm=26&gp=0.jpg"
alt="风景tu"
height="300"
/>
</div>
<a href="https://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.com/public_html/;
index index.html;
server_name www.namck.com;
access_log /var/log/nginx/www.namck.com.access.log;
error_log /var/log/nginx/www.namck.com.error.log;
location / {
try_files $uri $uri/ =404;
}
}
②要启用新的服务器块文件,我们需要创建一个从文件到启动站点的符号链接,该目录在启动期间由 nginx 读取
sudo ln -s /etc/nginx/sites-available/www.namck.com /etc/nginx/sites-enabled/
③查看nginx 是否正确
sudo nginx -t
如图则说明运行成功
⑤重新启动 nginx 服务
sudo systemctl restart nginx
三、打开网站
在浏览器中输入域名浏览自己写的网站
四、总结
通过上面的方法,可以实现在自己的电脑上完成访问自己所建的网站。
五、参考资料
1.Ubuntu 18.04 安装 nginx 并搭建一个简单的网站
2.如何在Ubuntu 18.04上设置Nginx服务器模块
更多推荐
运用Nginx搭建一个简单的个人网站
发布评论