Deploying a Static Website on Google Cloud Storage

Static websites are one of the easiest ways to start using Google Cloud. With Google Cloud Storage (GCS), you can host a simple portfolio, blog, or documentation site without worrying about servers.

This guide walks you through what static websites are, why GCS is a good option, and step-by-step instructions to host your own using both the Google Cloud Console and the gcloud CLI.

What is a Static Website?

A static website is a site where:

• All content is fixed (HTML/CSS/JS files) and served as-is to users.

• There is no backend processing (like PHP, Node.js, or databases).

• Examples include portfolios, blogs (without dynamic content), and documentation sites.

In contrast, dynamic websites (such as Facebook or Gmail) require servers to process user requests and generate responses dynamically. Static websites don’t—they are just files delivered over the web.

Why Use Google Cloud Storage?

Google Cloud Storage (GCS) is a managed object storage service that allows you to easily store and serve static files.

Benefits:

• Storage: Highly durable and globally accessible.

• Serving content: Buckets can be made public to serve your files directly.

• Scalability: GCS can handle millions of requests without additional setup.

This approach is similar to AWS S3 or Azure Blob Storage, but is entirely managed by Google Cloud.

Core Concepts You Need

Before deploying, here are the GCS basics:

a) Buckets

• Think of a bucket as a root folder.

• Each bucket has a globally unique name (e.g., my-website-123).

• You upload all your website files into the bucket.

b) Objects

• An object is an individual file (e.g., index.html, style.css, logo.png).

• Each object has a unique URL once the bucket is public.

c) Website Configuration

You define which file is served as the default page (e.g., index.html).

• You can also specify a custom error page (e.g., 404.html).

d) Permissions

• Buckets are private by default.

• You must configure public access so anyone can view your website.

How It Works

1. Create a bucket in GCS.

2. Upload your website files (index.html, 404.html, and assets).

3. Make the bucket public so visitors can access it.

4. Configure it as a static website:

   • Set index.html as the main page.

   • Set 404.html as the error page (optional).

5. Test your site using the generated URL.

Step-by-Step: Deploy a Static Website

a) Create a bucket:

• Go to Google Cloud Console → Storage → Buckets → Create bucket.

• Choose a unique bucket name (e.g., tembea-kenya).

• Select location and storage class (default is fine).

• Click Create

On CLI- Have the Google Cloud SDK Installed:

gcloud auth login  #Authenticate to your Google Account
gcloud config set project <PROJECT_ID>
gcloud storage buckets create gs://<BUCKET_NAME> --location=<BUCKET_LOCATION>

• PROJECT_ID is the unique ID of the project we want to use for our guide

• BUCKET_NAME is the name you want to give your bucket.

• BUCKET_LOCATION is the location of your bucket. For example, US

b) Upload your site's files

• Inside the bucket, click Upload files/folder.

Clone the Repository, navigate into it and delete the .git folder

git clone git@github.com:lxmwaniky/tembea_kenya.git
cd tembea-kenya
rm -rf .git

You will be able to find the files to work with and upload them to your bucket.

• Upload index.html, 404.html, and all supporting assets (e.g., images/, scripts/, style/).

On CLI:

gcloud storage buckets create gs://tembea-kenya --location=US #Replace tembea-kenya with your bucket name

In the tembea-kenya directory that we just cloned, run this command. It allows us to recursively copy all those files and folders to our cloud storage bucket

gcloud storage cp -r . gs://tembea-kenya

You should see the files in your bucket

c) Make the bucket public

By default, Google Cloud buckets are set to be private

• Go to the Permissions tab.

• Click Remove public access prevention

• Click Grant Access, and add allUsers as a member.

• Assign the role Storage Object Viewer.

On CLI:

gcloud storage buckets add-iam-policy-binding  gs://tembea-kenya --member=allUsers --role=roles/storage.objectViewer

d) Enable static website hosting

• Click the Bucket overflow menu (:) associated with the bucket and select Edit website configuration.

• In the website configuration dialog, specify the main page(index.html) and error page(404.html).

• Click Save.

On CLI:

gcloud storage buckets update gs://tembea-kenya --web-main-page-suffix=index.html --web-error-page=404.html

e) Get your website URL

Once done, open: https://storage.googleapis.com/<BUCKET_NAME>/index.html

f) Conclusion

With the step-by-step guide provided, you can easily set up your static website and make it publicly accessible, taking advantage of Google's powerful infrastructure.