赛尔校园公共服务平台 Logo
平台使用
阿里云
百度云
移动云
智算服务
教育生态
登录 →
赛尔校园公共服务平台 Logo
平台使用 阿里云 百度云 移动云 智算服务 教育生态
登录
  1. 首页
  2. 阿里云
  3. 对象存储
  4. 操作指南
  5. 数据管理
  6. 静态网站托管
  7. 教程示例:使用自定义域名设置静态网站托管

教程示例:使用自定义域名设置静态网站托管

  • 静态网站托管
  • 发布于 2025-04-21
  • 0 次阅读
文档编辑
文档编辑

您可以通过存储空间(Bucket)托管静态网站,并让访问者通过Bucket绑定的自定义域名(例如example.com)访问您的网站。无论您是想在OSS上托管已有静态网站还是从零开始建站,都可以从此教程中获得帮助。

步骤1:注册域名

搭建静态网站前,您需要为网站准备一个域名。建议您使用阿里云域名服务快速注册一个属于您的域名。详细步骤,请参见注册通用域名。

本示例使用example.com作为测试域名。

重要

若您注册的域名需绑定在中国内地的Bucket上,您还需在中国工信部备案域名。详细步骤,请参见备案。

步骤2:创建Bucket

您需要创建一个公共读的Bucket,用以设置静态网站托管及存放网站数据。

  1. 在对象存储OSS控制台的Bucket列表页面,单击创建Bucket。

  2. 在创建Bucket面板,按说明配置以下参数,其他参数保留默认配置。

    参数

    说明

    Bucket名称

    设置Bucket名称。本示例设置为examplebucket。

    地域

    选择Bucket所在地域。本示例选择华东1(杭州)。

    存储类型

    选择标准存储。

    读写权限

    选择公共读。

    其他参数保持默认配置。更多信息,请参见创建存储空间。

  3. 单击完成创建。

步骤3:创建网页文件并上传

您需要创建静态网站首页和404错误页面的网页文件,并上传至目标Bucket。

  1. 在本地创建两个HTML格式的文件。

    • 默认首页

      本示例使用以下内容生成静态网站的首页文件index.html。实际环境中,请根据您的需求生成首页文件内容。

      <html>
         <head>
             <title>Hello OSS!</title>
             <meta charset="utf-8">
         </head>
         <body>
             <p>开始阿里云OSS托管</p>
             <p>这是索引页面</p>
         </body>
       </html>
    • 默认404页

      本示例使用以下内容生成静态网站的404错误页文件error.html。实际环境中,请根据您的需求生成404错误页文件的内容。

      <html>
      <head>
         <title>Hello OSS!</title>
         <meta charset="utf-8">
      </head>
      <body>
         <p>这是404错误页面</p>
      </body>
      </html>
  2. 将网页文件上传至目标Bucket。

    1. 单击Bucket 列表,然后单击目标Bucket名称。

    2. 在左侧导航栏,选择文件管理 > 文件列表。

    3. 单击上传文件。

    4. 在上传文件面板中,在待上传文件区域选中已创建的两个网页文件,其他参数保留默认配置。

    5. 单击上传文件。

步骤4:配置静态网站托管

  1. 在左侧导航栏,选择数据管理 > 静态页面。

  2. 在静态页面,单击设置,然后将index.html设置为默认首页,将error.html设置为默认404页。

    说明

    若您希望访问子目录时可以跳转到子目录下index.html文件,您可以选择开通子目录首页。详情请参见设置静态网站托管。

  3. 单击保存。

步骤5:绑定自定义域名

现在,您已有了根域名example.com和名为examplebucket的Bucket,接下来您需要将域名绑定到Bucket,以便能够使用您的域名访问Bucket。

  1. 在左侧导航栏,选择Bucket配置 > 域名管理。

  2. 在域名管理页面,单击绑定域名。

  3. 在域名文本框输入example.com,单击确认绑定,然后开启自动添加CNAME记录开关。

  4. 等待域名状态显示已生效。

步骤5:(可选)使用阿里云CDN加快网站速度

您可以使用阿里云CDN改善网站性能。CDN可以让您的网站文件(如HTML、图像和视频)缓存至全球各地的数据中心。当访问者从您的网站请求文件时,CDN会自动将请求重定向到最近数据中心上的文件副本,提升访问者的下载速度。

  1. 记录CDN加速域名生成的CNAME值。

    1. 在左侧导航栏,选择Bucket配置 > 域名管理。

    2. 单击目标域名右侧的未配置,跳转至CDN控制台。

    3. 在添加域名页面,所有参数保留默认配置,单击下一步,然后单击返回域名列表。

    4. 记录域名生成的CNAME值example.com.w.kunlunsl.com。

  2. 解析CDN加速域名。

    1. 在DNS控制台的域名解析列表,单击目标域名右侧的解析设置。

    2. 找到绑定自定义域名时自动添加的CNAME记录,单击修改。

    3. 在修改记录面板,将记录值修改为example.com.w.kunlunsl.com,其他参数保持默认配置,然后单击确定。

步骤6:测试网站

在浏览器中访问以下URL以验证网站是否正常运行:

  • 访问静态网站首页http://example.com,配置正确时显示如下页面:11

  • 访问Bucket中不存在的文件http://example.com/example.txt,配置正确时显示如下页面:404

步骤7:清理资源

本教程中创建的资源仅为测试环境使用,建议您在测试完成后清理资源,以免产生不必要的费用。

  • CDN服务绑定的域名。操作步骤,请参见停止加速服务。

  • 云解析服务添加的CNAME记录。操作步骤,请参见删除记录。

  • OSS中创建的Bucket及上传的文件。操作步骤,请参见删除Object和删除存储空间。

相关文章

教程示例:使用自定义域名设置静态网站托管 2025-04-21 18:16

您可以通过存储空间(Bucket)托管静态网站,并让访问者通过Bucket绑定的自定义域名(例如example.com)访问您的网站。无论您是想在OSS上托管已有静态网站还是从零开始建站,都可以从此教程中获得帮助。 步骤1

教程示例:通过静态网站托管部署单页应用 2025-04-21 18:16

本文介绍如何使用React框架,通过OSS的静态网站托管功能在前端快速部署一个线上可用的单页应用SPA(Single-Page Application)。 什么是单页应用 单页应用是

目录
Copyright © 2025 your company All Rights Reserved. Powered by 赛尔网络.
京ICP备14022346号-15
gongan beian 京公网安备11010802041014号