A step-by-step guide for hosting a static website on Google Cloud Storage for better performance at a lower cost.
Nowadays, hosting a website has never been easier. Yet with all the advanced and feature-rich services out there, we often forget about the simpler services. The same goes for running a website based on Google Cloud storage services.
Table of Contents
{tocify} $title={Custom Titles}
What Is A Static Website?
If you are hosting a static website (HTML/CSS/JS/Images), you don't need to worry about the cPanel web hosting plan to manage your site. Instead, you can use Google Cloud Storage (GCS), which will be cheaper, faster, and easy to maintain.
A static website is suitable for personal sites, business sites, information pages, or any other website where you don't plan to generate a transaction or dynamic content. It does not require server-side processing or database connectivity.
Static websites are a good option for sites such as blogs - where the page rarely changes after publication, or where there is no dynamically generated content. Static web pages can contain client-side technologies such as HTML, CSS, and JavaScript. They cannot contain dynamic content such as server-side scripts, like PHP.
What Is Google Cloud Storage?
Google Cloud is a flexible cloud storage product with many options for how you can manage and store your data.
In this article, we explain the difference between Google Cloud and other Google cloud storage products to help you better understand your storage options when searching for the best cloud storage company.
How Does Google Cloud Storage Work?
Google Cloud Functions
Google Cloud is a web-based online file storage service for storing and accessing your data using the Google Cloud Platform infrastructure. It provides unified, scalable, and highly sustainable object storage on a global scale.
It is one of the largest public cloud storage systems in the world, along with Amazon, Microsoft, IBM, and Oracle, and offers unified object storage to enterprises and developers.
Aimed at developers and enterprises, Google Cloud offers several storage tiers, allowing you to determine the most appropriate pricing model for your data. These tiers include Standard, Nearline, Coldline, and Archive, and differ based on how often you want to access your data, as well as the speed and durability of the storage you need.
Not to be confused with Google Cloud, Google One is a consumer cloud storage service that includes Google Drive, Gmail, and Google Photos.
Google Cloud Platform Benefits
Key features include the ability to optimize price and performance between storage classes with built-in object lifecycle management. This allows you to automatically switch to less expensive classes if you meet the criteria.
There are also multiple automatic redundancy options with Google's growing list of server locations around the world, allowing organizations to optimize for fast response times or create a robust disaster recovery plan.
It's helpful to determine how many actions or operations your business is likely to perform with its data to understand if Google Cloud is right for you.
The following instructions will help you to host a static website on Google Cloud Storage in less than 15 minutes.
Steps To Host A Static Website On Google Cloud
Before we get started, we need to make sure we are set up correctly in Google Cloud Console. Make sure of the following:
- You have created a GCP project
- You have a billing account set up
- You have a domain that you own or manage (it must be a top-level domain). To verify that you manage the domain, check here.
Now that we've covered the logistics, there are four steps to setting up a static website application.
Step 1: Point your domain to GCS
The first step is to connect your domain to cloud storage. To do this, create a CNAME record that points to c.storage.googleapis.com. Your domain registration service can help you do this.
www.example.com CNAME c.storage.googleapis.com.
Step 2: Create the bucket linked to your domain
The second step is to create a Google Cloud Storage bucket. To do this, go to the google cloud console, click on cloud storage, and then click on create a bucket. Make sure the Google Cloud Storage bucket name matches the CNAME created for your domain. In this case, the storage bucket should be called www.example.com.
Step 3: Upload and share your site files
The third step is to upload the files you want to use on your website. We can do this in two ways.
First, by uploading the files directly using the google cloud console.
The second is to use the gsutil command line, which is ideal when you have an existing website.
gsutil rsync -R local-dir gs://www.example.com
Access control:
Once files are uploaded, we need to make sure they are properly shared for access. You can either make all the files in your cart publicly accessible, or you can define individual objects that will be accessible on your website. In general, it is easier and faster to make all the files in your cart accessible.
At this point, we essentially have a working static website, but it is recommended that we assign an index page suffix and a custom error page to better guide users.
Index page suffix and custom error page:
This is useful in scenarios where you do not have a file named apple in your bucket
www.example.com. In this situation, if a user requests the URL http://www.example.com/apple, Cloud Storage attempts to serve the file www.example.com/apple/index.html. If this file does not exist either, Cloud Storage returns an error page with a 404 response.
You can read more about configuring this system here.
Step 4: Testing the website
The last step is to test our static website. Verify that the content is served from the bucket by requesting the domain name in a browser.
Serving HTTPs content on GCS
It is important to note that GCS only supports the HTTP protocol. In order to serve HTTPS, and benefit from all the security, we must either use direct URIs using CNAME redirection or migrate to using a load balancer as a front-end, as shown in the image.
Conclusion
In this article, we learned how to start small and deploy a static website on the Google Cloud Platform. We used Google Cloud Storage to host the static website and pointed the domain name to the storage bucket.
