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

news2024/7/4 23:39:46

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

        我想这是非常有意义的,让人激动人心的。

一、导言

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

 我发布的静态网站地址:QQ-新不止步,乐不设限

二、发布网站的方式

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

2.通过ISS服务发布:这个主要是用于局域网测试(这个几乎不用,手段太老,不便捷)

发布网站的逻辑

1. 购买服务器

2. 在服务器上搭建网站可以被访问的环境

3. 将项目文件放大应用服务器上

之后就可以通过ip地址+端口号的方式访问 我们的网站了(虽然我们只做了一个网页,那也是网站)

三、购买服务器

1. 什么是服务器

百度百科解释
 

服务器是计算机的一种,它比普通计算机运行更快、负载更高、价格更贵。服务器在网络中为其它客户机(如PC机、智能手机、ATM等终端甚至是火车系统等大型设备)提供计算或者应用服务。服务器具有高速的CPU运算能力、长时间的可靠运行、强大的I/O外部数据吞吐能力以及更好的扩展性。

根据服务器所提供的服务,一般来说服务器都具备承担响应服务请求、承担服务、保障服务的能力。服务器作为电子设备,其内部的结构十分的复杂,但与普通的计算机内部结构相差不大,如:cpu、硬盘、内存,系统、系统总线等。 [1]

我自己的理解

最早指的是物理主机,

现在也指一台电脑中某个虚拟的软件服务,

目前扩展为云服务器,就是实际的物理机器在很远的城市,这台物理机器分割成10个、1000个、1000个虚拟的服务器,你购买时就是买的其中之一,或者说你买了一台物理机的 1/1000( 一千分之1)

2. 购买服务器

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

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

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

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

(1)进入阿里云官网

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

(3)选择产品类型目前2核1G也够用

(4)点击立即购买选择类型

(5)登陆进入服务器

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

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

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

 

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

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

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

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

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

 

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

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

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

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

 这里我还是要为初学者解释一下什么是端口,计算机和服务器上都给每个对应的应用服务开个端口,比如宝塔这个服务,服务器上也对应了一个端口。

如:http://1.116.64.13:888  这个地址,宝塔外网访问地址的端口就是888,就是冒号后面的数字。

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

 

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

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

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

五、在宝塔面板发布网站

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

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

填写站点信息

1. 域名:我暂时没有,为了可以创建站点,我先随便写一个符合域名规则的域名

2. 根目录:暂时就遵循默认

3. php版本:纯静态

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

为什么是80端口呢?

答:80端口为创建网站的默认端口

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

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

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

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

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

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

六、结束语

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1039103.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C语言】——自定义类型详解:结构体,枚举,联合

大家好,今天为大家分享一下C语言中的那些自定义类型:结构体,枚举,联合,还有之前可能不曾了解的结构体内存对齐、位段等知识点!!! 一、结构体 结构是一些值的集合,这些值称…

【C++】String类基本接口介绍(多看英文文档)

string目录 目录 如果你很赶时间,那么就直接看我本标题下的内容即可!! 一、STL简介 1.1什么是STL 1.2STL版本 1.3STL六大组件 1.4STL重要性 1.5如何学习STL 二、什么是string??(本质上是一个类&…

研究铜互连的规模能扩大到什么程度

随着领先的芯片制造商继续将finFET以及很快的纳米片晶体管缩小到越来越小的间距,使用铜及其衬垫和阻挡金属,较小的金属线将变得难以维持。接下来会发生什么以及何时发生,仍有待确定。 自从IBM在20世纪90年代向业界引入采用双镶嵌工艺的铜互连…

mysql四种事务隔离级别介绍

MySQL事务隔离级别定义了不同事务之间的隔离程度。MySQL标准列表了四个隔离级别,依次为读未提交(READ UNCOMMITTED)、读已提交(READ COMMITTED)、可重复读(REPEATABLE READ)和串行化&#xff08…

会务转化如何取得“数字化”突破?会务营销数字化功能推荐

​数字化时代下,企业日常的活动经营已经不再局限于简单的人员聚集和互动交流,而是需要更为标准化、专业化的会务系统,在对会务活动进行支撑和保障的同时,达成会务营销的更高转化和会务价值的更大输送。因此,企业需要选…

深度学习入门-0-简介与学习路线

一、简介 1.概述 深度学习(DL, Deep Learning)是机器学习(ML, Machine Learning)领域中的一个研究方向,它被引入机器学习使其更接近于最初的目标——人工智能(AI, Artificial Intelligence)。 深度学习是学习样本数据的内在规律和表示层次,这些学习过程…

选择文件:文件选择框的代码触发【极易版】【文件上传功能】

最近业务中遇到添加附件功能,点击对应元素,在特定条件下触发文件选择,然后将选中的文件上传到后台。 文件上传是使用阿里云实现的,这里主要说文件选择功能。也就是怎样添加附件到界面上。 一 简单实现——点击按钮触发图片选择框…

【linux】实现shell

自我名言:只有努力,才能追逐梦想,只有努力,才不会欺骗自己。 喜欢的点赞,收藏,关注一下把! 如果发现内容有不对的地方欢迎在评论区批评指正,这是对我最大的鼓励!&#xf…

对于现代互联网企业来说Python数据分析有什么用?

我们每一个人,每天无时无刻都在生产数据,一分钟内,微博上新发的数据量超过10万,b站的视频播放量超过600万……这些庞大的数字,意味着什么?意味着每天需要大量的人员要对这些数据进行分析,筛选有…

ssm+vue的教室信息管理系统(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频: ssmvue的教室信息管理系统(有报告)。Javaee项目,ssm vue前后端分离项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构&…

OpenHarmony应用开发涉及的主要因素与UX设计规范

一、OpenHarmony应用开发涉及的主要因素 二、OpenHarmony应用开发UX设计规范 UX设计规范的主要内容与部分图标示例 2.OpenHarmony应用设计原则 设计原则,当为多种不同的设备开发应用时,有如下设计原则: 差异性,充分了解所要支…

LinearLayout里子view点击,其他空白间隙处禁止点击

LinearLayout里子view点击,其他空白间隙处禁止点击 经过不断摸索终于实现了。 像头条里黄色区域禁止点击实现。 可以通过在父 LinearLayout 上设置 android:clickable"true" 属性来实现,然后在子 View 上设置 android:clickable"false&…

1688-阿里巴巴批发网(获取商品的名称,价格,图片)

1688 item_get-获得1688商品详情 为了进行电商平台 的API开发,首先我们需要做下面几件事情。 1)开发者注册一个账号 2)然后为每个1688 应用注册一个应用程序键(App Key) 。 3)下载1688 API的SDK并掌握基本的API基础…

红海云签约中材叶片,科技引领风电叶片行业人力资源数字化转型

中材科技风电叶片股份有限公司(以下简称“中材叶片”)隶属于世界500强央企集团——中国建材集团,是专业的风电叶片设计、研发、制造和服务提供商,致力于打造最为客户尊重与员工、股东信赖的具有全球竞争力的世界一流风电叶片企业。…

Spring Cloud阿里的nacos注册中心的使用 Feign远程调用 nacos配置中心的简单使用

原文档 注册中心 https://github.com/alibaba/spring-cloud-alibaba/blob/2022.x/spring-cloud-alibaba-examples/nacos-example/nacos-discovery-example/readme-zh.md 配置中心 https://github.com/alibaba/spring-cloud-alibaba/blob/2022.x/spring-cloud-alibaba-example…

XSAN数据恢复-XSAN迁移数据过程中误格式化存储系统的数据恢复案例

XSAN数据恢复环境: 昆腾存储,MAC OS操作系统,划分了9个数据卷(1个META信息卷,8个DATA信息卷),存放视频类数据,MXF、MOV等格式文件。 XSAN故障&分析: 将存储空间从XS…

力扣337.打家劫舍3(树形dp)

题目描述: 小偷又发现了一个新的可行窃的地区。这个地区只有一个入口,我们称之为 root 。 除了 root 之外,每栋房子有且只有一个“父“房子与之相连。一番侦察之后,聪明的小偷意识到“这个地方的所有房屋的排列类似于一棵二叉树…

Sip双按键对讲终端 医护对讲终端

Sip双按键对讲终端 医护对讲终端 1、前言 SIP对讲终端SIP-6002D双按键是一款采用了ARMDSP架构;配置了麦克风输入和扬声器输出,SIP-6002D带两路寻呼按键,可实现SIP对讲功能,作为SIP对讲的终端,主要用于银行调度对讲、部…

华为---STP协议简介(一)

生成树协议简介 什么是生成树协议 STP(Spanning Tree Protocol)是一种由交换机运行的、用来解决交换网络中环路问题的数据链路层协议。为提高网络可靠性,交换网络中通常会使用冗余链路,但是冗余链路会给交换网络带来环路风险&…

Coupang真的好做吗?韩国Coupang入驻流程——站斧浏览器

coupang真的好做吗? Coupang自开放全球注册以来,一直备受跨境电商各平台卖家的关注,那么作为一颗跨境电商的新星,真的值得做吗? 不到一年的关注度遭到如此众多的跨境卖家追捧的平台,火是有他的原因的&…