教你制作一个漂亮的个人简介网页，再上传到Ｕｂｕｎｔｕ用ｎｇｎｉｘ部署你的第一个ｗｅｂ网站！

最新推荐文章于 2025-02-09 17:22:11 发布
最新推荐文章于 2025-02-09 17:22:11 发布
阅读量1.5k 收藏 8
点赞数 1
分类专栏： 网络通信编程 文章标签： nginx css web web design
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clyrjj/article/details/110603766
版权

文章目录

一、效果展示与获取链接

在制作完成后，并且已经部署在虚拟机的服务器端，那么就可以在主机win10下输入服务器的ip，打开网页啦！事实上只要是连接同一个局域网的pc，都可以输入ip访问该网站。

请看gif

限于csdn图片上传的限制，所以我不能把浏览器最大化进行截取，所以网站显示有缩小。

在这里插入图片描述

说明
其中Downlode界面如果不是在本地访问，那么会提供下载或者播放歌曲的选项，我这里本地就直接播放了。
浏览器可以用chrom、firefox或者其他的，只要不是IE就行。

网页特效显示学习自其他博主，在文末会给出原文链接，在本博客中就不再仔细说明。

网页文件目录结构如下
在这里插入图片描述

该网页可自行更改为自己喜欢的图片，或进行其他更改。
网页设计完整代码已上传至gitee仓库，如有需要请点击陈jj的个人简介获取。
嫌麻烦的同学，也可以网盘下载https://pan.baidu.com/s/1Vvkh5XLNd0YvljZ6iFEoJQ
提取码: ga8b
😊

二、nginx介绍

  1. nginx简介 nginx（发音同engine x）是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，并在一个BSD-like协议下发行。
    nginx的特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。

  2. nginx的特性与优点
    2.1 nginx的特性 Nginx使用基于事件驱动架构，使得其可以支持数以百万级别的TCP连接 高度的模块化和自由软件许可证是的第三方模块层出不穷（这是个开源的时代啊~）
    Nginx是一个跨平台服务器，可以运行在Linux,Windows,FreeBSD,Solaris, AIX,Mac OS等操作系统上
    这些优秀的设计带来的极大的稳定性
    2.2 nginx的优点 高并发连接：官方测试能够支撑5万并发连接，在实际生产环境中跑到2-3万并发连接数 内存消耗少：在3万并发连接下，开启的10个nginx进程才消耗150M内存（15M*10=150M）
    配置文件非常简单：风格跟程序一样通俗易懂 成本低廉：nginx为开源软件，可以免费使用。而购买F5
    BIG-IP、NetScaler等硬件负载均衡交换机则需要十多万至几十万人民币
    支持Rewrite重写规则：能够根据域名、URL的不同，将HTTP请求分

最低0.47元/天 解锁文章
使用Nginx创建一个简易web网站
li_de_kun的博客
12-07 4058
使用Nginx创建一个简易web网站 Nginx的安装 1.输入命令sudo apt install nginx 2.查看nginx的版本nginx -v 3.启动nginx的服务service nginx start 4.查看本地ip地址 网站文件的创建 1.编写html文件 2. 参考文档 could not get lock /var/lib/dpkg/lock ...
使用Nginx在CentOS部署托管.NET6 WebAPI应用（一）
weixin_42854997的博客
04-18 1247
本文将手把手教会你如何使用Nginx反向代理在Linux服务器上部署托管.NET6 Web应用的步骤，其中包含一些注意事项和使用的工具。（注：反向代理配置中不包含域名绑定和ssl证书的配置）
利用nginx打造个人简历网页
weixin_33824363的博客
04-10 244
1.下载nginx 　　nginx官方网址:http://nginx.org/ 2.下载和解压 #下载：[root@iZwz9cl4i8oy1reej7o8pmZ soft]# wget http://nginx.org/download/nginx-1.10.3.tar.gz [root@iZwz9cl4i8oy1reej7o8pmZ soft]# tar xf nginx-...
如何制作个人网页并自定义网页内容：从零开始的完整指南
最新发布
m0_63345182的博客
02-09 6681
从基础的 HTML/CSS 到 JavaScript 动效，再到社交媒体链接和照片展示，个性化网页的制作过程既是对技术的锤炼，也是对创意的挑战。制作个人网页是一个非常有趣且具有创意的过程，它不仅能展示你的技能和兴趣，还能让你在互联网世界中留下独特的印记。：HTML 是构建网页内容的基础，它通过标签来描述网页的结构。本文将为你提供一个从零开始的完整指南，带你一步步制作个人网页，学习如何自定义网页内容，实现个性化展示。制作好个人网页后，你可以通过几种方式将其发布到互联网上，让更多的人看到你的成果。
个人简介的网页设计
05-27
这是一个可以改成个人简介或者是其他的多个串联网页设计 你可以试试看看能不能用上 用来交期末作业不错
个人介绍网页制作
yao00100的专栏
10-30 8103
html>head>meta http-equiv="Content-Type" content="text/html; charset=gb2312">title>爱的摩天轮title>head>body>table border="0" cellpadding="0" cellspacing="0" width="1056" height="580">     MSTableType="l
学生个人简介html网页
11-17
简单学生个人简介网页，适合新手学习，交作业参考。采用div+css布局。
博主推荐HTML制作一个美观的个人简介网页（附源码）
05-13
HTML制作一个美观的个人简介网页，利用HTML制作一个美观的个人简介网页，可以在这个基础上修改自己的个人简介信息，然后直接使用，可以直接运行，兼容pc端web和手机端web；
漂亮的网页版个人简历模板
11-28
漂亮的个人网页版的简历页面，可以作为项目的前端项目使用。 里包包含个人信息、工作经验、工作经历、求学经历、专业技能、语言能力、获奖经历等信息
Gerrit部署（Ubuntu+Gerrit+Nginx）
carlos博客
02-17 3818
Gerrit部署 1 Gerrit简介 Gerrit是一个基于web的代码评审工具，它基于Git版本控制系统，由Google内部编写用于代码评审管理。Gerrit旨在提供一个轻量级框架，用于在代码入库之前对每个提交进行审阅。Gerrit提供了一个临时区域，将本地提交与远程仓库隔离开，开发人员将‎‎更改上传到Gerrit，在它们被审阅通过前并不会直接上传到远程仓库。 要了解Gerrit如何帮助强化开发人员的工作流程，请考虑如下一个典型的项目。该项目有一个中心源存储库作为项目内容的权威副本，例如Git版本控制系
【服务器部署】云端部署Gradio情感聊天bot应用(ubuntu服务器+Nginx反向代理+内网穿透）
wzhyyds的博客
01-12 1447
Gradio是一个常用于创建机器学习和深度学习的Web应用程序，它提供了一个用户友好的界面，允许开发者进行快速构建和部署并制作可视化界面，本文会介绍如何将Gradio应用部署到云服务器上，并使用反向代理来实现外链访问。
个人简历网页
12-19
大学生新手，可以参考，资料信息很齐全，希望学弟学妹加油
网页制作之个人简历介绍
04-19
首先声明我不是高手，我是计算机专业的，但网页设计完全是自学的。应该说网页设计自学是程序设计中比较容易的，但是要学的东西很多。大体我总结为以下几个方面，如果想学好的话，建议你进行系统的学习，由浅入深。 第一大步：掌握前台技术 1、学会HTML，再熟悉一下XHTML，了解他们之间的区别,学习的过程当中少用DreamWever这种所见即所得的软件进行代码编写，建议使用EditPLus或者ue等具有高亮代码提示功能的文本编辑器进行代码编写。 2、学会CSS，重在理解CSS的优点，区别使用和不使用CSS的利弊。代码测试编写同上。 3、学会JavaScript,主要学会利用DOM(文档模型)来操作HTML元素，还有BOM（浏览器模型）来操作窗口。 第二大步：掌握服务器脚本 1、选择一门自己认为顺眼的动态脚本语言，比如说PHP（不要去考量语言的优劣性），掌握语法结构，掌握常用函数，类。 2、熟悉SQL语句的使用(对于常用网站而言),熟悉一种数据库的使用。 3、能够配合Javascript和动态脚本语言来实现流行的Ajax模式。
个人简介简历类网页模板
05-21
个人简介简历类网页模板，感觉还可以就传来上来看看、
个人简历HTML页面
10-13
一个简单的HTML个人简介网页，在第十七行可以修改背景图片的路径，请按自己的实际情况修改即可，否则将无背景图案。不懂代码请不要随便修改，只需要修改其中的文字即可。会的勿喷。谢谢
web网页设计期末课程大作业~粉色的服装购物商城页面模板(HTML+CSS+JS)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-02 1万+
web网页设计期末课程大作业~粉色的服装购物商城页面模板 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 关于HTML网页设计期末课程大作业实现，大作业A+水平 ~，共有首页，登录页，瀑布流列表页，详情页带评价带晒单
个人网页的个人简介制作
top0qidian的专栏
10-22 3621
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 个人简历 .STYLE11 {font-size: 24} .STYLE13 {  font-size: 18px;  font-weight: bold; } .STYLE14 {  f
运用Nginx搭建一个简单的个人网站
热门推荐
CHL的博客
12-05 1万+
目录一、目的二、完成步骤1.安装nginx 一、目的 尽你所学（采用html、或CSS、或Javascript等）完成一个静态网页，比如制作一个简单的个人介绍网页，至少包含一张图片、一个二级网页跳转链接和一个文件下载链接；将制作的网页资料上传至Ubuntu系统，用ngnix完成一个简单web网站。 二、完成步骤 1.安装nginx 在ubuntu终端中输入如下命令 sudo apt update nginx ...
出具一份在服务器中部署ngnix并实施的说明书
09-19
### 回答1： 可以回答这个问题。以下是在服务器中部署nginx并实施的说明书： 1. 安装nginx 在Linux系统中，可以使用以下命令安装nginx： sudo apt-get update sudo apt-get install nginx 2. 配置nginx nginx的配置文件位于/etc/nginx/nginx.conf，可以使用以下命令打开该文件： sudo nano /etc/nginx/nginx.conf 在该文件中，可以配置nginx的监听端口、虚拟主机、反向代理等。例如，以下配置可以将nginx监听80端口，并将所有请求转发到本地的3000端口： http { server { listen 80; location / { proxy_pass http://localhost:3000; } } } 3. 启动nginx 配置完成后，可以使用以下命令启动nginx： sudo systemctl start nginx 可以使用以下命令检查nginx是否已经启动： sudo systemctl status nginx 如果nginx已经启动，将会显示类似以下的信息： ● nginx.service - A high performance web server and a reverse proxy server Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled) Active: active (running) since Wed 2021-09-01 10:00:00 UTC; 1h ago Docs: man:nginx(8) Process: 1234 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS) Main PID: 1235 (nginx) Tasks: 2 (limit: 1137) Memory: 3.5M CGroup: /system.slice/nginx.service ├─1235 nginx: master process /usr/sbin/nginx -g daemon on; master_process on; └─1236 nginx: worker process 4. 部署应用程序 部署应用程序的具体步骤与应用程序的类型和语言有关，这里不再赘述。 总之，以上是在服务器中部署nginx并实施的说明书，希望对你有所帮助。 ### 回答2： 在服务器中部署Nginx并实施的说明书如下： 第一步：安装Nginx 1. 登录服务器，并使用管理员权限运行以下命令安装Nginx： ```shell sudo apt update sudo apt install nginx ``` 2. 安装完成后，运行以下命令来启动Nginx服务： ```shell sudo systemctl start nginx ``` 3. 验证Nginx是否成功安装并运行，打开网页浏览器，输入服务器IP地址或域名，如果出现Nginx欢迎页面，则表示安装成功。 第二步：配置Nginx 1. 在部署Nginx的服务器上，找到Nginx的配置文件。通常位于`/etc/nginx/nginx.conf`路径下。 2. 打开Nginx配置文件，编辑该文件以满足项目的需求，如修改监听端口、指定网页根目录、添加代理等。示例如下： ``` server { listen 80; server_name example.com; root /var/www/html; location / { proxy_pass http://localhost:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ``` 上述示例配置中，Nginx监听80端口，将所有流量转发到本地8000端口，并使用代理功能。 3. 修改完Nginx配置后，保存文件并退出编辑器。 4. 运行以下命令重新加载Nginx配置并使其生效： ```shell sudo nginx -t sudo systemctl restart nginx ``` 此处使用第一条命令先检查配置文件是否有错误，如果没有错误，则再使用第二条命令重新加载配置文件。 第三步：访问网站 1. 在浏览器中输入服务器IP地址或域名，即可访问已部署在Nginx上的网站。 2. 可根据需要，在服务器中进一步配置SSL证书、防火墙、负载均衡等功能，以提高网站的安全性和性能。 以上就是在服务器中部署Nginx并实施的说明书，希望对您有所帮助。如果有其他问题，请随时提问。 ### 回答3： 在服务器中部署Nginx并实施的说明书可以按以下步骤进行： 第一步：安装Nginx 1. 打开服务器的终端或SSH连接。 2. 使用适用于服务器操作系统的包管理器（例如Yum或APT）安装Nginx。例如，在Ubuntu上，可以运行命令“sudo apt-get install nginx”来安装Nginx。 第二步：配置Nginx 1. 在安装完成后，进入Nginx的配置目录。在Ubuntu上，默认的配置目录是“/etc/nginx”。 2. 打开主配置文件“nginx.conf”进行修改。根据实际需求，可以配置监听端口、域名和服务器块等。 3. 检查文件路径配置是否正确，比如Web文件目录和日志文件路径。 第三步：启动Nginx 1. 启动Nginx服务。在Ubuntu上，可以使用命令“sudo service nginx start”来启动Nginx。 2. 验证Nginx是否成功启动。可以访问服务器的IP地址或域名，看是否可以看到Nginx的默认页面。 第四步：额外配置 1. 根据实际需求，可以进行额外的配置修改。例如，可以配置反向代理、负载均衡、HTTPS等。 2. 配置修改完毕后，重新加载Nginx配置文件，以使其生效。在Ubuntu上，可以使用命令“sudo service nginx reload”来重新加载配置。 第五步：日常维护与管理 1. 定期更新Nginx版本，以确保系统安全性。 2. 配置Nginx日志轮转，以便对日志进行管理和性能优化。 3. 根据需要，进行访问限制和安全设置。 请注意，上述仅为Nginx部署和实施的基本步骤，根据实际需求和环境，可能需要进行更多的配置和调整。建议参考官方文档以获取更详细的信息和指导。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值