I think every developer (or professional) should have a domain name and website – they are the foundation of your personal brand and your method to communicate with potential employers.
You can use your personal website to showcase your skills and portfolio of projects you have worked on. Google Cloud Storage (GCS) offers you a quick, easy and inexpensive way to host your static website.
What you’ll learn
- How to create a Cloud Storage bucket and configure it to serve your website files
- How to upload and set permissions on the static files for your website
- How to test your website.
Prerequisite
- You need a Google Account.
- Create a Cloud Storage Bucket
In the Cloud Console, in the left-hand menu, scroll down to the STORAGE category, hover over Cloud Storage and click on Buckets.
- Click on Create Bucket
- Complete the following fields:
- Name of bucket: mycomputershop-com (choose a unique name)
- (NOTE: When you are ready to host an actual website in a bucket you name the bucket your unique domain name which you will confirm with Google Cloud that you own. See: domain-name-verification.)
- Click Continue
- Choose where to store your data:
- Choose a default storage class for your data: Set a default class, Select Standard and click Continue
- Choose how to control access to objects: Set the bucket permissions for the whole bucket and its content the same. Under Access control, Select Uniform and click Continue
- Click create.
- A pop up – Public access will be prevented with Enforce public access prevention on this bucket pre-selected. Click Confirm.
- Upload your website’s files and folders.
- Get your website code, e.g. https://github.com/ugogineering/computershop3
- Unzip. Test on local. Upload files and folders to GCS.
- 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.
- Bucket-level access permissions. Apply access permissions 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 load properly.
- Click the Bucket details, then click Permissions.
- Under Public access, click the dropdown arrow and click Remove Public Access Prevention. A confirmation pop-up appears. Click Confirm.
- With Permissions still selected, find the ADD PRINCIPAL button and click it
- In the New principles field, type and select allUsers.
- In Assign Roles, in Select a role field, type and select Storage Object Viewer
- Click SAVE. Accept ALLOW PUBLIC ACCESS
- Verify that you see the following:
- 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.
- To the far right of the static site bucket row, click the three dots and select Edit website configuration
- In the Index (main) page suffix field type: index.html
- In the Error (404 not found) page field type: error.html
- Click SAVE
- Test your website
- Click on static bucket name to see bucket details.
- To the far-right of the index.html row, click the three dots, click ‘Copy public URL’
Now, open a browser and paste the public URL:
- Delete the Google Cloud resources you used in this exercise to save cost.
References