This is a high-level overview on how to set up a GCP organization & host a static website. More specifically, this demonstrates how I set up my organisation, created my website and the tools used to do so, in the following steps:
The first step is to register a domain name with a registrar. I bought my domain name on namecheap. There are many popular domain registrars you can choose from depending on the pricing structures, bundles and web hosting options and other add-on services. Some examples are GoDaddy, Domain.com and Google Domains.
Some of the reasons to go with namecheap are its ease of use, free Whois privacy and as the name suggests, it’s relatively cheap.
Namecheap offers a default DNS service, as is with most domain name registrars. But, these are very basic free DNS services and usually lack advanced DNS capabilities; this is where Cloudflare DNS comes in. Having the fastest authoritative DNS in the world, built-in DDoS protection and its 100% uptime, are just a few of the reasons to choose Cloudflare DNS.
Some alternatives to Cloudflare DNS are Google Cloud DNS, Amazon Route 53, OpenDNS etc.
You can use this guide to change the nameservers to Cloudflare.
Identity management has to be set up to enable organisations to use single sign-on (SSO using SAML or OIDC), authentication and access controls. To use Google Cloud, you must use a Google identity service. My “Identity as a service (IDaaS)” provider of choice for my organisation was Cloud Identity (free edition). You could, however, also use Cloud Identity Premium Edition or Google Workspace (formerly called G Suite).
Other identity management offerings outside of Google Cloud are:
but these pose other requirements. If you are already using a non-Google identity provider, you still need a Google identity account using Cloud Identity or Workspace.
Follow section 1 in the Google Cloud provided checklist to set up a Cloud Identity account and verify your domain.
Once you verify your domain, an organization resource gets automatically created for you in GCP.
In the same checklist, follow sections 2-6 to add users and groups to your identity account, set up administrator access, billing, resrouce hierarchy and IAM. You can follow the rest of the checklist if required, but in this case, there is no need to sign up for any support services, set up networking or other configurations.
This is what my organisation structure looks like (up to project level):
After setting up your organization, the next step is to host the website.
Note: My static website was built using Hugo.
I opted to host my website on Google Cloud Storage (GCS) to make it all GCP linked. However, you can host a static website on other platforms, such as Netlify, AWS S3, GitHub Pages etc. The key reasons for choosing GCS are the fast, low-cost and highly available storage options it offers.
Follow the steps below to configure a GCS bucket to host your website:
I have a development website/subdomain separate from the main website that houses all content until it is ready to be released and published into the main website, and because I have both testing and production projects/websites, I have one bucket per project, with the corresponding domain names as bucket names.
I have to manually deploy content to both development and production on my website which can be quite challenging if operating in a large organization and as code grows larger and more complex. These manual operations can be avoided by implementing CI/CD into the code.
CircleCI was my CI/CD tool of choice but you can use Jenkins, GitHub Actions, Travis CI etc. depending on your requirements.
My CI/CD pipeline is a fairly straightforward - once a Pull Request is raised on my GitHub repository, the blog post gets published to my development website. The only manual action to do is to verify if the blog content is as expected, and if it is, click the “Approve” button and the changes are pushed to the main website.
This is what the CircleCI workflow looks like:
And that’s it! These are just simple steps to get up and running with your GCP organization and static website.
All code for my website is publicly available on my GitHub.