Serverless Hosting, CloudFlare, DNS & Setting Up A Domain

In my last article I talked about Sanity CMS and building the content storage for my portfolio.

In this article I'll talk about serverless hosting, Netlify deployment, CloudFlare, and explain what Serverless, DNS, and Name Servers are. So with serverless hosting, we start with the most common question.

What is Serverless?

It's probably not exactly what you're thinking. Serverless doesn't mean it's server-less, serverless just means you don't have to worry about the server. Your job is serverless, someone else manages it for you.

A lot of different providers have serverless options, and they do it in different ways. Some can only host websites, some allow you to host a function, some you can even deploy a full server!

We're going to be discussing Netlify. Netlify offers the ability to host websites; like Angular, React, and other client-rendered sites, as well as offering serverless functions in a way that allows deploying full Express web servers, we'll use this in another article to create a NodeJS email server.

How Do I Serverless-ly Host a Website?

All you need is an account with GitHub, GitLab, or BitBucket, to sign in to Netlify. You can sign in without these and just upload your site directly, but it makes deploying sites harder to manage.

After you have an account, you'll see a neat little dashboard where you can add and manage all your websites! I'm a fan of Netlify, so I already have 4 sites (Including this blog and the Sanity studio I used to write it) running on there. Make sure you have a project to launch, and it's setup on somewhere like Github, and we can begin deploying it for the world to see!

To deploy a new site (Without having to upload the files everytime) we click the New site from Git button and login with any of the git services available, then you just select your project from the list, and the last part is to set your "Build Command" *and *"Publish Directory", which means the thing you type to build the site and the folder where the files will be. If you're continuing from my last article, the 2 entries would be sanity build, and dist.

That's it! Click deploy and your site will begin deploying for the world to see!

Now that your website is deployed, it's available for all! Netlify will set you up with a domain like mycoolnewsite.netlify.app _and you'll be able to see your published site. If you completed that step with one of the Git sites then it will also update your site automatically everytime you update the Git project! An always up-to-date, publicly available site. But what if you want your own domain and not just _mycoolnewsite.netlify.app?

What are DNS and Name Servers?

The first step to setting up a custom domain, is usually to purchase the custom domain. So pick a name and go buy it for yourself! I won't cover how to do that here but there's plenty of sites available, my personal favourite is NameCheap.

The next part is one my of favourites, CloudFlare. CloudFlare does DNS management, website speed optimizations, analytics, and protects your site from attacks like DOS (Denial of Service). Sign up for CloudFlare here and you'll be able to add your domain, and any other domain, for free. You'll need to change your domains name servers to point to the servers that CloudFlare gives you, the site you register your domain with, like NameCheap, should have instructions on how to do that.

So before you get too confused, lets slow down and talk about some things.

What is DNS, what is a name server, and how does any of this work?

Every domain has a set of name servers it points to. The name servers set and store all the details on that site. If you were born in Australia, then the Australian government would be your name server, they have your name along with all the details about you. By itself, a domain name doesn't do much except... exist. That's where DNS comes in.

DNS (Domain Name System) is a map, usually 1-to-1, for server addresses and domain names. Every website, even the serverless ones, run on a server. A server has a public IP address. Your laptop, desktop, phone, and even smart TV if you have one all have a public IP address. It usually looks like gibberish, something like 13.147.41.8. That's the servers unique address, that server is the only server in the world with that address.

The same way you can have multiple cities called Melbourne (Australia, South Africa, USA), there's only one place on earth with the GPS co-ordinates 37.8136° S, 144.9631° E. A GPS can tell you those co-ordinates are for Melbourne Australia, the same way a DNS server will tell you the domain mfcodeworks.com is for the server address 13.147.41.8 (It's not, just an example).

So a domain has name servers, and these name servers tell us which physical server we need to connect to so I can see that website. With your domain, and your site deployed on Netlify, the next step is connecting the two! Over in Netlify, click on your site and go to Settings, there should be an option for "Domain Management" on the left.

The easiest way to add a custom domain to Netlify is using the CNAME **method. A CNAME is kind of like a redirection, I can set the CNAME search.mfcodeworks.com to be an **Alias for google.com, so when I open search.mfcodeworks.com, I see Google! (Or a Google error page)

Setting a CNAME For Your Site

Copy the CNAME that Netlify gives you (It should be that mycoolnewsite.netlify.app domain), and open up your new CloudFlare account. Under the DNS tab of your domain, you can add new entries, most commonly A, CNAME, and TXT. A is for adding IP addresses (Like 12.143.14.5), CNAME is for adding domains (Like google.com), and TXT is for adding text data to a site, usually to prove to some third party app that you own that domain.

Add a new CNAME with @ for the name (@ means your domain) and add the mycoolnewsite.netlify.app domain as the target. Click save and that's it! You now have a sweet custom domain for your website! If you want to go a step further you can add another CNAME for the **www **sub-domain that still exists, and set the target to your domain. That means anyone going to www.yourdomain.com will see the same thing as going to yourdomain.com.

What Else Can CloudFlare Do?

CloudFlare automatically enables SSL and provides DOS protection to make sure your site is safe behind a firewall. Under Speed > Optimization you can enable features like automatic minification to make files smaller, and Brotli compression to make files even smaller to make your site load as fast as possible! (My portfolio can load the homepage in <1.5 seconds)

The Caching tab gives you options to set how long a user will save your site for, and an Always Online mode, which means even if Netlify does stop working, CloudFlare can still show your site to anyone that visits!

The Network tab also provides some options to make loading our site even faster! Regular HTTP (Website requests) will send us one HTML file and then your browser will load all the images, JavaScript, CSS, and everything else one by one as it needs them. You have to wait for everything to be done before you fully load a page. HTTP/2 lets the server tell your device what it needs to download, before it even knows it needs it! Google and CloudFlare have been taking it even further with HTTP/3, which is designed to make everything more secure and even faster than HTTP/2! How many people has my site served over HTTP/3 so far?

So far, it's still 0. But Google, CloudFlare, and Mozilla are all working on bringing HTTP/3 standards to modern browsers and make the internet a much faster place for all! You can read more about the HTTP/3 efforts here.

What Next?

Now you've deployed your own personal site publically on Netlify, you also added a custom domain with CloudFlare that has SSL security, fast caching, and compression to make it as speedy as possible. If you deployed a Sanity studio like the one we discussed last article, you can edit all your content for your Sanity site from anywhere, even your phone! Now you can build React apps, Angular sites, anything you can think of and deploy it for the world to see, all free of cost!

Next article I'll cover how I deployed a NodeJS email forwarding server to Netlify through Netlify functions, and created a serverless email form handler!

This article is cross-posted from my personal site over here. If you enjoyed this article, learned something, or you just want to help out someone; buy me a coffee! It will be much appreciated.