Photo by David McBee from Pexels

Build your own website for free on GCP with Docker, Wordpress. With HTTPS, SSL

leangaurav
6 min readDec 12, 2019

Caution ⚠
before reading all this if you are not aware, go and look for static site generators and free static site hosting options like github pages, firebase etc. Maybe a simple thing like that is just what you need.

When I started out building my own website with wordpress, I struggled a lot! Somehow I managed to get a website up and running with HTTPS, SSL etc. Things all websites have. But it didn’t take long when things started to break and had to be fixed before anything could be done further. In short my setup had lots of holes.

Fixing all issues was one thing, but what if I ever need to setup again? I need to go through all of this again.. remembering and fixing the tiny bugs all the time?

Surely no one want’s that. So I decided to re-do the setup again in a clean, understandable way with minimal steps. These steps is what I have documented in this multi-part series.

I have broken the entire thing into four parts:
1. What you are reading right now
2. Creating VM/Compute Engine instance on GCP
3. Cloudflare and Domain Setup for your Website
4. Deploy Wordpress, MySQL, Nginx Containers with HTTPS, SSL on GCP

This part focuses on theory. This if for novices and gives you the basic understanding of how typing a URL in browser takes you to a website. If all you need is setup, jump to what you need.

Before we start let’s ask a few questions.

How long will it take to see a basic website 🕙 ?
Roughly take a day or two. Sounds long? It doesn’t mean you are sitting on your computer, working for two days on a stretch. There’s something called as DNS propagation which takes that much of time. If everything goes fine, you just do everything in an hour.

Will my website look like other normal websites ❔
That depends on how much effort you put in your website after setup. Setup will give you a basic website with 🔒 icon. A normal legit website. After that you will need to add content, decide color scheme, build menus, decide for themes and the usual learning curve for wordpress will follow.

Is it really for free 🆓?
I believe there’s nothing really free in this world. But yes, things here fall in following three categories:

  • Completely free 💯 : like DNS service from Cloudflare(they have paid plan as well, I didn’t need it till now)
  • Free for an year : GCP hosting will be free for an year with some *
  • Spend a small amount of 💲 : Domain name for your website(if you want to do it now)

Specifically for the domain part, how much you pay will depend on availability of domain etc. And that’s the only thing needed to be bought. At least for an year.

Why you should build your website ?

  • maybe for your business
  • maybe you are a professional and want to build portfolio website
  • as a student, want to put your stuff on a website
  • just want to play around
  • to understand some things before you hire a professional
  • you don’t have a reason to do so but since somethings are free and you want to spend time productively learning something(like I do :D)

How does a website opens in browser

There are a couple of things that happen and all that relates to what all is needed to build your website. Lets discuss about that and some other things that we are going to use.

1. Domain Name

So the first thing to understand is domain name. Domain name is basically an address that points to your website and it has multiple parts. Usually what you see in your browser’s address bar is a URL.

URL contains:

  • a protocol: http/https generally
  • a subdomain with tld: medium.com here and com is tld
  • and a path: anything after tld is the path. may or may not be there

Subdomain along with the tld (top level domain ex: .com .net .org …) comprises of what your website’s domain name is. You need to buy one or register one with a domain registrar. Some common domain registrars are: namecheap, godaddy etc. etc.

In my case I will be showing you the steps for google domains

Domain names are a wrapper that hides an ip address behind; IP address of a server.

Why?
Well… would you like people to remember website by something like 192.168.259.259 vs a name like medium.com?

The answer is obviously the latter. But a web server can only have an IP address and not a name. And what if you change your server which changes Ip address also. What would happen then.
For that exact reason we have a Domain Name Server(DNS).

Whenever you open a url in browser, request goes to a DNS which forwards it to a server which responds back according to your request, which is often determined by the path.

So first thing you need to build a website is to buy a domain name. And domain name for your website needs to be unique.
Actually you can build without domain name as well. But yes you will need to go to it via your server’s ip address.

2. DNS

There are a ton of websites out there and when you enter a url in your browser, that request needs to go to a server which contains your web-pages/ content that you wish your customers to see. That’s done by DNS.

DNS are servers that contain a mapping of domain names and IP addresses. So whenever a request comes in to a DNS, it would look up the mapping and forward your request to the correct Web-Server.

Again there are many DNS providers. Some free, some paid and some offering both. In this series we are going to use Cloudflare as our DNS.

This is the third thing you need. Because the second thing is the server where you will put your content.

3. Hosting/server

This is where your web-pages/content/logic stays. It is basically a computer connected to the internet and also has its own IP address so that you can reach to it via its IP address.

We are going to use GCP for that. You will need to have a google account and then we will login to GCP with that and create a VM(Virtual Machine) where we will deploy wordpress and other stuff to run our website.

This is the second step since once we get web server, we will need to get an IP address for it and then put it in our DNS server.

4. Docker:

This I cannot explain in detail right now. Maybe I’ll do that later. So you can look up on internet about it. We will use it on our VM instance/ server created on GCP. This is going to be the fourth step: Deployment

Complete flow

So the entire flow looks like this:

  1. You open a website in browser i.e. open a link/url
  2. Browser sends request url to a DNS.
  3. DNS looks up for IP address of server based on the Domain Name and forwards request to the server.
  4. Server processes your request and looks up for the thing you requested.
  5. Server generates a response and sends back the response (content/ error).
  6. Browser receives it and displays it to you.

With all of this done we can start setup. So head over to next part. Also please let me know in comments about something important I missed or needs to be corrected.

Next → Creating VM/Compute Engine instance on GCP

--

--

leangaurav
leangaurav

Written by leangaurav

Engineer | Trainer | writes about Practical Software Engineering | Find me on linkedin.com/in/leangaurav | Discuss anything topmate.io/leangaurav

No responses yet