Guided Lab: Hosting a Static Website in Google Cloud Storage Bucket

Jon-Bonso

Description

Google Cloud Storage can serve static content such as HTML, CSS, JavaScript, and images directly from a storage bucket. This makes it a simple and cost‑effective way to host static websites without managing servers.

In this guided lab, you will learn how to host a static website using a Google Cloud Storage Bucket. By the end of the lab, you’ll have a simple HTML page accessible through a Cloud Storage bucket.

Prerequisites

This lab assumes you have basic knowledge of creating a Cloud Storage Bucket.
If you find any gaps in your knowledge, consider taking this lab:

Guided Lab: Creating a Cloud Storage Bucket

Objectives

In this lab, you will:

Create a Cloud Storage bucket.
Build and upload a simple index.html file.
Configure the bucket for static website hosting.
Access your hosted static website through an Authenticated URL.

Subscribe to access GCP PlayCloud Labs

Lab Steps

Create a Cloud Storage Bucket

1. On the Create a bucket page, enter your desired bucket name (should be unique).

2. Leave other configurations at their default values.

3. Click Create.

Create an index.html file

1. Use this sample template for your HTML file.

<!doctype html>
<title>Static Website</title>
<style>
  body { text-align: center; padding: 150px; }
  h1 { font-size: 50px; }
  body { font: 20px Helvetica, sans-serif; color: #333; }
  article { display: block; text-align: left; width: 650px; margin: 0 auto; }
  a { color: #dc8100; text-decoration: none; }
  a:hover { color: #333; text-decoration: none; }
  .sample {padding: 10px 20px 10px; border-top: groove; border-bottom: groove;} 
</style>

<article>
	<div class="sample">
    <h1>Welcome to my website!</h1>
</div>
</article>

2. Save the file as index.html

Configure the Cloud Storage Bucket

1. Navigate to the created bucket, then click Edit Bucket.

2. In the Website Configuration section of your bucket settings:

Set the Main Page to index.html.
(Optional) You can also specify a custom error page (e.g., 404.html) to display when a file is not found.
For this demo, leave the error page field empty

3. Scroll down and click Save Changes.

4. Upload your index.html file to the bucket.

Access Your Static Website

1. In the bucket, select the uploaded index.html file

2. Locate the Authenticated URL.

Note: You may also use the Public URL, but in this lab, you are not allowed to modify permissions.

3. Click the Authenticated URL to view your hosted static website.

Congratulations! You’ve completed the lab and successfully hosted a static website using Google Cloud Storage. Your index.html page is now live and accessible through an authenticated URL.