Add Index Page Suffix and Error Page
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.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Error Page</ title > < style > body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; flex-direction: column; } h1 { font-size: 48px; margin-bottom: 20px; } p { font-size: 24px; margin-bottom: 30px; } a { font-size: 20px; text-decoration: underline; color: #007bff; } </ style > </ head > < body > < div > < h1 >Oops! Something went wrong.</ h1 > < p >We're sorry, but an error occurred while processing your request.</ p > < a href = "index.html" >Back to Home Page</ a > </ div > </ body > </ html > |
Now, go to Cloud Storage -> Bucket, click on the Bucket menu button as shown below and select Edit website configuration.
In the website configuration, specify the main page and error page as shown below. For our calculator app, the main page is index.html while the error page is error.html. Click the save button.
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.