TheKoguryo's Tech Blog

 Version 2024.04.01

Warning

This content has been generated by machine translation. The translations are automated and have not undergone human review or validation.

7.5 Static Website Hosting via Public Bucket

If we create a public bucket, we will use that it can be accessed by a URL path, and we will try to host a simple static website using dots. Object Storage is basically a date structure without a hierarchical structure. Let’s test how to handle web pages with folder structure

Constraints

As of the current version, Public Bucket can be used for file link sharing, etc., but there are restrictions in using it for hosting a complete static website due to some functional limitations. Sending URLs to Index Documents is not currently supported. For example, there is currently no function that automatically sends http://www.example.com/index.html to http://www.example.com/index.html when a web browser accesses the address http://www.example.com. This feature is normally required for subfolders as well as for the root page, but now you have to explicitly type the entire html address in a browser or when you go to a link.

Create Public Bucket

Create a public bucket by creating a bucket and changing the visibility to PUBLIC.

  1. Create a Bucket.

    • Name: Example) ExampleBucketForWeb

  2. Click Edit Visibility to change the Visibility to Public.

    image-20220112171637934

Simple webpage test

  1. Create a simple web page and save it as index.html file name.

    <html>
  <header><title>Hello !!!</title></header>
  <body>
    <h1>Hello OCI Object Storage</h1>
  </body>
</html>

  2. Upload the index.html file to the Bucket.

  3. Check the URL path on the detail page of the uploaded index.html.

    image-20220112172135873

  4. If you access the verified URL path with a web browser, it works well.

    image-20220112172212011

Simple folder structure web page test

Object Storage is basically a date structure with no hierarchies. So when I look at the Object upload screen, there is no entry for the folder. However, in general, web pages have a folder structure. The folder structure is supported by adding a path to the object’s Name.

  1. Edit the index.html file created earlier.

    <html>
<header><title>Hello !!!</title></header>
<body>
<h1>Hello OCI Object Storage</h1>
<img src="images/icons8-oracle-96.png"/>
</body>
</html>

  2. Upload the modified index.html file to the Bucket. If the Object Name is the same, the existing file will be overwritten.

  3. Upload the image file. When uploading, change the Object Name to a name including the image path in html.

    image-20220112172554276

  4. If you access the URL path of index.html identified above with a web browser, it works well.

    image-20220112172920213

  5. Check the URL path of the image file object.

    You can see that the URL path is set as it is by adding images/ in front of the Name.

    image-20220112173024285

  6. If you access the URL path of the image file with a web browser, it works well.

    image-20220112173133024

When uploading many files, it is of course difficult to change the Name to a name including the path. If you use the CLI or a tool such as CloudBerry, the name of the object is automatically changed to the path form while uploading the local folder as it is, so there is no need to worry.



As an individual, this article was written with my personal time. There may be errors in the content of the article, and the opinions in the article are personal opinions.

Last updated on 12 Jan 2022