搭建Linux环境，安装nginx，部署第一个静态网页

太过爱你忘了你带给我的痛 2021-09-07 06:02 326阅读 0赞

# Xshell 7+WinSCP部署nginx网页 #

## 1.申请云服务器 ##

**在下面两个网站完成实名认证后，可以申请云服务器体验或者可以直接购买。**

> 阿里云：https://free.aliyun.com/?spm=a2c6h.13066369.0.0.894740d1z70tDF  
> 腾讯云：https://cloud.tencent.com/act/free?from=11649

**贴一个参考配置。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70]  
**配置完成后需要获取自己的IP地址，设置密码，打开80端口（http）和443端口（https），在右上角进入控制台。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 1]  
**进入云服务器**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 2]**进入服务器。**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 3]  
**停止主机后，在全部操作里面重置密码，这里可以记下自己在公网上面的IP地址，在绑定域名之前访问时候会显示IP地址。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 4]**重置密码。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 5]  
**进入安全组，打开80端口和443端口。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 6]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 7]**到这里，服务器的配置基本完成，你需要记下IP地址和密码即可。**

> 这里推荐使用Xshell进行ssh远程连接，使用WinSCP进行文件传输，文件已经上传至博主资源，找到下载即可。

## 2.建立连接 ##

**新建会话**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 8]**名称随便取，主机输入刚刚申请的服务器ID，点击用户身份验证。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 9]**输入用户名和密码，因为我们配置的服务器是Linux环境下的，所以用户名一般为root，密码是刚刚设置的密码。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 10]**登录成功**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 11]**输入命令行，更新软件商店**

apt update

**输入命令行，下载nginx**

apt install nginx

**成功截图如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 12]**这时候你可以试着访问一下你的IP地址，已经有一个nginx的初始界面了。**

## 3.传输文件演示 ##

**打开WinSCP，建立站点，输入相应的信息即可。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 13]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 14]  
**找到默认网页根目录/var/www/html，把左边的本地内容拖入右边即可。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 15]**演示这里传的是一个大佬写的流心爱心，结果如图。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 16]**到这里，一个简单的静态网页就部署完成啦。  
附上流心爱心源码：  
.css**

body { 
      background-color: #000;    
      margin: 0;
      overflow: hidden;
      background-repeat: no-repeat;
    }

**.js**

**.html**

<!DOCTYPE html>
    <html lang="en" >
    <head>
    <meta charset="UTF-8">
    <title>NEON LOVE</title>
    <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    
    <canvas id="canvas" width="1400" height="600"></canvas>
    
    <script src="js/script.js"></script>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70]: /images/20210827/54fd90792e70474b91f0bf157eec32e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 1]: /images/20210827/5c57c75a0cca49f4a58aa94b9f67e099.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210112162518539.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 3]: /images/20210827/8f52eb7777aa44a1a91dff6d2bb558a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 4]: /images/20210827/8f8987f1973f46798ecd485e1516c5ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 5]: /images/20210827/956444f4938242c59c13486caa826c59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210112163142149.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 7]: /images/20210827/7c618f9dbe67494794e5cf181835c98f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 8]: /images/20210827/ec75f4d3a4524483979edca440f1e79d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 9]: /images/20210827/50865da7a3aa4e529fd852381e4cf811.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 10]: /images/20210827/7bb399acfc5f4a0c80380b36808b1df1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 11]: /images/20210827/ec5a6d25b08c4fa8801f96a5f5373355.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 12]: /images/20210827/5a24681325f04ae79d684ddc2a963630.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20210112164950861.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 14]: /images/20210827/d424903bb6f845afb4092c361adc6781.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 15]: /images/20210827/aab9873c0b5c48f196ddaa885e1887fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 16]: /images/20210827/23a52438a57048b4b70867d51f2ade72.png