今天来教你们部署一个属于本身的第一个静态网站,由于这里借助小程序云开发的静态服务器资源,因此能够轻松的实现本身网站的部署,部署完之后能够在电脑浏览器,手机浏览器,微信公众号里面展现。html
简单起见,我这里写一个最简单的html静态网页
而后把这个网页部署到云开发静态网站上
微信上访问效果以下
手机浏览器上访问以下
这也就意味着,咱们的网站能够供用户在任何地方访问。下面就来教你们如何快速的部署一个属于本身的网站。vue
这里开通云开发咱们借助小程序开发者工具来实现快速开通。小程序
这里我就再也不多说了,只有注册太小程序的appid才能够开通云开发
咱们注册好小程序后,就能够拿到appid了,如上图浏览器
小程序项目的建立,我这里再也不多说,我前面小程序基础课里有讲过不少遍。《小程序基础学习》
这里强调一点,就是建立小程序项目时必定要用咱们本身的appid不要用测试号。
若是你一开始是用测试appid建立的,也能够经过上图的方式更换成本身的小程序的appid。安全
这里云开发的开通,我就不作过多讲解了,我云开发课程里也讲过不少遍。你们能够去翻看下
只须要点击开发者工具里的云开发按钮,跟着提示一步步操做就能够快速开通云开发。服务器
咱们上面云开发开通好之后,就能够在这里快速开通静态网站了。
点击之后,直接点击开通便可
这时候开通有个条件
咱们必须按照要求改变本身小程序的付费方式,把咱们的付费方式改为按量付费便可。
这个时候咱们的静态网站功能就开通成功了。
开通成功之后以下图。
这个时候咱们就能够把咱们开发好的静态网页上传到网站供别人访问了。微信
咱们的静态html以下
点击上传文件,把咱们的index.html文件上传到静态网站
这样就表明上传成功了。app
上面把网页部署成功之后,咱们就能够经过云开发为咱们建立的默认网址来访问了。
点击上图所示的详情,就能够拿到访问咱们网站的网址以下
上图箭头所示的网址,就是咱们网页的访问网址。
若是你的html是以index命名的,咱们使用云开发为咱们分配的域名,就能够直接访问咱们的网站。
study-gas4x-1258760189.tcloudbaseapp.com 就是云开发为我分配的网站域名,之后用户就能够直接经过这个域名访问咱们的网站了。
其实到这里咱们就能够成功的部署属于咱们本身的网站了,无非就是你网页写的比石头哥再好看些。ide
可是有些同窗以为官方给分配的域名太长,很差记,想使用本身的域名。那么咱们该如何配置本身的域名呢?工具
其实前面3步就能够成功的部署本身的网站了,若是你有本身的域名,而且也成功的备案了,再来跟着石头哥学习这一节。若是没有本身的域名,那么你就要先去注册本身的域名,并备案了。因此这一节做为一个选学。
如我在这里点击添加域名,而后添加本身的备案域名。
可是咱们这里要想https来安全访问,就必须配置本身的ssl证书。
点完之后,咱们这里能够直接申请免费证书。免费证书有效期1年,1年后咱们再从新申请新的证书就能够了,因此这里免费的就够用了。
如实的填写本身的备案域名和其他信息。
提交完资料,咱们这里须要验证下本身的域名,验证方式选择DNS就能够
点位DNS验证,咱们就须要给咱们的域名配置访问的解析值了(这里的知识点比较深奥,你们须要本身课下恶补下域名解析的相关知识点)若是不想学习,直接根据提示配置也行。
配置好之后,就能够点击验证先进行验证了
验证经过后,能够看到以下
云开发控制台也会显示部署中,咱们耐心等待部署就能够了。
启动成功会有以下标识
虽然已经启动成功,咱们若是想经过本身的域名访问本身的云开发静态网站,还须要配置下CNAME进行重定向,也就是访问咱们域名的时候咱们要重定向到云开发给咱们分配的域名。
这里理解起来有点晦涩,官方给的文档也是没有讲明白,我也是试了不少遍才知道是这样配置的。这里都配置好之后,咱们就能够直接经过本身的域名访问网站了。
你们也能够去访问下石头哥的云开发静态网站试一试。
到这里咱们的网站部署就讲完了,后面我会用vue写一些炫酷的网站,而后部署到线上供你们观赏。好了,今天就讲到这里吧,石头哥也要吃午餐了。