# Deploying a Static Website on Google Cloud Storage

Static websites are one of the easiest ways to start using [Google Cloud](https://console.cloud.google.com). 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](https://cloud.google.com/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](https://aws.amazon.com/s3/) or [Azure Blob Storage](https://azure.microsoft.com/en-us/products/storage/blobs), 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

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Before you start, Google Cloud requires that your project be linked to a <strong>billing account</strong>, even if you’re using the <strong>Free Tier</strong>. Without billing enabled, you won’t be able to create buckets. Enable the <a target="_self" rel="noopener noreferrer nofollow" href="https://console.cloud.google.com/marketplace/product/google/compute.googleapis.com" style="pointer-events: none">Compute Engine API</a> for your project.</div>
</div>

### a) [Create a bucket](https://cloud.google.com/storage/docs/creating-buckets):

* 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`
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753834348150/10713bc2-b815-476d-8561-743c16224d54.png align="left")

On CLI- Have the [Google Cloud SDK](https://cloud.google.com/sdk/docs/install-sdk) Installed:

```bash
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](https://cloud.google.com/storage/docs/locations) of your bucket. For example, `US`
    

### b) Upload your site's files

* Inside the bucket, click **Upload files/folder**.
    

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">To continue with the guide, you can use preconfigured static files that I have prepared for demonstration purposes.</div>
</div>

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

```bash
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/`).
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753834917421/e4a5cafe-c4b7-4a90-b6fc-139e72789d9d.png align="center")

On CLI:

```bash
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

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753836559558/75da0b4c-7e34-4ff7-8a73-1f6233d13914.png align="center")

You should see the files in your bucket

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753836103260/5f4eca26-8293-4d11-ba61-8d79d6b352b1.png align="center")

### 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**.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753836287530/1704f7b8-a639-45e7-a56d-664fba50730d.png align="center")

On CLI:

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

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text"><strong>Note:</strong> <code>roles/storage.objectViewer</code> includes permission to list the objects in the bucket. If you don't want to grant listing publicly, use <a target="_self" rel="noopener noreferrer nofollow" href="https://cloud.google.com/storage/docs/access-control/iam-roles#standard-roles" style="pointer-events: none"><code>roles/storage.legacyObjectReader</code></a>.</div>
</div>

### d) Enable static website hosting

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753836786855/5816b03a-bcb0-47d0-bbc3-43f4cd0685d9.png align="center")

* In the website configuration dialog, specify the main page(`index.html`) and error page(`404.html`).
    
* Click **Save**.
    

On CLI:

```bash
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.