Host a Static Website on Google Cloud Storage

Project Overview

Objective: Host a static website on Google Cloud Storage (GCS)
Project Name: cloud-demo-site
Bucket Name: cloud-demo-static-site
Region: us-central1 (Iowa)
Website URL: https://storage.googleapis.com/cloud-demo-static-site/index.html
Expected Result: A live website with a homepage (index.html) and an image (logo.png)

Step 1: Create a New Google Cloud Project

  • Go to the Google Cloud Console:
  • Click on the Project Selector (top left corner).Select New Project.
    Set the project name to: cloud-demo-site.
    Set the billing to "No Billing Account" (if applicable).
    Click Create.
  • After creation, set the project in your terminal:
    gcloud config set project cloud-demo-site
  • Verify that the project is set correctly:
    gcloud config get-value project

Step 2: Enable Cloud Storage API

By default, APIs are disabled in Google Cloud. You must manually enable the Cloud Storage API to use storage services.


In Google Cloud Console:Navigate to API & Services > Library.
Search for Cloud Storage API.
Click Enable.

Step 3. Create a Google Cloud Storage Bucket

To host a static website, you first need to create a Cloud Storage bucket. The bucket name must match your website’s domain (e.g., mywebsite.com). The bucket should be publicly accessible to serve the website.

  • Navigate to "Cloud Storage" > "Buckets".
  • Click "Create Bucket".
  • Set the bucket name (e.g., cloud-demo-static-site).
  • Choose Region: us-central1 (or your closest region).
  • Choose Storage Class: Standard.
  • Select "Uniform" access control.
  • Click "Create".

Google Cloud CLI (Automated Terminal Approach): gcloud storage buckets create gs://cloud-demo-static-site --location=us-central1 --uniform-bucket-level-access

Step 4: Upload Website Files

Once the bucket is created, you need to upload your static website files (index.html, style.css, etc.). These files will be publicly accessible once permissions are set.

  • In Cloud Storage, go to the bucket (cloud-demo-static-site).
  • Click "Upload Files".
  • Upload your index.html file.


Google Cloud CLI (Automated Terminal Approach)

: gsutil cp Downloads/index.html gs://cloud-demo-static-site/

Step 5: Grant Public Access to Files

To serve your website to the public, you must grant "allUsers" the "Reader" role. This allows anyone to view the files but not modify them.

  • Navigate to the Storage bucket.
  • Click on index.html.
  • Click "Permissions" > "Add".
  • Set "AllUsers" and select "Reader" role.
  • Click "Save".

Google Cloud CLI (Automated Terminal Approach)

: gsutil iam ch allUsers:objectViewer gs://cloud-demo-static-site

Step 6: Configure the Website Settings

  • Go to Cloud Storage > Buckets.
  • Click on your bucket name (cloud-demo-static-site).
  • Click "Edit Website Configuration".
  • Set:Main Page: index.html
    Error Page: 404.html (if applicable)
  • Click "Save".

Google Cloud CLI (Automated Terminal Approach)

Run this command in the terminal:

gcloud storage buckets update gs://cloud-demo-static-site --web-main-page-suffix=index.html --web-error-page=404.html

Step 7: Verify the Website

Open your web browser.

Visit the following URL:

https://storage.googleapis.com/cloud-demo-static-site/index.html

Step 8: Enforce Public Access for the Files

  • Go to Cloud Storage > Buckets.
  • Click on your bucket name (cloud-demo-static-site).
  • Click on "Permissions".
  • Click "Grant Access".
  • Add a new member:Member: allUsers
    Role: Storage Object Viewer
  • Click "Save".
  • To allow public access via the terminal, run: gcloud storage buckets add-iam-policy-binding gs://cloud-demo-static-site --member=allUsers --role=roles/storage.objectViewer

Step 9: Final Verification

Open your web browser.

Visit:

https://storage.googleapis.com/cloud-demo-static-site/index.html

Conclusion

We’ve successfully hosted a static website on Google Cloud Storage using the bucket cloud-demo-static-site in the us-central1 region. Your site is publicly accessible !

By completing these steps, you’ve learned how to:

  • Create and configure a new project in Google Cloud.

  • Set up a GCS bucket with the correct permissions and website settings.

  • Upload static content (HTML, images) to make it publicly available.

Popular Projects

What is Cloud Computing ?

Cloud computing delivers computing resources (servers, storage, databases, networking, and software) over the internet, allowing businesses to scale and pay only for what they use, eliminating the need for physical infrastructure.


  • AWS: The most popular cloud platform, offering scalable compute, storage, AI/ML, and networking services.
  • Azure: A strong enterprise cloud with hybrid capabilities and deep Microsoft product integration.
  • Google Cloud (GCP): Known for data analytics, machine learning, and open-source support.