从静态页面设计到Nginx网站部署(走过路过，千万不要错过!!!)

一、静态页面设计

1. 目录结构

   

2. 最后的效果图（推荐使用 chrome，Firefox 浏览器）

   ① 个人介绍网页 (index.html)

   

   ② 404页面(404.html)

   

3. 说明

   网页设计代码已托管到 gitee，🔗：摸鱼怪的个人简介

   所以这里就不再粘贴出代码了。后面的从 Nginx 的安装到网站的部署，所用的网页将会以此为模板进行搭建，到时只需克隆一份到本地即可，所以请看下面的操纵

   在这里再附上一个🔗，可以提前预览预览：在下摸鱼怪

二、安装 Nginx

1. 环境说明

   ① 系统：Ubuntu

   ② 浏览器：推荐使用 chrome 或 Firefox

2. 更新源

   sudo apt-get update
   

3. 安装依赖库

   sudo 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
   cd nginx-1.14.2/
   

6. 将 nginx 安装到 /usr/local/nginx 目录

   ./configure --prefix=/usr/local/nginx
   

7. 切换到 root 用户

   su
   

8. 编译，安装

   make install
   

三、测试运行 Nginx

1. 执行启动命令

   /usr/local/nginx/sbin/nginx 
   

2. 查看是否有 nginx 进程，如果有，则说明成功

   ps -ef | grep nginx
   

   

3. 打开浏览器输入 localhost，效果如下

   

四、Nginx 常用命令

1. 启动服务

   /usr/local/nginx/sbin/nginx 
   

2. 停止服务

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

3. 重新加载配置

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

4. 测试配置文件是否正确

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

   如果需要修改 Nginx服务配置，请参考🔗中的第三个链接

五、配置个人介绍网页

还是在 root 用户下操作

1. 进入 nginx 的安装目录，删除默认的 html 文件

   cd /usr/local/nginx
   rm -rf html
   

   

2. git clone 个人介绍网站

   如果没有安装 git，请先安装 git，apt-get install git

   git clone https://gitee.com/xwmrcj/introduction.git
   

3. 将下载文件重命名

   mv introduction/ html
   

4. 重新加载配置

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

5. 然后刷新浏览器，效果如下

   

   OK！到这一步就说明用 Nginx 完成一个简单web网站就算成功了，剩下的就是修改修改前端样式，换成自己喜欢的即可。

六、参考🔗：

• Ubuntu18.04安装Nginx

• CSS3实现模糊背景的三种效果

• Nginx —— nginx服务的基本配置（nginx.conf文件的详解）