Nginx完成一个简单的web网站

news/2024/5/19 15:44:25/文章来源:https://blog.csdn.net/qq_43643118/article/details/110439058

nginx完成一个简单的web网站

- 网页制作
- 生成web网站
- 总结+参考

网页制作

vscode下完成代码的编写
两个简陋的页面，其中包含有页面的跳转和供下载文件的链接

主页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> test--cgy</title>
<style type = "text/css">h3{background-color: Lightgreen;  /*设置段落背景色  浅绿  */color: white;       /*设置文字颜色  白色 */text-align: center;  /*设置文字对齐方式  居中  */padding: 10px;}/* 设置图片居中*/img{position: absolute;left:50%;top:50%;margin-left: -150px;margin-top: -100px;} /*对整体进行美化 */body{background-color: #BBFFBB;/*背景颜色*/}</style>
</head> 
<body><div class="home"><div class="content"><h3 class="title">欢迎来到我的啦啦test</h3><h3 class="titles">今天也要加油鸭</h3><img src="QQ4.jpg" width="50%" ><a href='./index.html'><span>Home</span></a><a href='./test.html'><span>Test</span></a></div></div>
</body>  
</html>

test页面：

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title> test--cgy</title>
<style type = "text/css">h3{background-color: Lightgreen;  /*设置段落背景色  浅绿  */color: white;       /*设置文字颜色  白色 */text-align: center;  /*设置文字对齐方式  居中  */padding: 10px;}/* 设置图片在左侧*/img{/* position: absolute;*/left:50%;top:50%;float:left;margin: 70px;} span{text-align: center;}/*设置背景颜色*/body{background-color:#BBFFBB;}</style>
</head> 
<body><div class="home"><div class="content"><h3 class="title">欢迎来到我的啦啦test</h3><h3 class="titles">今天也要开心鸭</h3><img src="QQ4.jpg" width="50%" ><a href='./index.html'><span>Home</span></a><a href='./test.html'><span>Test</span></a></div><div> <p> .......</p><p> ........</p><p>if you wan to 听听歌：</p><a href='笑傲江湖.mp3'>点击点击</a></div></div>
</body>  
</html>

其中图片和音频文件要放在网页创建的文件夹里。

生成web网站

Ubuntu18.04中安装nginx

先更新 sudo apt update
再安装 sudo apt install nginx

测试安装
在浏览器中输入localhost,即可看到默认的nginx网页
把域名指向本机后重启网络

sudo nano /etc/hosts
sudo /etc/init.d/networking.service

在这里插入图片描述

创建新目录，把win10本地编写的网页源码通过vmtools工具拖到Ubuntu中，移动到新目录下
①创建域文档目录

②进入域文档目录

创建 index.html test.html文件，在里面粘贴编写的网页代码

导入图片和音频（这里网页提供的下载文件音频）

域文档目录里存在的所有文档：
nginx配置静态网页
①配置主文件
创建文件 sudo nano /etc/nginx/sites-available/cgy22.com
在里面配置
创建符号链接用来启动服务器块文件