Hosting a Static Web Site

 Host a Static Website in Google Cloud with Cloud Storage


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.

Domain ownership or admin rights

As mentioned in the prerequisites, you'll need a domain that you own or manage.

 

Google Domains


Using Get a new domain I can search for any name to see if it is taken


Suppose I want to use language.com


I see someone has already taken it as well as .org and .net. Also other domain extensions have been taken but are available at substantially higher than the $12 a year Google price.



Google will also offer suggestions that are available




If the domain is available it allows me to purchase it.


 I can now add that to my cart and I will own the exclusive use of it for 1 year and then I will have the ability to renew for $12 a year.








I’ve already purchased languagecom.com which I will use for this example


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.languagecomm.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 languagecomm.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.

 

Click Manage then DNS

 

 

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.languagecomm.com, the CNAME record will contain the following information:

 

 

NAME

TYPE

DATA

www.languagecomm.com

CNAME

c.storage.googleapis.com

When you're done, it should look like this:

 

 

Create a Cloud Storage Bucket



Click on Create Bucket.

 

 

 

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.

 

 

Upload files

index .html

 

<!DOCTYPE html> 

 

<html>

 

   <head>

 

      <title>Language Communicator

 

      </title>

 

   </head>

 

   <body>

<H1> Language Communication Program</H1>

 

<P>This Program allows the operator to send translated communications out to a group of people in their preferred language.

Then it allows conversation chains to exist between operator and user in the preferred language with the chain translated on both sides.

</P>

   

   </body>

 

</html>

 

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.languagecomm.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.languagecomm.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.languagecomm.com, Cloud Storage attempts to serve the file www.languagecomm.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.

 


No comments:

Post a Comment

Office hours tomorrow(Tuesday) 5:00pm-6:00pm, 4/26/2021, 5:13 PM, English, 4/26/2021, 5:13 PM

Your assigned language is: English Classroom blog: googleclouduconn.blogspot.com 4/26/2021, 5:13 PM Office hours tomorrow(Tuesday) 5...