本文介绍如何从申请域名开始，基于OSS搭建一个简单的静态网站。

基于OSS搭建一个简单的静态网站的主要步骤是：

  1. 申请一个域名。
  2. 开通OSS并创建Bucket。
  3. 开通OSS的静态网站托管功能。
  4. 使用自定义域名访问OSS。

静态网站托管功能介绍

简单说就是用户可以基于OSS搭建一个简单的静态网页。用户开启此功能后，OSS提供了一个默认的首页和默认的404页面功能。具体参见开发人员指南中静态网站托管的介绍。

具体实现步骤

  1. 申请域名

    本文的域名是从万网购买的，申请了一个leo23.xyz的域名。如果需要更多域名方面的帮助，请参见万网。

  2. 开通OSS并创建Bucket
    1. 登录OSS控制台，创建一个Bucket为imgleo23，创建在上海，Endpoint为oss-cn-shanghai.aliyuncs.com。操作步骤请参见创建存储空间。
    2. 将Bucket的权限设置为公共读。操作步骤请参见设置存储空间读写权限。
    3. 上传index.html、error.html、aliyun-logo.png 文件。操作步骤请参见上传文件。
      • index.html 的内容为： 
        <html>
  <head>
      <title>Hello OSS!</title>
      <meta charset="utf-8">
  </head>
  <body>
      <p>欢迎使用OSS静态网站的功能</p>
      <p>这是首页</p>
  </body>
</html>
      • error.html 的内容为： 
        <html>
  <head>
      <title>Hello OSS!</title>
      <meta charset="utf-8">
  </head>
  <body>
      <p>这是OSS静态网站托管的错误首页</p>
  </body>
</html>
      • aliyun-logo.png 是一张图片。
  3. 开通OSS的静态网站托管功能

    如下图所示，登录控制台后，将默认首页设置为上文中的index.html，将默认404页设置为上文中的error.html。具体操作请参见设置静态网站托管。



    检验静态网站托管功能，输入如图所示的URL地址：
    • 显示默认的首页

      可以看到输入类似URL的时候，会显示开通时指定的index.html中的内容。

    • 显示默认的 404 页

      可以看到输入的URL没有对应的文件时，会显示开通时指定的error.html中的内容。

    • 显示正常的文件

      可以看到输入的URL有对应的文件时，会读取成功。

  4. 使用自定义域名访问 OSS

    关于如何实现自定义域名访问 OSS，请参见开发人员指南中的自定义域名访问 OSS。

    • 显示默认的首页

    • 显示默认的404页

    • 显示正常的文件

    说明 针对中国大陆、中国香港地区的OSS，如果直接使用OSS默认域名从互联网访问OSS上网页类型文件，Response Header中会自动加上 Content-Disposition:'attachment=filename;'。即从浏览器访问网页类型文件时，会以附件形式进行下载。若用户使用自有域名访问OSS的请求，Response Header中不会加上此信息。如何使用自有域名访问OSS，请参考OSS帮助文档 绑定自定义域名。

常见问题及解决方案

  • OSS静态网站托管对客户来说有什么好处？

    在用户需求比较简单的时候，且访问量比较小的时候，可以省掉一台ECS。如果访问量大一点，可以考虑结合CDN来使用。

  • 价格怎么样？如何和CDN结合？

    价格可以参考官方网站OSS的价格，CDN的价格也可以参考官方网站CND的价格。和CDN结合的例子可以参考CDN加速OSS实践。

  • 默认的首页和默认的404页面都需要设置吗？

    默认首页需要设置，但默认404页面可以不用设置。

  • 为什么输入的URL在浏览器上返回403？

    有可能Bucket的权限不是公开读。也有可能是因为欠费被停止使用。