Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站

1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站

原创
作者头像
编程小石头
修改于 2020-12-14 03:06:44
修改于 2020-12-14 03:06:44
1.3K0
举报

今天来教大家部署一个属于自己的第一个静态网站,因为这里借助小程序云开发的静态服务器资源,所以可以轻松的实现自己网站的部署,部署完以后可以在电脑浏览器,手机浏览器,微信公众号里面展示。

老规矩,先看效果图

简单起见,我这里写一个最简单的html静态网页

然后把这个网页部署到云开发静态网站上

微信上访问效果如下

手机浏览器上访问如下

这也就意味着,我们的网站可以供用户在任何地方访问。下面就来教大家如何快速的部署一个属于自己的网站。

一,开通云开发

这里开通云开发我们借助小程序开发者工具来实现快速开通。

1-1,注册小程序

这里我就不再多说了,只有注册过小程序的appid才可以开通云开发

我们注册好小程序后,就可以拿到appid了,如上图

1-2,创建一个小程序项目

小程序项目的创建,我这里不再多说,我前面小程序基础课里有讲过很多遍。《小程序基础学习》

这里强调一点,就是创建小程序项目时一定要用我们自己的appid不要用测试号。

在这里插入图片描述
在这里插入图片描述

如果你一开始是用测试appid创建的,也可以通过上图的方式更换成自己的小程序的appid。

1-3,开通云开发

这里云开发的开通,我就不做过多讲解了,我云开发课程里也讲过很多遍。大家可以去翻看下

只需要点击开发者工具里的云开发按钮,跟着提示一步步操作就可以快速开通云开发。

二,开通静态网站功能

我们上面云开发开通好以后,就可以在这里快速开通静态网站了。

点击以后,直接点击开通即可

这时候开通有个条件

我们必须按照要求改变自己小程序的付费方式,把我们的付费方式改成按量付费即可。

这个时候我们的静态网站功能就开通成功了。

开通成功以后如下图。

这个时候我们就可以把我们开发好的静态网页上传到网站供别人访问了。

三,部署网站

我们的静态html如下

点击上传文件,把我们的index.html文件上传到静态网站

这样就代表上传成功了。

访问我们的网站

上面把网页部署成功以后,我们就可以通过云开发为我们创建的默认网址来访问了。

点击上图所示的详情,就可以拿到访问我们网站的网址如下

上图箭头所示的网址,就是我们网页的访问网址。

如果你的html是以index命名的,我们使用云开发为我们分配的域名,就可以直接访问我们的网站。

study-gas4x-1258760189.tcloudbaseapp.com 就是云开发为我分配的网站域名,以后用户就可以直接通过这个域名访问我们的网站了。

其实到这里我们就可以成功的部署属于我们自己的网站了,无非就是你网页写的比石头哥再好看些。

但是有些同学觉得官方给分配的域名太长,不好记,想使用自己的域名。那么我们该如何配置自己的域名呢?

四,配置域名(选看)

其实前面3步就可以成功的部署自己的网站了,如果你有自己的域名,并且也成功的备案了,再来跟着石头哥学习这一节。如果没有自己的域名,那么你就要先去注册自己的域名,并备案了。所以这一节作为一个选学。

4-1,在网站配置里添加自己的域名

如我在这里点击添加域名,然后添加自己的备案域名。

但是我们这里要想https来安全访问,就必须配置自己的ssl证书。

点完以后,我们这里可以直接申请免费证书。免费证书有效期1年,1年后我们再重新申请新的证书就可以了,所以这里免费的就够用了。

如实的填写自己的备案域名和其余信息。

提交完资料,我们这里需要验证下自己的域名,验证方式选择DNS就可以

点位DNS验证,我们就需要给我们的域名配置访问的解析值了(这里的知识点比较深奥,大家需要自己课下恶补下域名解析的相关知识点)如果不想学习,直接根据提示配置也行。

配置好以后,就可以点击验证先进行验证了

验证通过后,可以看到如下

云开发控制台也会显示部署中,我们耐心等待部署就可以了。

启动成功会有如下标识

虽然已经启动成功,我们如果想通过自己的域名访问自己的云开发静态网站,还需要配置下CNAME进行重定向,也就是访问我们域名的时候我们要重定向到云开发给我们分配的域名。

这里理解起来有点晦涩,官方给的文档也是没有讲明白,我也是试了很多遍才知道是这样配置的。这里都配置好以后,我们就可以直接通过自己的域名访问网站了。

大家也可以去访问下石头哥的云开发静态网站试一试。

到这里我们的网站部署就讲完了,后面我会用vue写一些炫酷的网站,然后部署到线上供大家观赏。

好了,今天就讲到这里吧,石头哥也要吃午饭了。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
10分钟快速搭建小程序管理后台,借助云开发CMS搭建可视化的数据管理网页平台
官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/extensions/cms/introduction.html
编程小石头
2021/01/13
3.8K0
10分钟快速搭建小程序管理后台,借助云开发CMS搭建可视化的数据管理网页平台
小程序群发短信,借助云开发5行代码实现短信群发功能
但是官方文档里已经说明,我们群发短信的时候需要用到的是一组手机号,也就是说需要用数组来存放数据。但是我们这里是一个字符串。那么我们就要分割字符串成数组了。
编程小石头
2021/01/11
1.2K0
小程序群发短信,借助云开发5行代码实现短信群发功能
小程序里附近的人功能实现,云开发数据库实现附近的人,附近多少公里内的好友
最近好多同学问石头哥附近的人如何实现。今天呢,就借助这篇文章,给大家做一个系统的解答。
编程小石头
2021/08/24
1.2K0
小程序里附近的人功能实现,云开发数据库实现附近的人,附近多少公里内的好友
3行代码实现小程序直播,带美颜优惠券抽奖功能
注意我们上图红色框里的一些要求。必须要满足这些条件,才可以开通直播功能。更详细些的如下:
编程小石头
2020/06/30
9780
3行代码实现小程序直播,带美颜优惠券抽奖功能
小程序里使用async和await变异步为同步,解决回调地狱问题
最近好多同学,学习完石头哥的云开发基础以后,自己实际项目中,总会遇到各种各样的异步问题。
编程小石头
2021/05/29
1.4K0
小程序里使用async和await变异步为同步,解决回调地狱问题
附解决方案,小程序昵称突然变成了“微信用户”,而且头像也显示不了?
最近好多小伙伴在使用getUserInfo获取小程序用户昵称和头像时,图然变成了下面这样。
编程小石头
2021/04/03
6.8K2
附解决方案,小程序昵称突然变成了“微信用户”,而且头像也显示不了?
2行代码实现小程序直接分享到微信朋友圈功能
或许你都想象不到,小程序分享到朋友圈真是太简单了。只需要下面这几行代码,并且这几行代码是小程序页面的默认配置。
编程小石头
2020/07/12
3.8K1
2行代码实现小程序直接分享到微信朋友圈功能
小程序里显示店铺地址,可在地图上查看,可点击导航到店铺
首先,你要明确一个事情,任何位置都有它的 经纬度 ,所以你首先要获取到你想定位位置的经纬度。
编程小石头
2021/03/14
1.9K0
小程序里显示店铺地址,可在地图上查看,可点击导航到店铺
小程序读取数据超过20 云函数读取超过100条限制
如上图所示,我的num集合里有103条数据,如果按照之前的分页思路,就是分两次请求,第一次请求1-100条,第二次请求101-103条。这样我们虽然是可以拿到103条数据,但是要做两次请求,我们该如何做,才能一次请求就可以获取这103条数据呢。
编程小石头
2021/06/28
1.4K0
小程序读取数据超过20 云函数读取超过100条限制
微信小程序里长按识别二维码
可以看到,我们成功的在小程序里实现了长按识别二维码的功能。下面就教大家如何一步步实现吧。因为官方的规格还没有明确说支持这个功能,所以这个功能有可能随时被禁。这里先带大家爽一把,能爽一会是一会儿。
编程小石头
2020/09/18
1.3K0
微信小程序里长按识别二维码
1分钟实现小程序发短信功能,借助云开发10行代码实现短信验证码登录小程序
不仅仅可以很方便的使用短信功能,还送了咱们1000条免费短信。不用白不用嘛。这1000条短信足够咱们把小程序短信功能,和小程序短信验证码功能都学会了。
编程小石头
2021/01/09
4.5K1
1分钟实现小程序发短信功能,借助云开发10行代码实现短信验证码登录小程序
小程序三级联动,实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表
但是有时候我们想实现三级分类,该怎么做呢,今天就来教大家如何实现三级分类。随便教下大家如何把excel数据批量的导入到云开发数据库
编程小石头
2021/03/28
2.3K0
小程序三级联动,实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表
2020年最新最全小程序支付功能实现,借助小程序云开发实现小程序支付功能
上面的邮箱验证成功以后,我们这里就要选企业了,当然如果你是个体工商户,你也可以选择个体工商户。
编程小石头
2020/12/01
9940
2020年最新最全小程序支付功能实现,借助小程序云开发实现小程序支付功能
【玩转腾讯云】Python 操作腾讯对象存储(COS)详细教程
django项目中,使用editormd时需要上传本地图片,使用到了腾讯对象存储,通过后台可以将图片上传到COS,由此记录一下。 <font color="red">想了解django中如何引入markdown编辑器可以参考此篇文章 --> django 中引入markdown编辑器</font> 1. 腾讯对象存储 1.1 开通服务 腾讯COS 开通后会赠送免费额度 1.2 后台 [watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9i
ruochen
2021/04/11
20K0
【玩转腾讯云】Python 操作腾讯对象存储(COS)详细教程
正点原子DS100拆解全过程-硬件工程师必备
之前一篇只针对正点原子DS100手持示波器的使用介绍文章。可作为一个电子工程师,光使用不是我们的风格哈,我们还要拆开看看电路。
良知犹存
2021/02/05
2.1K0
正点原子DS100拆解全过程-硬件工程师必备
Power Query 系列 (15) - Table 和 List 转换应用案例
本文通过一个数据处理的案例,说明 table 和 list 相互转换在 Power Query (PQ) 数据处理中的作用。假设有下面的销售数据,需要按月份进行汇总,输出为右边的格式:
StoneWM
2021/03/25
2.5K0
Power Query 系列 (12) - Power Query 结构化列应用案例
本篇数据处理来自一个实际处理数据的简化。下图中,假设左边是一个直观的 BOM 结构展示,数据在 Excel 中存储格式如中间部分所示:第一列为物料编码的级别,第二列为物料编码。数据处理任务:需要在 Excel 中增加一列输出物料编码上一级的物料编码(目标为黄色部分)。
StoneWM
2021/03/25
1.4K0
Power Query 系列 (07) - 添加列
前面几篇博客介绍了 Power Query (简称 PQ) 的数据源和 M 语言的基础知识,现在开始进入数据处理部分。本篇接着介绍 如何在 PQ 中添加列。添加列是很重要的一个操作,在 PQ 的查询编辑器界面,有一个专门【添加列】功能区。在讲解添加列的过程中,我们会逐步介绍一些相关知识点和 PQ 的操作细节。
StoneWM
2021/03/25
2.9K0
五分钟跑通3D地图demo
官网页面上方有“开发文档”选项,本文以Android为例,从中选择“Android地图SDK”链接项,具体操作可以参考下图:
腾讯位置服务
2021/07/14
8860
五分钟跑通3D地图demo
Power Query 系列 (13) - 自定义函数
以工资类所得应交个税为例,最新的个税起征点为 5000 并按下表的级次进行缴税(假设没有其它扣除项)。
StoneWM
2021/03/25
1.9K0
推荐阅读
10分钟快速搭建小程序管理后台,借助云开发CMS搭建可视化的数据管理网页平台
3.8K0
小程序群发短信,借助云开发5行代码实现短信群发功能
1.2K0
小程序里附近的人功能实现,云开发数据库实现附近的人,附近多少公里内的好友
1.2K0
3行代码实现小程序直播,带美颜优惠券抽奖功能
9780
小程序里使用async和await变异步为同步,解决回调地狱问题
1.4K0
附解决方案,小程序昵称突然变成了“微信用户”,而且头像也显示不了?
6.8K2
2行代码实现小程序直接分享到微信朋友圈功能
3.8K1
小程序里显示店铺地址,可在地图上查看,可点击导航到店铺
1.9K0
小程序读取数据超过20 云函数读取超过100条限制
1.4K0
微信小程序里长按识别二维码
1.3K0
1分钟实现小程序发短信功能,借助云开发10行代码实现短信验证码登录小程序
4.5K1
小程序三级联动,实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表
2.3K0
2020年最新最全小程序支付功能实现,借助小程序云开发实现小程序支付功能
9940
【玩转腾讯云】Python 操作腾讯对象存储(COS)详细教程
20K0
正点原子DS100拆解全过程-硬件工程师必备
2.1K0
Power Query 系列 (15) - Table 和 List 转换应用案例
2.5K0
Power Query 系列 (12) - Power Query 结构化列应用案例
1.4K0
Power Query 系列 (07) - 添加列
2.9K0
五分钟跑通3D地图demo
8860
Power Query 系列 (13) - 自定义函数
1.9K0
相关推荐
10分钟快速搭建小程序管理后台,借助云开发CMS搭建可视化的数据管理网页平台
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档