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

一、效果展示与获取链接

在制作完成后，并且已经部署在虚拟机的服务器端，那么就可以在主机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请求分到不同的后端服务器群组 内置的健康检查功能：如果Nginx
   Proxy后端的某台Web服务器宕机了，不会影响前端访问 节省带宽：支持GZIP压缩，可以添加浏览器本地缓存的Header头
   稳定性高：用于反向代理，宕机的概率微乎其微 模块化设计：模块可以动态编译 外围支持好：文档全，二次开发和模块较多
   支持热部署：可以不停机重载配置文件 支持事件驱动、AIO（AsyncIO，异步IO）、mmap（Memory Map，内存映射）等性能优化

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=/usr/local/nginx

8、
编译，安装

make install

四、测试启动nginx

1、执行启动命令

/usr/local/nginx/sbin/nginx 

2、查看是否有 nginx 进程

ps -ef | grep nginx

如果有如下所示的进程，则说明启动成功

3、打开浏览器，输入localhost，显示如下

五、用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，因为nginx必须从index开始打开网站。

mv home.html index.html

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

大功告成咯，快叫你的同学朋友去访问你的网站（连接同一个局域网下才可以）

六、参考

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