Host a Static Website using Google Cloud Storage (GCS)
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.
Prerequisites: Basic familiarity with Google Cloud and command-line operations.
Task 0. Activate Cloud Shell
Cloud Shell is a virtual machine with development tools, a persistent 5GB home directory, and command-line access to your Google Cloud resources.
- Click Activate Cloud Shell icon at the top of the Google Cloud Console.
- Once connected, you are already authenticated, and the project is set to your
PROJECT_ID.
Example:
Your Cloud Platform project in this session is set to YOUR\_PROJECT\_ID
`
Verify Account
bash
gcloud auth list
`
Output Example:
`
ACTIVE: *
ACCOUNT: student-01-xxxxxxxxxxxx@qwiklabs.net
`
To set the active account:
`bash
gcloud config set account ACCOUNT
`
Verify Project
`bash
gcloud config list project
`
Output Example:
`
[core]
project = qwiklabs-gcp-44776a13dea667a6
`
Task 1. Create a Google Cloud Storage Bucket
Set your Project ID:
`bash
gcloud config set project "PROJECT_ID"
`
Create a GCS bucket:
`bash
gcloud storage buckets create gs://"PROJECT_ID"-website --uniform-bucket-level-access
`
Task 2. Upload Website Files
Create a simple index.html file:
`html
<html>
<head>
<title>My Static Website</title>
</head>
<body>
<p>Hello from Google Cloud Storage!</p>
</body>
</html>
`
Upload the file to your bucket:
`bash
gcloud storage cp index.html gs://"PROJECT_ID"-website
`
Task 3. Configure Bucket for Website Hosting
Enable website configuration:
`bash
gcloud storage buckets update gs://"PROJECT_ID"-website --web-main-suffix=index.html
`
Make the bucket objects publicly readable:
`bash
gcloud storage buckets add-iam-policy-binding gs://"PROJECT_ID"-website \
--member=allUsers --role=roles/storage.objectViewer
`
Task 4. Access Your Website
Get the public URL:
`bash
echo "https://storage.googleapis.com/"PROJECT_ID"-website/index.html"
`
👉 Open the URL in your browser to view your website.
Task 5. Clean Up
Remove the bucket to prevent unintended charges:
`bash
gcloud storage rm -r gs://"PROJECT_ID"-website
`
🎉 Congratulations!
You have successfully hosted a static website on Google Cloud Storage.
- Created a GCS bucket
- Uploaded website files
- Configured the bucket for website hosting
- Accessed your live website
This is a cost-effective and scalable solution for hosting static content.
Top comments (0)