Building website in 2021 (mehanig.com)

We will be using a lot of latest technologies to build simple, ugly one-page website.

Let’s start with WHY: There is literally no reason to build a website for yourself in 2021, except if you want to build a website for yourself. So we will be doing exactly that.

First we need to came up with a set of requirements. Then create a plan and split up into smaller items. And then execute. This is all obvious. Let’s start with a set of requirements.

The content of the website will be a collection of links to my social accounts, work and some basic info about me.

I would prefer some basic design with interesting elements, I don’t have much of the content to put on the front page, so there can be some visual blocks, maybe custom font, few weird color just to make it stand out.

1. Design

Let’s have 2 pages, front page with 2 blocks — “Logo Visual” + Links, and let’s make the scalable like this:

And for vertical screens we can put those two block one under another.

2. React, Typescript, Webpack

Let’s be honest, no one is building websites with HTML + JS + CSS nowadays, we need to have a framework and React seems OK. We also need to have typesafety so we will Typescript, and to combine those two together we will use webpack.

3. Go server-less

To make it cost-efficient, the website will be just a set of static files and it will be served as a static website in Azure blob storage. This is a great way to create websites where the backend is not required.

Here is my list of things to consider before choosing whether or not website can be hosted in a blob storage

For my example answers are No, No, No, so we can simply create a website with blob storage.

4. Routing

I would think that there needs to be at least 2 routes a) / b) /about

For that we can use React-router.

The problem though is that it will only work inside App, so we will be able to go to / and then click /about link,

But if someone will share the link it will not work because blob storage will look at $web/about/index.html.

To solve this problem we have at least 3 options:

1. We can create a folder “about” and put /index.html there with about route (this is how it’s done in bgrenderer.com)
2. We can create file called about.html and add redirect rules in CDN from {1}.html -> {1}
3. We can point all 404 pages to special 404index.html, where we can serve routes or show error page based on the config.

For this website, just for fun, I will go with option 2 and here Is how we can do it:

• First let’s add react-router and wrap components around route

• (order of <Route> components is important, otherwise “/” will match all the routes)
• We need to create 2 identical pages, one for index.html, another for about.html (yes, this is a waste, but let’s not over-optimize things yet and fix it later) for that we will create 2 html files using webpack:

• For index we will use index.tsx, and for about — about.tsx, but notice that they are completely identical. But we can’t reuse same chunk. If we use index in both, in navigation event router will not work

The resulting build will create 4 files:

The problem though is with the fact that about.js and index.js are completely identical.

Let’s fix that later, for now, let’s make it work.

Last missing piece is to add re-write routes in the CDN.

Since I am using Azure, the only available CDN with custom page rules is Verizon Premium (as of January 2021),

Let’s create it and connect to out Blob Storage Static Website by putting website url into CDN Origin value

We now need to set rules in Verizon Rules Engine, click ”Mange” and we will be redirected to Verizon CDN panel:

There in Verizon UI creating simple rule in HTTPLarge -> Rules Engine will do the trick

Don’t forget to deploy rule from Rules Engine, and routing should be working

5. Cloudflare

Azure Blob storage is great and all that, but managing SSL is still not the simplest task there and for the purpose of simplicity I will use Cloudflare Full SSL/TLS mode which uses cloudflare self-signed cert on cloudflare server. This makes having SSL connection working in just one button.

I will also move DNS management into Cloudflare. End structure will the the following:

Browser → Cloudflare CDN → Verizon Premium CND → Azure Blob Storage (Origin)

6. Github actions

Let’s also create some kind of simple CI/CD pipeline so that there will be no need to manually deploy code each time.

It will have 4 steps:

1. Build
2. Deploy code from each commit to master
3. Flush Verizon CDN
4. Flush Cloudflare CDN

We can use Node.js CI from github workflows for step 1 which will be just calling yarn && yarn build

And for step 2 and 3, we can just use azure/CLI workflow step, we only need do provide AZURE_CREDENTIALS through secrets to workflow which is greatly described here:

Last step is to flush DNS using Clouldflare API,

Let’s create a token with correct scope

Add it to github secrets again,

And use through API by invoking network request during pipeline

Example of request we need to make is the following:

curl -X POST https://api.cloudflare.com/client/v4/zones/cfd7a75d18978e0f7744d0935f3b6ff7/purge_cache/ -H 'Authorization:Bearer ${{token}}' -H 'Content-Type:application/json' -H 'cache-control:no-cache' -d '{"purge_everything":true}'

There is workflow action to call curl in github so our action can look like this:

It doesn’t work though, and I assume this is something with formatting. Let’s deal with that later.

As for now we have our mehanig.com working, with few bugs, small issues and errors, but this is fine. At least we got something working and had fun during the development. Source code is here: Github