Developer Essentials: Google Cloud Storage Static Website Hosting

Activate Cloud Shell

Cloud Shell is a virtual machine that is loaded with development tools. It offers a persistent 5GB home directory and runs on the Google Cloud. Cloud Shell provides command-line access to your Google Cloud resources.

Click Activate Cloud Shell

at the top of the Google Cloud console.

When you are connected, you are already authenticated, and the project is set to your PROJECT_ID. The output contains a line that declares the PROJECT_ID for this session:

Your Cloud Platform project in this session is set to YOUR_PROJECT_ID

gcloud is the command-line tool for Google Cloud. It comes pre-installed on Cloud Shell and supports tab-completion.

(Optional) You can list the active account name with this command:

gcloud auth list

Click Authorize.
Your output should now look like this:

Output:

ACTIVE: *
ACCOUNT: student-01-xxxxxxxxxxxx@qwiklabs.net

To set the active account, run:
    $ gcloud config set account `ACCOUNT`

(Optional) You can list the project ID with this command:

gcloud config list project

Output:

[core]
project = <project_ID>

Example output:

[core]
project = qwiklabs-gcp-44776a13dea667a6

Note: For full documentation of gcloud, in Google Cloud, refer to the gcloud CLI overview guide.

Overview

This lab guides you through hosting a static website using Google Cloud Storage (GCS). You'll create a GCS bucket, upload website files, configure the bucket for website hosting, and use Artifact Registry to manage container images. This lab assumes basic familiarity with Google Cloud and command-line operations.

Task 1. Create a Google Cloud Storage Bucket

Create a GCS bucket to store your website's files.

Set your Project ID.

gcloud config set project qwiklabs-gcp-00-0b1af693acbb

Note:
Sets the active project in the Cloud SDK.

Create a GCS bucket.

gcloud storage buckets create gs://qwiklabs-gcp-00-0b1af693acbb-website --uniform-bucket-level-access

Note:
Creates a new GCS bucket with uniform bucket-level access enabled.

Task 2. Upload Website Files

Upload your website's HTML, CSS, JavaScript, and image files to the GCS bucket.

Create a simple index.html file.

<html>
<head>
  <title>My Static Website</title>
</head>
<body>
  <p>Hello from Google Cloud Storage!</p>
</body>
</html>

Note:
Creates a basic HTML file.

Upload the index.html file to your bucket.

gcloud storage cp index.html gs://qwiklabs-gcp-00-0b1af693acbb-website

Note:
Copies the index.html file to the GCS bucket.

Task 3. Configure Bucket for Website Hosting

Configure the GCS bucket to serve your static website.

Enable website configuration on the bucket.

gcloud storage buckets update gs://qwiklabs-gcp-00-0b1af693acbb-website --web-main-suffix=index.html

Note:
Sets index.html as the default index page for the bucket.

Make the bucket objects publicly readable.

gcloud storage buckets add-iam-policy-binding gs://qwiklabs-gcp-00-0b1af693acbb-website --member=allUsers --role=roles/storage.objectViewer

Note:
Grants public read access to objects in the bucket.

Task 4. Access Your Website

Access your hosted static website via the GCS bucket's URL.

Get the public URL of your website.

echo "https://storage.googleapis.com/qwiklabs-gcp-00-0b1af693acbb-website/index.html"

Note:
Prints the URL to access your website.

Open the URL in your browser to view your website.

Open the URL in your browser to view your website.

Note:
This is not a command, just a text reminder to the user.

Task 5. Clean Up

Clean up resources to prevent unintended charges

Remove the bucket.

gcloud storage rm -r gs://qwiklabs-gcp-00-0b1af693acbb-website

Note:
Deletes the GCS bucket.

Solution of Lab

https://youtu.be/_IxxTlGICVM

David Nguyen