今天我将教您如何部署您的第一个静态网站。因为这里有小程序云开发的静态服务器资源,您可以轻松实现自己的网站部署。部署后,可以在电脑浏览器、手机浏览器、微信公众号中展示。
:
老规矩,先看效果图
为了简单起见,这里我写了一个最简单的html静态网页
然后将此网页部署到云开发静态网站
微信访问效果如下
手机浏览器访问如下
这也意味着用户可以从任何地方访问我们的网站。让我们教您如何快速部署自己的网站。
:
一,开通云开发
这里激活云开发,启用云开发。我们使用小程序开发者工具来实现快速激活。
:
1-1,注册小程序
这里就不多说了,只有注册了小程序的appid才能开启云开发
我们注册小程序后,就可以获取到appid,如上图
:
1-2,创建一个小程序项目
小程序项目的创建这里就不多说了。我在小程序基础课程中已经讲过很多次了。 《小程序基础学习》
这里要强调的一点是,在创建小程序项目时,我们一定要使用自己的appid,而不是测试号。
如果你一开始就用测试appid创建的,也可以按照上图的方式替换成自己小程序的appid。
:
1-3,开通云开发
这里是云开发的开场白,我就不过多解释了,我在我的云开发课程中也讲过很多次了。大家可以去看看
您只需点击开发者工具中的云开发按钮,按照提示一步一步操作即可快速激活云开发。
:
二,开通静态网站功能
我们开启了上面的云开发之后,我们就可以快速的打开这里的静态网站了。
点击后直接点击打开即可
这时候有一个条件
我们必须按照要求改变我们小程序的支付方式,只需将我们的支付方式改为按量付费即可。
此时我们的静态网站功能就已经成功激活了。
打开成功后,如下图所示。
这时候我们就可以将我们开发的静态网页上传到网站上供其他人访问。
三,部署网站
我们的静态html如下
点击Upload File将我们的index.html文件上传到静态网站
这说明上传成功了。
:
访问我们的网站
上面的网页部署成功后,我们就可以通过云开发为我们创建的默认URL来访问了。
点击上图所示的详细信息,您可以获得访问我们网站的URL,如下
上图中箭头所指的URL就是我们网页的访问URL。
如果你的html是以index命名的,我们可以使用云开发分配的域名直接访问我们的网站。
Study-gas4x-1258760189.tcloudbaseapp.com是云开发分配给我的网站域名。今后用户可以通过该域名直接访问我们的网站。
其实这里我们就可以成功部署自己的网站了。无非就是你的网页比石头哥好看而已。
不过,也有学生觉得政府分配的域名太长,不好记,所以想用自己的域名。那么我们如何配置自己的域名呢?
:
四,配置域名(选看)
其实前3步就可以成功部署自己的网站。如果您有自己的域名并成功备案,那么就跟随Stone学习本节内容吧。如果您没有自己的域名,那么您必须首先注册自己的域名并归档。所以本节作为选修学习。
:
4-1,在网站配置里添加自己的域名
比如我这里点击添加域名,然后添加我自己注册的域名。
但如果我们想让https在这里安全访问,我们就必须配置自己的ssl证书。
点击后,我们可以直接在这里申请免费证书。免费证书的有效期为1年,1年后我们可以重新申请新的证书,所以这里的免费证书就足够了。
如实填写您的备案域名等信息。
提交信息后,我们需要在这里验证我们的域名,验证方式可以是DNS
对于DNS验证,我们需要为我们的域名配置访问解析值(这里的知识点比较深奥,大家课后需要补充一下域名解析的相关知识点。)如果你不想学习,直接根据提示进行配置即可。好的。
配置完成后,可以先点击验证进行验证。
验证通过后可以看到如下
云开发控制台也会显示部署正在进行中,我们只要耐心等待部署即可。
如果启动成功会有如下标志
虽然已经启动成功了,但是如果我们想要通过自己的域名访问我们的云开发静态网站,我们还需要配置CNAME进行重定向,即访问我们的域名时,需要重定向到该域名由云开发分配给我们。
这里理解起来有点晦涩,官方文档也没有说清楚。我试了很多次才知道原来是这样配置的。这里一切配置完毕后,我们就可以通过自己的域名直接访问网站了。
也可以访问石头哥的云开发静态网站尝试一下。
我们的网站部署到此结束。后面我会用Vue写一些很酷的网站,然后部署到网上供大家观看。
:
产品介绍
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生集成开发环境和工具平台,为开发者提供高可用、自动弹性伸缩的后端云服务,包括计算、存储、托管Serverless Serverless等能力可用于云上各类端应用(小程序、公众号、Web应用、Flutter客户端等)的集成开发,帮助开发者构建和管理后端服务和云资源统一的方式,避免了应用程序的开发流程,开发人员可以专注于业务逻辑的实现,开发门槛更低,效率更高。
开放云开发:https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
产品文档:https://cloud.tencent.com/product/tcb?from=12763
技术文档:https://cloudbase.net?from=10004
技术交流加Q群:601134960
关注微信公众号获取最新资讯【腾讯云开发】