Loading...
No results found.
Get access to 700+ labs and courses

Developer Essentials: Google Cloud Storage Static Website Hosting

Lab 30 годин universal_currency_alt 1 кредит show_chart Початковий
info This lab may incorporate AI tools to support your learning.
Get access to 700+ labs and courses

gem-cloud-storage-host-static-site

Google Cloud self-paced labs logo

Activate Cloud Shell

Cloud Shell is a virtual machine that is loaded with development tools. It offers a persistent 5GB home directory and runs on the Google Cloud. Cloud Shell provides command-line access to your Google Cloud resources.

  1. Click Activate Cloud Shell Activate Cloud Shell icon at the top of the Google Cloud console.

When you are connected, you are already authenticated, and the project is set to your PROJECT_ID. The output contains a line that declares the PROJECT_ID for this session:

Your Cloud Platform project in this session is set to YOUR_PROJECT_ID

gcloud is the command-line tool for Google Cloud. It comes pre-installed on Cloud Shell and supports tab-completion.

  1. (Optional) You can list the active account name with this command:
gcloud auth list

  1. Click Authorize.

  2. Your output should now look like this:

Output:

ACTIVE: * ACCOUNT: student-01-xxxxxxxxxxxx@qwiklabs.net To set the active account, run: $ gcloud config set account `ACCOUNT`
  1. (Optional) You can list the project ID with this command:
gcloud config list project

Output:

[core] project = <project_ID>

Example output:

[core] project = qwiklabs-gcp-44776a13dea667a6 Note: For full documentation of gcloud, in Google Cloud, refer to the gcloud CLI overview guide.

Overview

This lab guides you through hosting a static website using Google Cloud Storage (GCS). You'll create a GCS bucket, upload website files, configure the bucket for website hosting, and use Artifact Registry to manage container images. This lab assumes basic familiarity with Google Cloud and command-line operations.

Task 1. Create a Google Cloud Storage Bucket

Create a GCS bucket to store your website's files.

  1. Set your Project ID.
gcloud config set project {{{ project_0.project_id | "PROJECT_ID" }}} Note:
Sets the active project in the Cloud SDK.
  1. Create a GCS bucket.
gcloud storage buckets create gs://{{{ project_0.project_id | "PROJECT_ID" }}}-website --uniform-bucket-level-access Note:
Creates a new GCS bucket with uniform bucket-level access enabled.

Task 2. Upload Website Files

Upload your website's HTML, CSS, JavaScript, and image files to the GCS bucket.

  1. Create a simple index.html file.
<html> <head> <title>My Static Website</title> </head> <body> <p>Hello from Google Cloud Storage!</p> </body> </html> Note:
Creates a basic HTML file.
  1. Upload the index.html file to your bucket.
gcloud storage cp index.html gs://{{{ project_0.project_id | "PROJECT_ID" }}}-website Note:
Copies the index.html file to the GCS bucket.

Task 3. Configure Bucket for Website Hosting

Configure the GCS bucket to serve your static website.

  1. Enable website configuration on the bucket.
gcloud storage buckets update gs://{{{ project_0.project_id | "PROJECT_ID" }}}-website --web-main-suffix=index.html Note:
Sets index.html as the default index page for the bucket.
  1. Make the bucket objects publicly readable.
gcloud storage buckets add-iam-policy-binding gs://{{{ project_0.project_id | "PROJECT_ID" }}}-website --member=allUsers --role=roles/storage.objectViewer Note:
Grants public read access to objects in the bucket.

Task 4. Access Your Website

Access your hosted static website via the GCS bucket's URL.

  1. Get the public URL of your website.
echo "https://storage.googleapis.com/{{{ project_0.project_id | "PROJECT_ID" }}}-website/index.html" Note:
Prints the URL to access your website.
  1. Open the URL in your browser to view your website.
Open the URL in your browser to view your website. Note:
This is not a command, just a text reminder to the user.

Task 5. Clean Up

Clean up resources to prevent unintended charges

  1. Remove the bucket.
gcloud storage rm -r gs://{{{ project_0.project_id | "PROJECT_ID" }}}-website Note:
Deletes the GCS bucket.

Congratulations!

You have successfully hosted a static website on Google Cloud Storage. You created a GCS bucket, uploaded your website files, configured the bucket for website hosting, and accessed your live website. This is a cost-effective and scalable solution for hosting static content.

Additional Resources

Manual Last Updated Jun 27, 2025

Lab Last Tested Jun 27, 2025

Before you begin

  1. Labs create a Google Cloud project and resources for a fixed time
  2. Labs have a time limit and no pause feature. If you end the lab, you'll have to restart from the beginning.
  3. On the top left of your screen, click Start lab to begin

Use private browsing

  1. Copy the provided Username and Password for the lab
  2. Click Open console in private mode

Sign in to the Console

  1. Sign in using your lab credentials. Using other credentials might cause errors or incur charges.
  2. Accept the terms, and skip the recovery resource page
  3. Don't click End lab unless you've finished the lab or want to restart it, as it will clear your work and remove the project

This content is not currently available

We will notify you via email when it becomes available

Great!

We will contact you via email if it becomes available

One lab at a time

Confirm to end all existing labs and start this one

Use private browsing to run the lab

Use an Incognito or private browser window to run this lab. This prevents any conflicts between your personal account and the Student account, which may cause extra charges incurred to your personal account.