零基础学前端（七）将HTML+CSS静态页面发布成网站

偏执的太偏执、 2024-04-22 15:18 82阅读 0赞

> 我们学习了HTML和CSS，已经可以做出精美的静态网页。我们不慌学习JavaScript，因为Javascript的作用是为网页增加动作和数据交换，只能让网页更完美而已，现在网页的基础我们已经可以搭建，我们不妨先将网站发布出去，让更多人看到你所作的内容。
> 
> 我想这是非常有意义的，让人激动人心的。

## 一、导言 ##

> 发布网站才是编程中最重要的事情，因为，你做的内容，必须要让所有可以上网的人看到 ，才显得更有意义。当然你也可以为其它商店老板、企业开发成熟的网页赚钱，当技术可以产生金钱收益时更让人喜欢技术、喜欢开发产品。

我发布的静态网站地址：[QQ-新不止步，乐不设限][QQ-]

![d48bf23259024489b922af88cdd4aada.png][]

####  ####

## 二、发布网站的方式 ##

1. 服务器发布网站：绝大部分企业的网站的发布主要是通过服务器

2.通过ISS服务发布：这个主要是用于局域网测试（这个几乎不用，手段太老，不便捷）

**发布网站的逻辑**

> 1. 购买服务器
> 
> 2. 在服务器上搭建网站可以被访问的环境
> 
> 3. 将项目文件放大应用服务器上  
>   
> 之后就可以通过ip地址+端口号的方式访问 我们的网站了（虽然我们只做了一个网页，那也是网站）

## 三、购买服务器 ##

### 1. 什么是服务器 ###

> 百度百科解释  
> 
> 
> 服务器是计算机的一种，它比普通计算机运行更快、负载更高、价格更贵。服务器在网络中为其它[客户机][Link 1]（如PC机、[智能手机][Link 2]、ATM等终端甚至是火车系统等大型设备）提供计算或者[应用服务][Link 3]。服务器具有高速的[CPU][][运算能力][Link 4]、长时间的可靠运行、强大的I/O[外部数据][Link 5]吞吐能力以及更好的扩展性。
> 
> 根据服务器所提供的服务，一般来说服务器都具备承担响应服务请求、承担服务、保障服务的能力。服务器作为[电子设备][Link 6]，其内部的结构十分的复杂，但与普通的计算机内部结构相差不大，如：[cpu][]、硬盘、内存，系统、[系统总线][Link 7]等。 \[1\]

> 我自己的理解
> 
> 最早指的是物理主机，
> 
> 现在也指一台电脑中某个虚拟的软件服务，
> 
> 目前扩展为云服务器，就是实际的物理机器在很远的城市，这台物理机器分割成10个、1000个、1000个虚拟的服务器，你购买时就是买的其中之一，或者说你买了一台物理机的 1/1000( 一千分之1)

####  ####

### 2. 购买服务器 ###

为了更好的理解网站发布，必然要花点钱。实际上也不贵，几十元而已。

目前我们购买的都是云服务器，提供该服务的厂商有很多：阿里云、腾讯云、华为云、电信云等

我拿阿里云做为案例，因为它是最早做云服务器这块的。

### 3. 在阿里云购买云服务器 ###

#### （1）进入阿里云官网 ####

![fe30e1f8f98d44c0b1bcfdcb89ad3ac0.png][]

#### （2） 如果是学生有专门的学生机，免费领取使用。如果是非学生直接搜索轻量应用服务器 ####

![2771c807eae1455aaf462c7c0c36fe6e.png][]

![7d9ea91ba6c3440eacf23689b051b84c.png][]

#### （3）选择产品类型目前2核1G也够用 ####

![529b960e8ba94235a32aaaba92e3359d.png][]

####  ####

#### （4）点击立即购买选择类型 ####

![65f9296effbf43a7b821747692d3133d.png][]

#### （5）登陆进入服务器 ####

> 付款成功后，等待服务器初始化。我们目前购买的是轻量应用服务器，是服务器的一种，用来放一些网站、博客等消耗少量资源的。

直接搜索“轻量应用服务器”，在服务器列表中可以看到自己购买的服务器

![378bf556824645d395c8f49cf6c493a2.png][]

远程连接后，看到的页面如下，初学者可能会很晕，别怕，学新的知识就是要克服困难。Centos的系统是纯命令行的，所以我们要在服务器里面安装一个宝塔面板，它显示的效果就跟在window上一样，很利于操作。

![186aebc752a44330bd1951aceb82f124.png][]

## 四、 在轻量应用服务器中安装宝塔面板 ##

### 1. 在上面远程连接的命令行中输入 安装宝塔面板命令 ###

![543202847ea442f3a4849b6f5cfe765a.png][]

安装宝塔命令如下，之后按enter(回车键) ，执行安装，需要等待2分钟

yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

如果出现如下图需要确认的询问，输入y，就可以了

![41e46bebc7f7418383ccc844b9266fc3.png][]

安装成功后，会有宝塔面板 访问地址、账号、密码，将其保存在你本地

![fc3840bd663b49fc8344209ce037b771.png][]

在浏览器里面，输入外网访问地址，可以看到宝塔的登陆界面，那就是宝塔安装成功

![dbd7e750bec04cde999fb090ffa8751b.png][]

### 2. 访问宝塔的外网地址失败，解决方法 ###

如果访问失败，就是你的轻量应用服务器没有给宝塔的外网地址上的端口没开发。

> 这里我还是要为初学者解释一下什么是端口，计算机和服务器上都给每个对应的应用服务开个端口，比如宝塔这个服务，服务器上也对应了一个端口。  
>   
> 如：http://1.116.64.13:888 这个地址，宝塔外网访问地址的端口就是888，就是冒号后面的数字。

接下来，在应用服务器列表，点击我的轻量

![300f014a357c4c34b186af5c2bf4dfbb.png][]

进入关于我的轻量的相关配置，我们要找到防火墙选项，打开888这个端口

![a83f949ba5764a3bb867fb0725610668.png][]

在防火墙页面，点击添加规则

![9ea83cf0a15b4687b1a3d37b5bce3148.png][]

输入开放的端口，点击确认，就可以了

![7fabddd584ff4f90b21b790f068dafd1.png][]

## 五、在宝塔面板发布网站 ##

### 1. 进入宝塔，点击推荐安装LNMP(推荐) ###

![dc5155529eb04f9b8f30440a3b70114a.png][]

### 2. 点击网站菜单，添加一个网站 ###

![35267c0a248449b98f091b92fb26c8b2.png][]

填写站点信息

> 1. 域名：我暂时没有，为了可以创建站点，我先随便写一个符合域名规则的域名
> 
> 2. 根目录：暂时就遵循默认
> 
> 3. php版本：纯静态

![c5e1feacba2b44c7b448188a2bea7eb3.png][]

### 3. 在浏览器里面访问我们的站点 http://ip:80 ###

> 为什么是80端口呢？
> 
> 答：80端口为创建网站的默认端口

看到如下，就是网站创建成功

![a3ebd9fbc8cb4e09a362204470823323.png][]

这是默认生成的html文件，我们需要将自己的html文件和img、css文件夹上传到服务器

### 4. 将我们模仿的QQ页面的文件上传到 /www/wwwroot/qqDemo.cn 目录下 ###

首先找到 /www/wwwroot/qqDemo.cn 目录，点击上传，将我们模仿的qq项目文件夹拖拽上传

![fe15788f53d54e4ba210b47731b22301.png][]

点开上传功能，找到本地的项目，拖拽上传

![f60c590eac9c4724a1f74b9228f20b08.png][]

![4877c3052e364192aecb23fb63667470.png][]

此时刷新网页，就可以看到我们模仿的qq页面了（我目前使用的是8085端口）

![660fa563a6034c7494f42818b3197e0b.png][]

## 六、结束语 ##

[QQ-]: http://47.109.49.176:8085/
[d48bf23259024489b922af88cdd4aada.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e41b397f011c437ea2db01ecd173f168.png
[Link 1]: https://baike.baidu.com/item/%E5%AE%A2%E6%88%B7%E6%9C%BA/5168153?fromModule=lemma_inlink
[Link 2]: https://baike.baidu.com/item/%E6%99%BA%E8%83%BD%E6%89%8B%E6%9C%BA/94396?fromModule=lemma_inlink
[Link 3]: https://baike.baidu.com/item/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1/19024862?fromModule=lemma_inlink
[CPU]: https://baike.baidu.com/item/CPU/120556?fromModule=lemma_inlink
[Link 4]: https://baike.baidu.com/item/%E8%BF%90%E7%AE%97%E8%83%BD%E5%8A%9B/19145245?fromModule=lemma_inlink
[Link 5]: https://baike.baidu.com/item/%E5%A4%96%E9%83%A8%E6%95%B0%E6%8D%AE/9432687?fromModule=lemma_inlink
[Link 6]: https://baike.baidu.com/item/%E7%94%B5%E5%AD%90%E8%AE%BE%E5%A4%87/4393826?fromModule=lemma_inlink
[cpu]: https://baike.baidu.com/item/cpu/120556?fromModule=lemma_inlink
[Link 7]: https://baike.baidu.com/item/%E7%B3%BB%E7%BB%9F%E6%80%BB%E7%BA%BF/1190546?fromModule=lemma_inlink
[fe30e1f8f98d44c0b1bcfdcb89ad3ac0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/dbb1321f7454420d8d150d8313e379a8.png
[2771c807eae1455aaf462c7c0c36fe6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/ce8acf390a77423dadb9fc5f8d13396d.png
[7d9ea91ba6c3440eacf23689b051b84c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e56bb1cf55a74950a47703709e3fb19f.png
[529b960e8ba94235a32aaaba92e3359d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/80151136f7014716ab05e59e5a1dc51c.png
[65f9296effbf43a7b821747692d3133d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/f00ad6534f1d49818bb5ed5c08c2c189.png
[378bf556824645d395c8f49cf6c493a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/87bc6fd022034516884eb59a7f710b40.png
[186aebc752a44330bd1951aceb82f124.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/905da08ee6644874bda0a8943e37ba21.png
[543202847ea442f3a4849b6f5cfe765a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/cf04367993f0483d9b4b5f30f66a6449.png
[41e46bebc7f7418383ccc844b9266fc3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/6f878afacc5046a5b1a2d3f8c73eb5e3.png
[fc3840bd663b49fc8344209ce037b771.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/831317863fc94560bded21e42786a80c.png
[dbd7e750bec04cde999fb090ffa8751b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5bc59e62bc8347b88f0dc75b5e113cd6.png
[300f014a357c4c34b186af5c2bf4dfbb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/308e8aff978d4150941bc82dc5d12f1c.png
[a83f949ba5764a3bb867fb0725610668.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/895e1caa509d4f7dafcb3109d961b51a.png
[9ea83cf0a15b4687b1a3d37b5bce3148.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/82cf86b409b147ac8ff1f56783a7f796.png
[7fabddd584ff4f90b21b790f068dafd1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/06646547793c4e74b5c50879eb776f63.png
[dc5155529eb04f9b8f30440a3b70114a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5156366b7aa149138a770debeae0d88b.png
[35267c0a248449b98f091b92fb26c8b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/3bd613247d1044b9b891daf9f2875714.png
[c5e1feacba2b44c7b448188a2bea7eb3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/34949062c8da49478363660324d00ff9.png
[a3ebd9fbc8cb4e09a362204470823323.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/51918f50ad804ed692d4cb7bd2265eb4.png
[fe15788f53d54e4ba210b47731b22301.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/556c3c9052e645db8cf79807df3b2c65.png
[f60c590eac9c4724a1f74b9228f20b08.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/268a4fc2bbb847f8ad62b87139003779.png
[4877c3052e364192aecb23fb63667470.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/c2c2168f02b243faa99925ac93a82609.png
[660fa563a6034c7494f42818b3197e0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5c066684ec9542b1ba57ff0b8037f466.png