用nginx完成一个网页制作

实验环境：Ubuntu18.04
实验要求：

完成一个静态网页，比如制作一个简单的个人介绍网页，至少包含一张图片、一个二级网页跳转链接和一个文件下载链接；将制作的网页资料上传至Ubuntu系统，用ngnix完成一个简单web网站

一、nginx简介

Nginx（Engine x）是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器，由伊戈尔·赛索耶夫开发。
其将源代码以类BSD许可证的形式发布，并且因其稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。其特点是占有内存少，并发能力强。
nginx模块分为以下几类：

NGX_CORE_MODULE //核心模块
NGX_HTTP_MODULE //HTTP处理模块
NGX_EVENT_MODULE //事件处理模块
NGX_MAIL_MODULE //邮件处理模块

二、nginx的安装

1.检查更新并安装nginx

2.安装完成，检查nginx服务状态

3.查看安装的nginx的版本

4.查看Ubuntu中的ip地址

ifconfig

打开Google浏览器（或Firefox），输入刚才的ip

三、配置服务器

1.域名指向本机

更改hosts文件：

sudo nano /etc/hosts

添加域名：

127.0.0.1 ubuntugb.com   www.ubuntugb.com

保存并重启networking

sudo /etc/init.d/networking restart

2.创建目录结构

我们来为我们的域ubuntuzxw.com创建根目录：

sudo mkdir -p /var/www/ubuntugb.com/public_html

安装rar，用于解压缩文件

sudo apt install rar

进入域名的根目录：

cd /var/www/ubuntugb.com/public_html
ls

在这个目录下创建一个1.txt并压缩

sudo vim 1.txt
sudo rar a 1.rar 1.txt

在此目录下创建index.html文件
代码复制进去：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ubuntugb.com</title>
</head>
<body><h1>个人简介</h1><p>gb：<br>重庆交通大学物联1802班</p><img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"><br><br><br><a href="https://www.baidu.com">百度</a><br><br><br><a href="1.rar">download 1.txt 文本</a>
</body>
</html>

保存之后查看该目录下的文件是否创建了

3.创建服务

编辑基本配置文件

sudo vim /etc/nginx/sites-available/ubuntugb.com

将如下代码复制进去

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

创建链接：

sudo ln -s /etc/nginx/sites-available/ubuntugb.com /etc/nginx/sites-enabled/

4.测试配置

sudo nginx -t

没有错误，执行以下命令
重启nginx：

sudo systemctl restart nginx

5.效果展示

四、参考地址

https://blog.csdn.net/qwertyzxw/article/details/110296717

用nginx完成一个网页制作相关推荐

网页制作练习-博文尚美页面
文章目录 1.前言 2.页面整体效果 3.前期准备 3.1素材 3.2CSS样式 4.各部分代码 4.1顶部导航 4.2主页大照片 4.3服务范围面板 4.4客户案例面板 4.5最新资讯面板 4.6网 ...
前端开发等于网页制作吗？点进来了解一下！！！
什么叫做网站前端开发,它和网页制作.网页设计有什么区别? "软件产业国际化,最重要的是人才",目前中国的软件人才存在数量和结构上的双重缺口,尤其是前端开发.在国外前端开发与后端开发 ...
一个简单的个人介绍html网页制作
目录实验说明网页制作实验说明 1.环境:本实验用的windows 环境:ubantu 下载安装nginx参考:https://blog.csdn.net/qq_23832313/article/ ...
dw网页设计期末设计一个网页_制作网站与设计网页可以用什么软件？
网站制作确实是项技术活,要不然怎么一个前端设计师工资都可以到6-7K呢,早在读书时代稍有爱好网页设计时就听说过网页三剑客. 网页三剑客网页三剑客,是一套强大的网页编辑工具,最初是由Macromedi ...
在html中怎么制作友情链接,如何制作一个网页链接，用描文本、友情链接交易方式教你如何制作？...
如何制作一个网页链接,用描文本.友情链接交易方式教你如何制作?作为seo优化人员如何运用外界链接开展百度搜索引擎提升?下面和小编一起看看! 1.锚点链接链接应该是有关的优先,百度搜索引擎提升锚点链接 ...
html课做一个网页,菜鸟自学建站 HTML 第三课制作我的第一个网页_html/css_WEB-ITnose...
上一课我们了解了Dreamweaver的工作界面,从这节课开始,我们由浅入深的开始学习网页的制作. 首先打开Dreamweaver,制作网页首先要新建一个文档,就像我们写文稿需要一张纸一样. 只有有了 ...
php与html网页制作,web 一个简单地三级网页的设计和编写，html+css，适合学习制作的新手 WEB(ASP,PHP,...) 238万源代码下载- www.pudn.com...
文件名称: web下载收藏√ [ 5 4 3 2 1 ] 开发工具: HTML 文件大小: 4716 KB 上传时间: 2013-06-25 下载次数: 7 提供者: ericc 详细 ...
HTML+CSS一个简单的电影网页制作作业，学生个人html静态网页制作成品代码, html电影速递网
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
dw网页设计期末设计一个网页_《网页设计与制作Dreamweaver》期末考试试题
<网页设计与制作Dreamweaver>期末考试试题 1<网页设计与制作>期末考试试题一.单项选择题(每个题只有一个的答案是正确的.每题 3 分,共 60 分)1.目前在 In ...