如何利用云对象存储 COS 免费托管静态网站

一般来说,个人网站或博客静态页面居多,甚至全是静态页面,比如说用 Hexo 等工具制作的个人博客。静态网站在开发完成之后,其实可以不需要购买服务器就可以直接部署到网络上的。本文介绍的就是一种无需服务器、甚至免费实现静态网站托管的方法。

在此实践中,您将在腾讯云对象存储(以下简称 COS)上托管静态网站,访客可以通过您的自定义域名(例如 www.example.com )访问托管的静态网站。无论您是想在 COS 上托管已有静态网站还是从零开始建站,此实例都可以帮助您完成 COS 上的静态网站托管工作。

腾讯云对象存储针对每位腾讯云用户,每月提供10GB 的免费流量。如果你的网站每月流量少于这个数字的话,可以算是每个月不花钱就享受个人网站服务了。

以下是具体步骤:

步骤预览

事前准备

以下是您在实践过程中,将会用到的相关服务:

域名注册:如果您还没有已注册的域名,则需要先注册一个域名,例如 www.example.com 。您可通过腾讯云 域名注册申请域名。通常,只需少量费用,即可拥有一个域名。

对象存储 COS:您将使用对象存储 COS 创建 Bucket ,配置权限以允许每个人查看内容,然后上传网页内容。

内容分发网络 CDN内容分发网络 CDN 和云解析服务将共同作用,使您的域名和网站内容绑定,同时为您的静态网站加速,降低访问延迟,提高可用性。

云解析:您可以通过云解析将您的域名和网站内容绑定在一起,实现使用自定义域名访问您的静态网站的目的。

本指南中的所有步骤都使用 www.example.com 作为域名。您需要使用您已注册的一个域名替换此域名。

步骤 1:注册域名与备案

域名注册是在互联网上建立任何服务的基础。注册域名之后,您还需要进行域名备案,网站才能正常访问。请根据您的具体情况进行操作:

步骤 2:创建 Bucket 并上传内容

在完成域名注册及备案后,您需要在 COS 控制台中执行以下任务,以创建和配置网站内容:

2.1 为您的网站内容创建 Bucket。 2.2 配置 Bucket 并上传内容。

2.1 创建 Bucket

请使用腾讯云账号登陆 COS 控制台,为您的网站创建相应的 Bucket。Bucket 是 COS 中用于存储数据的容器,您的网站内容都将存储在一个存储桶中。您可以通过 COS 概览页或 Bucket 列表创建 Bucket:

  • 概览页 登录 COS 控制台后,当您首次创建 Bucket 时,请直接点击概览页上的创建 Bucket
  • Bucket 列表 登录 COS 控制台后,请点击左侧 Bucket 列表,进入列表后点击 创建 Bucket

弹出创建 Bucket 对话框后,您可以为您的网站创建一个对应的存储桶并保存。

2.2 配置 Bucket 并上传内容

您可通过以下两个小步骤,配置 Bucket 访问权限和上传您的网站内容。

  1. 将 Bucket 的访问权限设置为公有读私有写,使您的内容可被公开访问。 在 COS 控制台,点击已创建好的 Bucket。 进入到 Bucket 后,点击 基础配置,点击基本信息的编辑按钮。 修改 Bucket 的访问权限为公有读私有写,保存即可。
  1. 将您的网站内容上传到已创建好的 Bucket。 在完成第 1 步后,点击文件列表。在该项目下进行文件上传。 有关具体分步说明,请参阅 上传对象

公有读私有写:任何人(包括匿名访问者)都对该 Bucket 中的文件有读权限,但只有 Bucket 创建者及有相应权限的账号才对该 Bucket 中的文件有写权限。

私有读写:只有该 Bucket 的创建者及有相应权限的账号才对该 Bucket 中的文件有读写权限,其他任何人对该 Bucket 中的文件都没有读写权限。

在此步骤中,您在已创建好的 Bucket 中托管内容。该内容可以是文本文件、照片、视频——任何您想要托管的内容。如果您还未构建网站,则只需为此实践创建一个文件。

例如,您可使用以下 HTML 创建文件,并将其上传到 Bucket。网站主页的文件名通常为 index.html。在后续步骤中,您将提供此文件名作为网站的索引文档名。

当用户访问任何不带文件指向的一级目录时,COS 默认优先匹配对应 Bucket 目录下 index.html,其次为 index.htm,若无此文件,则返回 404。

<!DOCTYPE html>
<html>
    <head>
        <title>Hello COS!</title>
        <meta charset="utf-8">
    </head>
    <body>
        <p>欢迎使用&nbspCOS&nbsp 的静态网站功能。</p>
        <p>这是首页!</p>
    </body>
</html>

步骤 3:绑定自定义域名

静态网站托管功能仅在用户为 Bucket 设置了自定义域名时有意义,使用默认提供的域名(CDN 加速域名和 COS 直接访问域名)访问资源时将始终弹出下载框,只有绑定自定义域名并开启静态网站功能后,才可以直接在浏览器中打开文件资源。

您可设置自定义域名直接指向 Bucket,并开通静态网站功能,达到通过浏览器直接访问您的网站的目的( Bucket 中的内容)。

此步骤中,您首先需要创建 CNAME 记录(具体介绍请参考 CNAME 记录),将您的域名(如 www.example.com )映射到 COS 提供的默认域名(如 example-1251000011.cosgz.myqcloud.com)。然后通过云解析将此 CNAME 记录添加到您的域名下,实现自定义域名绑定。具体的操作步骤如下:

3.1 域名添加 3.2 域名解析

3.1 域名添加

在进行自定义域名添加时,有两种途径供您选择:

  • 通过 CDN 控制台添加
  • 通过 COS 控制台添加

如果您想在添加自定义域名的同时,进行 CDN 高级管理和配置,可优先选择 CDN 控制台添加域名。本指南中不涉及 CDN 高级管理和配置,如需帮助,请参考 CDN 配置管理

如果您只需要先添加自定义域名,不进行其他配置,COS 控制台添加将节省您的时间。

通过 CDN 控制台添加

  1. 请登录 CDN 控制台,从左侧导航进入域名管理页面。
  2. 点击添加域名,进入域名配置界面。
  1. 请输入您的域名,选择源站类型为对象存储(COS ),并为源站选择您托管网站内容的对应 Bucket 默认域名。业务类型选择静态加速,其他保持默认配置,提交即可。
  1. 域名添加完成。请关闭弹窗,耐心等待域名配置下发至全网节点(约 15 分钟)。

获取系统分配的 CNAME 记录,再进行下一步骤。

通过 COS 控制台添加

  1. 请登录 COS 控制台,从左侧导航进入 Bucket 列表页面。
  2. 选择您的网站对应的 Bucket,进入域名管理页面。
  1. 自定义域名条目下,点击添加域名,添加您的域名,保存即可。
  1. 请稍等几分钟,等待域名上线。获取对应的 CNAME 记录,再进行下一步骤。

3.2 域名解析

在您完成域名添加之后,系统会为您分配一条对应的 CNAME 记录。请按以下步骤完成域名解析任务:

  1. 请登录云解析控制台,点击添加域名。

在弹出的对话框中,填入您的域名,并且选择对应的项目,保存即可。

  1. 域名添加成功后,点击该域名,进入解析记录管理页面。
  1. 点击添加记录,将在步骤 3.1 获取的 CNAME 记录填入对话框,确认保存。

注:记录值是步骤 3.1 获取的 CNAME 记录。添加后大约需 15 分钟左右生效,请耐心等待。

步骤 4:开通 COS 的静态网站功能

绑定自定义域名之后,您还需要开通 COS 的静态网站托管功能,才能通过浏览器直接访问您的网站。具体步骤如下:

  1. 登陆 COS 控制台后,从左侧导航进入您网站对应的 Bucket。
  2. 进入基础配置页面,找到静态网站功能。点击编辑按钮开通 COS 的静态网站功能并保存,如下图所示。

静态网站功能的相关具体配置及参数说明,请参考 静态网站功能

步骤 5:测试验证

在完成上述步骤后,您可通过在浏览器地址栏输入您的网站域名进行访问,来验证实践结果,以 www.example.com 为例:

在某些情况下,您可能需要清除缓存才能看到预期结果。

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

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

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏vue学习

4.vue-router之什么是嵌套路由

大家都知道选项卡,在选项卡中,顶部有数个导航栏,中间的主体显示的是内容;这个时候,整个页面是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,这个时候就是...

11220
来自专栏前端安全

前端调试入门

这里的控制台特指PC端浏览器进入开发者模式之后新打开的操作界面。常见的控制台有Chrome的控制台,Firefox的firebug。这些都能帮助我们调试前端问题...

962330
来自专栏Jerry的SAP技术分享

ABAP Netweaver和git的快捷方式

我笔记本上有很多github仓库,每次切换仓库,我不想敲很长的cd命令。比如现在我需要手敲下面的命令进入一个Java仓库:

17650
来自专栏Python爬虫与算法进阶

Python爬虫进阶(一)使用Selenium进行网页抓取

萌新要学习Selenium了,安装是个坑。还要下载相关配件,可以参考python 安装selenium环境(https://my.oschina.net/hyp...

40550
来自专栏Jerry的SAP技术分享

微信小程序开发系列四:微信小程序之控制器的初始化逻辑

这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hello World的微信小程序,并讲解了这个自动生成的微信小程序的视图开发原理。

14130
来自专栏前端小叙

vue如何加入百度联盟广告

在百度联盟代码位管理中创建好对应的代码位之后,点击获取代码,会看到这样一段js ? 直接复制粘贴到自己网页中便可显示对应广告。 在vue中由于都是vue组件,不...

50780
来自专栏云服务试衣间

简单几步,利用Serverless,让COS中文件变更自动刷新CDN

SCF能实现事件式的触发,让你的一段代码跑在云上,无需自己去搭建服务器。而这里我们要利用能力:COS文件上传/删除的触发器。

6.4K290
来自专栏向治洪

React Native的WebStorm基本设置

jsx语法设置 在没有进行设置的情况下,每次打开WebStorm的时候打开包含jsx语法的.js文件都会有以下提示: ? 当然我们点击转换后就可以了,但是每次都...

27650
来自专栏前端萌媛的成长之路

url、href和src区别

1.4K40
来自专栏为数不多的Android技巧

Android Studio你不知道的快捷键(一)

一般来说键盘用的越多鼠标用的越少,那么写起代码来效率就越高;常见的快捷键想必大家都已经掌握,接下来我就分享一些你可能不知道的但确非常实用的快捷键。

12440

扫码关注云+社区

领取腾讯云代金券