How to Host a Static Website on Google Cloud Platform (GCP)

If you're looking for a reliable and scalable solution to host your static website, Google Cloud Platform (GCP) is a great option. In this blog post, we'll walk you through the steps to get your static website live using GCP's Cloud Storage service.

In my last post, I shared a guide on how to host a static website on AWS S3. If you’re exploring different cloud providers, this post will help you compare and understand how to achieve the same on GCP.

Step 1: Create a GCP Project

Before hosting your website, you need a project in GCP to organize your resources.

1. Go to the GCP Console.

2. Click Create Project.

3. Enter a name for your project and click Create.

Step 2: Enable the Cloud Storage API

To use Cloud Storage for hosting, you must enable the necessary API.

1. In the GCP Console, navigate to APIs & Services > Library.

2. Search for Cloud Storage API.

3. Click Enable to activate it for your project.

Step 3: Create a Cloud Storage Bucket

Buckets are used to store your website’s files.

1. In the GCP Console, go to Cloud Storage.

2. Click Create Bucket.

3. Configure your bucket with the following settings:

   • Name: Provide a globally unique name, such as my-static-website.

   • Region: Choose a region close to your target audience.

   • Storage Class: Select Standard for frequent access.

   • Access Control: Choose Uniform to manage permissions at the bucket level.

4. Click Create.

Step 4: Upload Your Website Files

Now, upload your static files like HTML, CSS, JavaScript, and assets.

1. In the Cloud Storage console, click on your bucket name.

2. Click Upload Files or Upload Folder to upload your website files.

3. Ensure that your main file is named index.html.

Step 5: Configure Public Access

For your website to be accessible, you need to make your files public.

1. Go to your bucket and navigate to the Permissions tab.

2. Click Grant Access.

   • New Principals: Enter allUsers.

   • Role: Select Storage Object Viewer.

3. Click Save to make your files publicly accessible.

Step 6: Set Up the Website Configuration

Enable static website hosting in the bucket settings.

1. In your bucket, go to the Settings tab.

2. Click Edit Website Configuration under Static Website Hosting.

   • Index Page: Enter index.html.

   • 404 Error Page: Optionally, enter 404.html.

3. Click Save.

Step 7: Access Your Static Website

Your static website is now live!

1. Go to the Bucket Details page.

2. Locate your index.html file and click on the Public URL to access your website.

Wrapping Up

Congratulations! You’ve successfully hosted your static website on GCP. Google Cloud’s infrastructure ensures high availability and scalability, making it an excellent choice for static websites.

For additional features like HTTPS, consider using a custom domain with Cloud CDN. Stay tuned for more tutorials to take your website hosting to the next level!

If you found this guide helpful, share it with others and let us know your thoughts in the comments below!