Ends in
00
days
00
hrs
00
mins
00
secs
SHOP NOW

🔥20% OFF All GitHub Reviewers & Video Course!
Back to Course

GCP PlayCloud Labs

0% Complete
0/0 Steps
  1. GCP PlayCloud Labs
  2. Guided Lab: Creating a Cloud Storage Bucket
  3. Guided Lab: How to Launch a GCP Compute Engine Linux Instance
  4. Guided Lab: Creating a Cloud SQL Instance
  5. Guided Lab: Creating a Cloud NAT Gateway
  6. Guided Lab: Running SQL Commands in Cloud SQL Studio
  7. Guided Lab: Hosting a Static Website in Google Cloud Storage Bucket
  8. Guided Lab: Creating and Restoring Cloud SQL Backups
  9. Guided Lab: Vertically Scaling a VM Instance
  10. Guided Lab: Creating a Custom Image from a VM Instance with Web Server in Google Cloud
  11. Guided Lab: Setting up a Web Server on a VM Instance
  12. Guided Lab: Creating a Spot VM Instance
  13. Guided Lab: Exploring Instance Metadata in Google Cloud
  14. Guided Lab: Setting Up and Managing a Database on a VM Instance
  15. Guided Lab: Integrating Cloud SQL Database instance with a VM instance
  16. Guided Lab: Connecting Cloud SQL Database with MySQL Workbench (Local)
  17. Guided Lab: Creating a VM Using Instance Templates
  18. Guided Lab: Installing WordPress on an Ubuntu VM Instance with LEMP Stack
  19. Guided Lab: Reserving or Promoting a Static IP Address for a VM Instance
  20. Guided Lab: Creating a Google Kubernetes Engine (GKE) Cluster
  21. Guided Lab: Protecting Data on Cloud Storage Bucket Against Accidental Delete and Overwrite Using Object Versioning
  22. Guided Lab: Connecting to a Kubernetes Engine Cluster
  23. Guided Lab: Creating and Managing Instance Groups in Compute Engine
  24. Guided Lab: Configuring Shielded VM Options
  25. Guided Lab: SSH Access to GCP VM Instance from Local Machine using SSH Key Pair
  26. Guided Lab: Deploying a Simple Web Application on GKE
  27. Guided Lab: Configuring Firewall Rules to Secure and Access a VM
  28. Guided Lab: Establishing VPC Peering for Secure Cross‑Network Communication
  29. Guided Lab: Creating a Custom Virtual Private Cloud (VPC)
  30. Guided Lab: Using Startup Scripts in GCP VM Instances
  31. Guided Lab: Deploying a LAMP Stack on a Compute Engine VM
  32. Guided Lab: Managing Cloud Storage Buckets via SSH Commands
  33. Guided Lab: Guarding Your VM with Deletion Protection
  34. Guided Lab: Using Cloud Storage Lifecycle Rules to Automate Object Management
  35. Guided Lab: Guarding Your Cloud SQL Instances with Deletion Protection
  36. Guided Lab: Exploring Google Cloud Storage Classes
  37. Guided Lab: Setting Up a Linux Bastion Host on GCP
  38. Guided Lab: Uploading, Organizing, and Managing Objects in Cloud Storage
  39. Guided Lab: Creating an Application Load Balancer
  40. Guided Lab: Creating a Network Load Balancer
  41. Guided Lab: Creating VM Snapshots and Restoring a VM from a Snapshot
GCP PlayCloud Labs Guided Lab: Hosting a Static Website in Google Cloud Storage Bucket
In Progress
Lesson 7 of 41
In Progress

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:

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.

Skip to content