IBM Cloud Docs
Serving static websites with IBM Cloud Object Storage

Serving static websites with IBM Cloud Object Storage

A new hosted static website can be created with IBM Cloud® Object Storage in minutes using this simple tutorial. This topic contains the details and some advanced configuration options for hosting static websites.

Overview

Modern web development requires modern tools and secure infrastructure. Static websites represent the latest developments in high-availability, SEO improvement, and increased security. While covering every available option is beyond the scope of this hands-on overview, the ease of serving static content on IBM Cloud Object Storage allows for many possible strategies.

Hosted static websites focus on the content your users desire: information and media. By removing the administration of web servers like Apache or Nginx, management of your website focuses directly on content, from generation to deployment.

Static content differs substantially from dynamic web content. However, if you don't need to generate dynamic content on the web or if your workflow results in content saved to a fixed form, then the hosted static solution featured here presents the best choice.

Capabilities

Creating static website hosting in IBM Cloud Object Storage can be accomplished with cURL, as well as libraries for Java, Go, Python, and NodeJS. In addition, S3 compatibility means that the AWS CLI can also be used to define static website functionality from the command line. Also, creating and configuring a new hosted static website solution can be created using a GUI in the Console just by adding the option for Static Website when creating a bucket.

Basic Configuration

Hosting a static website on IBM Cloud® Object Storage starts with creating a bucket and configuring it for public access. Then, upload your website content to your bucket. Finally, configure the website to use your documents as an index for the site and to potentially display errors.

At minimum, your configuration should consist of a required index document for visitors to view by default, usually written in HTML and named index.html. An optional error document can help your visitors stay on track when they stray. Of course, you can always try for yourself using this tutorial.

Advanced Configuration

When you create and configure a new hosted static website, you may also wish to use IBM Cloud Internet Services to configure more advanced options including routing rules for your domain. But you don't even have to go further than configuring your bucket during creation to start customizing your new site.

Figure 1. Initial configuration options
Configure options

Routing

Routing gives you control over the requests coming from your visitors. For example, you could globally redirect all your traffic from using one protocol to another, like replacing HTTP with the secure HTTPS. Or, you can create individual rules that process incoming requests for specific files and provide responses to your visitors based on the rules you define.

Figure 2. Global routing rule
Global routing rule

If you already have a hosted static website that you wish to migrate, you can bring a set of the routing rules that you have already set and import the set as code. The input shown in Figure 3 requires a JSON array formatted for the website configuration rules.

Figure 3. Import configuration as code
Import configuration code

An example of JSON code exemplifies the possibilities. The following shows a rule that redirects visitors from missing pages or possible malformed request resulting in a 404 error code and redirecting the visitor to a specific error page. The JSON can contain multiple objects representing the definition of the rules as needed.

[
  {
    "Condition": {
      "HttpErrorCodeReturnedEquals": "404"
    },
    "Redirect": {
      "HostName": "<bucketname>.<endpoint>",
      "HttpRedirectCode": "302",
      "Protocol": "https",
      "ReplaceKeyWith": "error404.html"
    }
  }
]

The same rule codified previously can be added as an individual rule using the Console, and shown in Figure 3.

Figure 3. Add individual rules
Add individual rules

IBM Cloud Internet, Domain, and Delivery Services

One of the benefits of using IBM Cloud Internet Services pertains to setting up your own domains. A "domain" is part of the overall web address, consisting of a Top Level Domain (TLD) and one or more unique words separated by dots, like example.com where the TLD is com. You can choose to skip this step, but if your DNS records are not configured properly using CIS (or other service providing domain name resolution), it might leave all or part of your website inaccessible.

Static websites are meant to be fast and secure. Serving up static content is easy with the right tools that deliver the content to your customers. Many deployment tools have built-in support for CDN support. Getting started configuring your domains using IBM Cloud® Internet Services. When creating redirect rules, you will be adding a CNAME, a "canonical (domain) name", or alias. Just like files on an operating system can have an alias for convenience, your hosted static website can be just as convenient.

The process for delivering static content through dedicated networks starts with this overview of CDN options. Content Delivery moves your static content closer to your customer's own location, extending your reach without having to manage copies of your content.

Endpoints for hosting static website content

The following tables match most of the regions, locations, and type of connections used in IBM Cloud Object Storage to the new specific endpoints used for sourcing and testing hosted static websites. For tethered endpoints not listed here, find more information on using tethered endpoints.

Regional endpoints

Table 1. Regional Endpoints
Region Hosted Static Website Endpoint
US South s3-web.us-south.cloud-object-storage.appdomain.cloud
US East s3-web.us-east.cloud-object-storage.appdomain.cloud
EU United Kingdom s3-web.eu-gb.cloud-object-storage.appdomain.cloud
EU Germany s3-web.eu-de.cloud-object-storage.appdomain.cloud
AP Australia s3-web.au-syd.cloud-object-storage.appdomain.cloud
AP Tokyo s3-web.jp-tok.cloud-object-storage.appdomain.cloud
AP Osaka s3-web.jp-osa.cloud-object-storage.appdomain.cloud
Table 1. Regional Endpoints
Region Hosted Static Website Endpoint
US South s3-web.private.us-south.cloud-object-storage.appdomain.cloud
US East s3-web.private.us-east.cloud-object-storage.appdomain.cloud
EU United Kingdom s3-web.private.eu-gb.cloud-object-storage.appdomain.cloud
EU Germany s3-web.private.eu-de.cloud-object-storage.appdomain.cloud
AP Australia s3-web.private.au-syd.cloud-object-storage.appdomain.cloud
AP Tokyo s3-web.private.jp-tok.cloud-object-storage.appdomain.cloud
AP Osaka s3-web.private.jp-osa.cloud-object-storage.appdomain.cloud
Table 1. Regional Endpoints
Region Hosted Static Website Endpoint
US South s3-web.direct.us-south.cloud-object-storage.appdomain.cloud
US East s3-web.direct.us-east.cloud-object-storage.appdomain.cloud
EU United Kingdom s3-web.direct.eu-gb.cloud-object-storage.appdomain.cloud
EU Germany s3-web.direct.eu-de.cloud-object-storage.appdomain.cloud
AP Australia s3-web.direct.au-syd.cloud-object-storage.appdomain.cloud
AP Tokyo s3-web.direct.jp-tok.cloud-object-storage.appdomain.cloud
AP Osaka s3-web.direct.jp-osa.cloud-object-storage.appdomain.cloud

Cross Region endpoints

Table 2. Cross Region Endpoints
Region Hosted Static Website Endpoint
US Cross Region s3-web.us.cloud-object-storage.appdomain.cloud
EU Cross Region s3-web.eu.cloud-object-storage.appdomain.cloud
AP Cross Region s3-web.ap.cloud-object-storage.appdomain.cloud
Table 2. Cross Region Endpoints
Region Hosted Static Website Endpoint
US Cross Region s3-web.private.us.cloud-object-storage.appdomain.cloud
EU Cross Region s3-web.private.eu.cloud-object-storage.appdomain.cloud
AP Cross Region s3-web.private.ap.cloud-object-storage.appdomain.cloud
Table 2. Cross Region Endpoints
Region Hosted Static Website Endpoint
US Cross Region s3-web.direct.us.cloud-object-storage.appdomain.cloud
EU Cross Region s3-web.direct.eu.cloud-object-storage.appdomain.cloud
AP Cross Region s3-web.direct.ap.cloud-object-storage.appdomain.cloud

Single site endpoints

Table 3. Single Data Center Endpoints
Location Hosted Static Website Endpoint
Amsterdam, Netherlands s3-web.ams03.cloud-object-storage.appdomain.cloud
Chennai, India s3-web.che01.cloud-object-storage.appdomain.cloud
Mexico City, Mexico s3-web.mex01.cloud-object-storage.appdomain.cloud
Milan, Italy s3-web.mil01.cloud-object-storage.appdomain.cloud
Montrèal, Canada s3-web.mon01.cloud-object-storage.appdomain.cloud
Paris, France s3-web.par01.cloud-object-storage.appdomain.cloud
San Jose, US s3-web.sjc04.cloud-object-storage.appdomain.cloud
São Paulo, Brazil s3-web.sao01.cloud-object-storage.appdomain.cloud
Singapore s3-web.sng01.cloud-object-storage.appdomain.cloud
Table 3. Single Data Center Endpoints
Location Hosted Static Website Endpoint
Amsterdam, Netherlands s3-web.private.ams03.cloud-object-storage.appdomain.cloud
Chennai, India s3-web.private.che01.cloud-object-storage.appdomain.cloud
Mexico City, Mexico s3-web.private.mex01.cloud-object-storage.appdomain.cloud
Milan, Italy s3-web.private.mil01.cloud-object-storage.appdomain.cloud
Montrèal, Canada s3-web.private.mon01.cloud-object-storage.appdomain.cloud
Paris, France s3-web.private.par01.cloud-object-storage.appdomain.cloud
San Jose, US s3-web.private.sjc04.cloud-object-storage.appdomain.cloud
São Paulo, Brazil s3-web.private.sao01.cloud-object-storage.appdomain.cloud
Singapore s3-web.private.sng01.cloud-object-storage.appdomain.cloud
Table 3. Single Data Center Endpoints
Location Hosted Static Website Endpoint
Amsterdam, Netherlands s3-web.direct.ams03.cloud-object-storage.appdomain.cloud
Chennai, India s3-web.direct.che01.cloud-object-storage.appdomain.cloud
Mexico City, Mexico s3-web.direct.mex01.cloud-object-storage.appdomain.cloud
Milan, Italy s3-web.direct.mil01.cloud-object-storage.appdomain.cloud
Montrèal, Canada s3-web.direct.mon01.cloud-object-storage.appdomain.cloud
Paris, France s3-web.direct.par01.cloud-object-storage.appdomain.cloud
San Jose, US s3-web.direct.sjc04.cloud-object-storage.appdomain.cloud
São Paulo, Brazil s3-web.direct.sao01.cloud-object-storage.appdomain.cloud
Singapore s3-web.direct.sng01.cloud-object-storage.appdomain.cloud

Next steps

Making the most of modern web development requires modern tools and secure infrastructure, but shouldn't be a barrier to the success of your projects. If you haven't already tried the tutorial, check out for yourself how hosting a static website can work for you.