How to host static website on cloud storage

GcpHow-ToBeginner · 4 min read

How to Host a Static Website on Google Cloud Storage

To host a static website on Google Cloud Storage, create a storage bucket named after your domain, upload your site files, and configure the bucket for website hosting by setting the main page and error page. Then, make the bucket publicly accessible so users can view your site via the bucket URL or a custom domain.

📐

Syntax

Use the gsutil command-line tool to create and configure your bucket. The key commands are:

gsutil mb gs://[BUCKET_NAME] - Create a new bucket.
gsutil web set -m [MAIN_PAGE] -e [ERROR_PAGE] gs://[BUCKET_NAME] - Set the main and error pages for website hosting.
gsutil iam ch allUsers:objectViewer gs://[BUCKET_NAME] - Make the bucket publicly readable.
gsutil cp -r [LOCAL_FOLDER]/* gs://[BUCKET_NAME] - Upload your website files.

bash

gsutil mb gs://example-bucket

gsutil web set -m index.html -e 404.html gs://example-bucket

gsutil iam ch allUsers:objectViewer gs://example-bucket

gsutil cp -r ./website/* gs://example-bucket

💻

Example

This example shows how to host a simple static website stored in the local folder ./website on Google Cloud Storage.

It creates a bucket named my-static-site, sets index.html as the main page, 404.html as the error page, makes the bucket public, and uploads the files.

bash

gsutil mb gs://my-static-site

gsutil web set -m index.html -e 404.html gs://my-static-site

gsutil iam ch allUsers:objectViewer gs://my-static-site

gsutil cp -r ./website/* gs://my-static-site

Output

Creating gs://my-static-site/... Setting website configuration on gs://my-static-site/... Updated IAM policy for gs://my-static-site. Copying file://./website/index.html [Content-Type=text/html]... Copying file://./website/404.html [Content-Type=text/html]... Copying file://./website/style.css [Content-Type=text/css]... Operation completed over 3 objects.

⚠️

Common Pitfalls

Bucket name mismatch: The bucket name must match your domain name exactly if you want to use a custom domain.
Missing public access: Forgetting to make the bucket public will block users from seeing your site.
Incorrect main page: Not setting index.html as the main page causes the site to show a directory listing or error.
Wrong file paths: Uploading files to the wrong folder or missing files will break your site.

bash

gsutil iam ch allUsers:objectViewer gs://my-static-site  # Correct: makes bucket public

gsutil web set -m index.html -e 404.html gs://my-static-site  # Correct: main page and error page set

# Incorrect commands:
gsutil iam ch private gs://my-static-site  # Wrong: makes bucket private

gsutil web set -m home.html gs://my-static-site  # Wrong: main page not index.html

📊

Quick Reference

Steps to host a static website on Google Cloud Storage:

Create a bucket named after your domain.
Set website configuration with main and error pages.
Make the bucket publicly readable.
Upload your static files.
Access your site via the bucket URL or configure a custom domain.

✅

Key Takeaways

Create a bucket named after your domain to host your static website.

Set the main page and error page using the website configuration command.

Make your bucket publicly readable to allow users to access your site.

Upload all your static files to the bucket to serve them correctly.

Verify your bucket name and permissions to avoid common hosting issues.