Creating a bucket in Google Cloud

A bucket will act as a container in the Google Cloud. A bucket holds files, folders and any other data objects in the cloud storage. To save our website files in the cloud, we need to create a bucket first. Go to your Google Cloud Console.

Start a New Project: (Refer to the Image Below)

In the Console, go to the project list on the top left and select the dropdown button. Now click on the New Project button. It is a better practice to have a separate project for each of our needs. Creating a separate project will make it easy to manage our website. We can easily delete the entire project if we want to delete our website.

Create New Project

Give any name to your project. For reference, I am naming my project as geekcalc website. After creating, switch to the project you created from the Project list in the top left. Now click on the Navigation menu (shown above) and go to Cloud Storage -> Buckets. Create a bucket by clicking on Create button on top left.

Name your bucket. Here, for reference, I am creating a bucket with a name called geekcalc. Click continue and select Location type as Multi Region. Click continue and choose storage type as Standard. Now click continue and uncheck Enforce public access prevention on this bucket as shown below.

Now leave everything as default and click on the Create button. This will create our bucket.

Static Website Hosting with Google Cloud Storage: Hosting a Web App

In this tutorial, we will host a static website in Google Cloud Storage(GCS). If you want to host your resume as a portfolio website or if you want to have a website for your small to medium company, then hosting a static website is the best solution. This is very useful if you don’t have much traffic to your website and you don’t want to pay much for web hosting.

In this article, we will host a basic calculator web app in Google Cloud.

Similar Reads

What is a Static Website?

Static websites support front-end languages like HTML, CSS, and client-side scripting languages like javascript. Static websites include blogging, portfolio showcases, and other information websites. Static websites are best for small projects that do not require much interaction....

Why Choose Google Cloud For Hosting?

Though there are a lot of hosting platforms, many of them charge equally for static and dynamic websites. Also, if you are getting started with web hosting, then pay-per-use is the best option. Cloud platforms like Google Cloud, offer pay-as-you-go pricing. With this, you will pay only for the number of requests to your websites and the amount of resources you use. Also, you can have many other options to explore from the Google Cloud, which include saving your files in the cloud, running your own Operation System from the Cloud and other cloud computing processes....

Pre-Requisites

A Google Cloud account with billing enabled Your static website files (which include code, images etc., for your website) A domain name of your choice(Optional)...

Step 1: Creating a bucket in Google Cloud

A bucket will act as a container in the Google Cloud. A bucket holds files, folders and any other data objects in the cloud storage. To save our website files in the cloud, we need to create a bucket first. Go to your Google Cloud Console....

Step 2: Upload the Website Files

After creating the bucket, click on the upload files button and upload your website-related files. Here, I am creating three files for the calculator app. The files for the web app include index.html, styles.css and script.js. Refer below for the code in each file....

Step 3: Add Index Page Suffix and Error Page

...

Step 4: Test your Website

...

Mapping Your Domain Name (Optional)

...

Creating an SSL Certificate (Optional)

Adding these pages is very helpful for navigation for your custom domain. An index page suffix will act as your home page. The error page will be used to display errors for any kind of issue like 404 not found error etc.. Through the error page, we can navigate to the home page easily. Below is a sample code for the error page. Save the code in the error.html file. Upload the file in our bucket....

Conclusion

...

FAQs on Static Website Hosting with Google Cloud Storage

Visit the following URL to check whether your website is live and running....

Contact Us