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

一、效果展示与获取链接

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

请看gif

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

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

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

网页文件目录结构如下

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

二、nginx介绍

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

2. nginx的特性与优点
   2.1 nginx的特性 Nginx使用基于事件驱动架构&＃xff0c;使得其可以支持数以百万级别的TCP连接 高度的模块化和自由软件许可证是的第三方模块层出不穷&＃xff08;这是个开源的时代啊~&＃xff09;
   Nginx是一个跨平台服务器&＃xff0c;可以运行在Linux,Windows,FreeBSD,Solaris, AIX,Mac OS等操作系统上
   这些优秀的设计带来的极大的稳定性
   2.2 nginx的优点 高并发连接&＃xff1a;官方测试能够支撑5万并发连接&＃xff0c;在实际生产环境中跑到2-3万并发连接数 内存消耗少&＃xff1a;在3万并发连接下&＃xff0c;开启的10个nginx进程才消耗150M内存&＃xff08;15M*10&＃61;150M&＃xff09;
   配置文件非常简单&＃xff1a;风格跟程序一样通俗易懂 成本低廉&＃xff1a;nginx为开源软件&＃xff0c;可以免费使用。而购买F5
   BIG-IP、NetScaler等硬件负载均衡交换机则需要十多万至几十万人民币
   支持Rewrite重写规则&＃xff1a;能够根据域名、URL的不同&＃xff0c;将HTTP请求分到不同的后端服务器群组 内置的健康检查功能&＃xff1a;如果Nginx
   Proxy后端的某台Web服务器宕机了&＃xff0c;不会影响前端访问 节省带宽&＃xff1a;支持GZIP压缩&＃xff0c;可以添加浏览器本地缓存的Header头
   稳定性高&＃xff1a;用于反向代理&＃xff0c;宕机的概率微乎其微 模块化设计&＃xff1a;模块可以动态编译 外围支持好&＃xff1a;文档全&＃xff0c;二次开发和模块较多
   支持热部署&＃xff1a;可以不停机重载配置文件 支持事件驱动、AIO&＃xff08;AsyncIO&＃xff0c;异步IO&＃xff09;、mmap&＃xff08;Memory Map&＃xff0c;内存映射&＃xff09;等性能优化

Nginx 常用命令如下
启动服务

/usr/local/nginx/sbin/nginx


停止服务

/usr/local/nginx/sbin/nginx -s stop


重新加载配置

/usr/local/nginx/sbin/nginx -s reload


测试配置文件是否正确

/usr/local/nginx/sbin/nginx -t


三、 Ubuntu安装ngnix

1、
切换到 root 用户

sodo su


2、
更新源

apt-get update


3、
安装依赖库

apt-get install build-essential libtool openssl libpcre3 libpcre3-dev zlib1g-dev


4、
下载nginx

wget http://nginx.org/download/nginx-1.14.2.tar.gz


5、
解压

tar -zxvf nginx-1.14.2.tar.gz


6、
进入该目录

cd nginx-1.14.2/


7、
将 nginx 安装到 /usr/local/nginx 目录

./configure --prefix&＃61;/usr/local/nginx


8、
编译&＃xff0c;安装

make install


四、测试启动nginx

1、执行启动命令

/usr/local/nginx/sbin/nginx


2、查看是否有 nginx 进程

ps -ef | grep nginx


如果有如下所示的进程&＃xff0c;则说明启动成功

3、打开浏览器&＃xff0c;输入localhost&＃xff0c;显示如下

五、用git从gitee获取网页代码并部署

1、进入 nginx 的安装目录

cd /usr/local/nginx


2、删除默认的 html 文件

rm -rf html


删除之后的文件夹如图所示

3、
安装git

apt-get install git


下完可以查看版本

4、
git clone

git clone https://gitee.com/chen-jjpandw/personal-profile-of-chen-jj.git


5、
将下载文件重命名

mv personal-profile-of-chen-jj html


6、
重新加载配置

/usr/local/nginx/sbin/nginx -s reload


7、
将home.html重命名为index.html

你也可以在设计时就把起始html命名为index&＃xff0c;因为nginx必须从index开始打开网站。

mv home.html index.html


8、
刷新一下浏览器就可以看到你的网站啦

大功告成咯&＃xff0c;快叫你的同学朋友去访问你的网站&＃xff08;连接同一个局域网下才可以&＃xff09;

六、参考

nginx
关于使用git命令上传代码到gitee
简单的个人介绍网页-主页面
模糊背景