Developer Essentials: Google Cloud Storage Static Website Hosting
Lab
30 Minuten
universal_currency_alt
1 Guthabenpunkt
show_chart
Einsteiger
info
Dieses Lab kann KI-Tools enthalten, die den Lernprozess unterstützen.
gem-cloud-storage-host-static-site
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.
- Click Activate Cloud Shell
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.
- (Optional) You can list the active account name with this command:
gcloud auth list
-
Click Authorize.
-
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`
- (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.
- Set your Project ID.
gcloud config set project {{{ project_0.project_id | "PROJECT_ID" }}}
Note:
Sets the active project in the Cloud SDK.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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
- 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
