How To Host Website On Google
Host a Static Website in Google Cloud with Cloud Storage
1. Introduction
Every small-business owner should have a domain name and website—they are the foundation of your brand and your method to communicate with potential customers.
Your domain name and website are one of the primary ways that people find your business, discover what products and services you offer, find your contact details, and even transact business with you (e-commerce transactions).
If you're only starting your business now, then you're not expecting very much traffic, so you want to host a simple website. You can do that in Google Cloud, which makes the process very quick, easy, and inexpensive.
What you'll learn
How to Create a CNAME record
How to point that CNAME record to Cloud Storage
How to create a Cloud Storage bucket named like your domain
How to upload and set permissions on the static files for your website
How to test your website
Prerequisites
You need to be the owner/administrator of your domain.
You need a Google Account.
2. Setup
Google Account and new project
If you don't already have a Google Account, then you must create one. Sign into Cloud Console and create a new project.
You can also edit the Project ID.
Note: Remember, the project ID is a unique name across all Google Cloud projects, so the name above has already been taken and you will need to use a different one.
Make sure that billing is enabled for your Google Cloud project. For more information, see Modify a Project's Billing Settings.
Domain ownership or admin rights
As mentioned in the prerequisites, you'll need a domain that you own or manage.
If you don't have an existing domain, then there are many services through which you can register a new domain, such as Google Domains.
The following tutorial uses the domain www.cookingincloudhipster.com, which is managed through Google Domains and admin.google.com
Verify that you own or manage the domain that you will use. Make sure that you are verifying the top-level domain, such as cookingincloudhipster.com, and not a subdomain, such as www.cookingincloudhipster.com.
Note: If you own the domain that you are associating to a bucket, then you might have already performed this step in the past. If you purchased your domain through Google Domains, verification is automatic.
Go to Google Search Console. Enter your domain name and press continue.
If you used Google Domains to purchase your domain name, then it will allow for automatic ownership verification. However, if you're using another registrar, then you could have a few more steps.
3. Create a CNAME record
On the web, there are numerous systems that are used to make sure that you can get where you need to go. One of those critical systems is Domain Name Services (DNS), which helps with translating human-readable names like www.cookingincloudhipster.com into the numeric IP Address number of the server that is hosting that website.
Within DNS, there is the ability to add RECORDs to the DNS entry to help other services with being correctly configured. Some of the the common ones are MX or Mail eXhange RECORDs, which help email systems work.
In this section, you'll create a CNAME, which is a Canonical Name Record or Alias Record record, so that when someone only enters cookingincloudhipster.com—without the "www"—it will still lead to the right server.
Follow these steps:
Go to Google Domains. Click on the "My domains" task. If you need to Sign-in or if you are a first-time user, then use your email address to log in. Find your domain— www.cookingincloudhipster.com.
Click on "Manage," then click "DNS."
DNS Settings screen.
Toward the bottom, look for the "Custom resource records" panel.
Add a CNAME record. A CNAME record is a type of DNS record. It directs traffic that requests a URL from your domain to the resources that you want to serve. In this case, those are objects in your Cloud Storage buckets. For more information, see CNAME redirects.
For www.cookingincloudhipster.com, the CNAME record will contain the following information:
NAME
TYPE
DATA
www.cookingincloudhipster.com
CNAME
When you're done, it should look like this:
4. Create a Cloud Storage Bucket
Next, you'll create a Cloud Storage bucket to hold your static site files.
Follow these steps:
Go to the Cloud Console. In the left-hand menu, scroll down to the STORAGE category and click on the Storage task.
Click on Create Bucket.
Complete the following fields:
Name your bucket: Make sure that you name your bucket with your site name, which is www.cookingincloudhipster.com.
Choose where to store your data: Select Multi-region so that the content is available from more than one cloud region.
Choose a default storage class for your data: Select Standard. For more information, see Storage classes.
Choose how to control access to objects: Set the bucket permissions for the whole bucket and its contents the same. For information, see Access control lists (ACLs).
Click Create.
So far in this codelab, you have been using the Cloud Console graphical user interface. However, you can also control Google Cloud with Cloud Shell, which provides you with command-line access to your cloud resources directly from your browser.
This Debian-based virtual machine is loaded with all the development tools you'll need. It offers a persistent 5GB home directory and runs in Google Cloud, greatly enhancing network performance and authentication. This means that all you will need for this codelab is a browser (yes, it works on a Chromebook).
To activate Cloud Shell from the Cloud Console, simply click Activate Cloud Shell (it should only take a few moments to provision and connect to the environment).
Once connected to Cloud Shell, you should see that you are already authenticated and that the project is already set to your PROJECT_ID.
gcloud auth list
Command output
Credentialed accounts: - <myaccount>@<mydomain>.com (active)
Note: The gcloud command-line tool comes preinstalled in Cloud Shell and you'll surely enjoy its support for tab completion. For more information, see gcloud command-line tool overview.
gcloud config list project
Command output
[core] project = <PROJECT_ID>
If, for some reason, the project is not set, simply issue the following command:
gcloud config set project <PROJECT_ID>
Looking for your PROJECT_ID? Check out what ID you used in the setup steps or look it up in the Cloud Console dashboard:
Cloud Shell also sets some environment variables by default, which may be useful as you run future commands.
echo $GOOGLE_CLOUD_PROJECT
Command output
<PROJECT_ID>
Finally, set the default zone and project configuration.
gcloud config set compute/zone us-central1-f
You can choose a variety of different zones. For more information, see Regions & Zones.
Note: When you run gcloud on your own machine, the config settings would've been persisted across sessions. But in Cloud Shell, you will need to set this for every new session or reconnection.
Here's the command-line version of "create bucket."
gsutil mb gs://www.cookingincloudhipster.com
5. Upload your website's files and images
Now, obtain the static files from your website developer or marketing team. If you're doing it yourself, then there are plenty of great tutorials on HTML and CSS. Then, upload the static files into the bucket that you created in one of three ways.
Upload files with the Cloud Console
Go to the Cloud Console. In the left-hand menu, click on the STORAGE category, then click Storage.
Click on the bucket name, which is www.cookingincloudhipster.com.
Under Bucket details, click Upload folder.
Upload your website's folders and files.
Upload files by dragging and dropping them
You can also upload files by dragging and dropping them.
Upload files using the gsutil rsync
You can also the gsutil rsync command to copy large numbers of files from your local machine to Cloud Storage. You can use the -R option to recursively copy directory trees. For example, to synchronize a local directory named local-dir with a bucket, use the following:
gsutil rsync -R local-dir gs://www.cookingincloudhipster.com
6. Set access permissions
You can either make all files in your bucket publicly accessible or set individual objects to be accessible through your website. Generally, making all files in your bucket accessible is easier and faster.
If you choose to control the accessibility of individual files, then you can set the default object ACL for your bucket so that subsequent files uploaded to your bucket are shared by default.
Note: Visitors receive an HTTP 403 response code when requesting the URL for a nonpublic or nonexistent file. See the next section for information about how to add an error page that uses an HTTP 404 response code.
Bucket-level access permissions
Apply access permission to the entire bucket as a whole. That is safer and, given that it is a static website, all of the contents likely need to be readable for the site to properly load. If you have some design metadata (or hidden files like .DS_Store, which is used on Macintosh, .is a file that stores custom attributes of its containing folder, such as the position of icons or the choice of a background image.) They can be individually hidden or deleted.
Click Bucket details, then click Permissions.
Click Add members.
Add allUsers with Storage Object Viewer rights.
Verify that you see the following:
The files are now visible to the general public. Hooray!
7. Edit website configuration
Now, the last step is to assign an index page suffix, which is controlled by the MainPageSuffix property, and a custom error page, which is controlled by the NotFoundPage property. Assigning either is optional, but without an index page, nothing is served when users access your top-level site, in this case— http://www.cookingincloudhipster.com/.
Index pages
An index page (also called a webserver directory index) is a file served to visitors when they request a URL that doesn't have an associated file. When you assign a MainPageSuffix, Cloud Storage looks for a file with that name and a prefix that matches the URL that the visitor requested.
For example, say you set the MainPageSuffix of your static website to index.html. Additionally, say you have no file named directory in your bucket www.cookingincloudhipster.com. In this situation, if a user requests the URL http://www.cookingincloudhipster.com/directory, Cloud Storage attempts to serve the file www.cookingincloudhipster.com/directory/index.html. If that file also doesn't exist, Cloud Storage returns an error page.
The MainPageSuffix also controls the file served when users request the top-level site. Continuing the above example, if a user requests http://www.cookingincloudhipster.com, Cloud Storage attempts to serve the file www.cookingincloudhipster.com/index.html.
For more information on the cases in which the index page is served, see Website configuration examples.
Error page
The error page is the file returned to visitors of your static site who request a URL that does not correspond to an existing file. If you have assigned a MainPageSuffix, then Cloud Storage only returns the error page if there is neither a file with the requested name nor an applicable index page.
When returning an error page, the HTTP response code is 404. The property that controls which file acts as the error page is NotFoundPage. If you don't set NotFoundPage, then users receive a generic error page.
In the following sample, the MainPageSuffix is set to index.html and NotFoundPage is set to 404.html:
gsutil web set -m index.html -e 404-Page.html gs://www.example.com
8. Test your website
Now, open a browser and go to your website— www.cookingincloudhipster.com.
Confirm that you see the following page and individual product pages:
Voila! It works and is available via HTTP.
Cleanup
Delete the following Google Cloud resources:
The Cloud Storage bucket
The CNAME record
9. Congratulations!
You created a static website and hosted it in Google Cloud!
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Was this article helpful?
Send us FEEDBACK !
by: KhoshboTech
Write here your review about post.