Static website hosting with CI/CD

In this blog we will host our static website using Google Cloud Storage (GCS) and implement CI/CD pipeline using Github Actions.

Prerequisties

• Google cloud account

• Github account

• Static website files or pick up any static website from online sites

• Domain name (Optional)

Architecture / Flow

Steps:

Step 1: Login to your GCP account. Go to Google Cloud storage (GCS) and create bucket

Create a GCS Bucket —> Enter a globally unique name —> Select location as multi regional and storage class as default Standard

Once these details are selected, next is to uncheck the option for enforce public access prevention. This will ensure that bucket is publicly accessible.

Next for deletion policy you can select whichever option seems to be of the best fit for your usecase.

Step 2: Get the code ready on your local system and create a repository on Github

Store your website code files on your local folder. You can use the code from my repo

Create a new Github repository by going on your Github profile on the corner right select New repository

Step 3: Initialize Git repo in your folder containing code and upload code to Github

git init
git add .
git commit -m "First commit"
git remote add origin https://github.com/akshata2000-23/GCP-Static-Website-CICD.git ##repo link
git push -u origin master ##pushing the code from your local to Github

This initializes git repo.

Then you can check status by using command: git status

Above output denotes that everything is pushed to Github.

Step 4: Create pipeline on Github

To automate the deployment process, we’ll use GitHub Actions. This will ensure that any changes or commits to your repository automatically update your static website hosted on Google Cloud Storage.

a. Create a Service Account on GCP

1. Go to Google Cloud Console → IAM & Admin → Service Accounts.

2. Click "Create Service Account".

3. Name: gcp-static-website-sa

4. Grant this account the following roles:

   • Storage Admin

5. After creation, click on the service account → Keys tab → Add Key → JSON.

6. Save this json key securely

b. Add Service Account Key to GitHub Secrets

1. Go to your GitHub repo → Settings → Secrets and variables → Actions.

2. Click "New repository secret".

3. Name it: GCP_SA_KEY

4. Paste the entire contents of the JSON key file.

We will utilize Github actions so that whenever any code commit is made it will trigger the pipeline and our static website content will change dynamically.

c. Create Workflow File

Inside your repo, create a directory and file like this: .github/workflows/gcs-deploy.yml

This is our pipeline code which incase of any commits made to the repo will get triggered and the site code will get uploaded to the GCS bucket.

name: Deploy to GCS

on:
  push:
    branches:
      - master  # change this if your default branch is different

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Authenticate with Google Cloud
        uses: google-github-actions/auth@v1
        with:
          credentials_json: '${{ secrets.GCP_SA_KEY }}'  # Must be added in GitHub secrets

      - name: Set up gcloud CLI
        uses: google-github-actions/setup-gcloud@v1
        with:
          version: 'latest'

      - name: Upload files to GCS
        run: |
          gsutil -m cp -r site-code/* gs://bucket-name

Once you make commit to this repo your pipeline will run, you can see it in actions section

With the above steps you’ll be able to see your website on the gcs bucket url

For index.html check the bucket url and you’ll be able to see

In the public url you’ll be able to see your website

That’s it for todays blog, we keep it short and simple. Do try this simple website hosting on your own and comment down if you have face any difficulties.