By the end of this workshop you will be able to:
- Create a simple static web page (HTML, CSS, JS).
- Publish it to a private bucket in Cloud Storage.
- Serve the site through an HTTP(S) Load Balancer + Cloud CDN.
- Configure a custom 404 error page.
- Validate that the bucket stays private and is only accessible through the CDN.
User → Load Balancer (Frontend) → Cloud CDN → Backend Bucket (Private Cloud Storage)
The bucket is not public.
The Load Balancer uses a service account to access the bucket.
- GCP project with billing enabled.
gcloudauthenticated and configured:gcloud auth login gcloud config set project YOUR_PROJECT_ID- Suggested variables:
export PROJECT_ID="YOUR_PROJECT_ID" export REGION="us-central1" export BUCKET_NAME="${PROJECT_ID}-static-site"
mkdir static-site
cd static-site<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My static site on GCP</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Welcome to my static site on GCP</h1>
<p>This site is served from private Cloud Storage through Cloud CDN.</p>
<button id="btn">Click here</button>
<script src="app.js"></script>
</body>
</html>body {
font-family: system-ui, sans-serif;
background: #0f172a;
color: #e5e7eb;
text-align: center;
padding-top: 80px;
}
h1 { color: #38bdf8; }
button {
padding: 10px 20px;
border-radius: 6px;
border: none;
cursor: pointer;
}document.getElementById("btn").addEventListener("click", () => {
alert("Hello from Cloud Storage + Cloud CDN 😄");
});Create the file 404.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Page not found</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>404 - Oops, this page does not exist</h1>
<p>Check the URL or return to the <a href="/">home page</a>.</p>
</body>
</html>gcloud storage buckets create gs://$BUCKET_NAME \
--location=$REGION \
--uniform-bucket-level-accessgcloud storage buckets update gs://$BUCKET_NAME \
--no-public-access-prevention=falsegcloud storage cp * gs://$BUCKET_NAMETest that it is NOT directly accessible:
curl -I https://storage.googleapis.com/$BUCKET_NAME/index.html
# Should show 403 Forbidden- Go to Network Services → Load Balancing → Create Load Balancer.
- Select HTTP(S) Load Balancer → Start configuration.
- Create Backend → type Cloud Storage bucket → select
$BUCKET_NAME. - Enable Cloud CDN.
- In Host & Path Rules, route
/*to the backend bucket. - In Frontend, create a static IP and port 80.
- Create the Load Balancer.
In the Load Balancer:
- Go to Custom Error Responses.
- Add a rule for code 404.
- Use this HTML as the response:
<h1>404 - Page not found</h1>
<p>Check the URL or return to the home page.</p>From the console → Frontend section.
curl -I http://YOUR_IPcurl http://YOUR_IP/not-foundDirect access:
curl -I https://storage.googleapis.com/$BUCKET_NAME/index.html
# 403 ForbiddenAccess via CDN:
curl -I http://YOUR_IP/index.html
# 200 OK- Delete the Load Balancer and its IP.
- Delete the bucket:
gcloud storage rm -r gs://$BUCKET_NAME
You deployed a secure static site on GCP with:
- Private bucket
- CDN
- Load Balancer
- Custom 404 page
Excellent work! 🚀