Personal websites are a great thing to have – they are a space on the internet to do whatever you want with. You can show off a portfolio, make a fun game, or even host funny pictures. This is a simple breakdown of how I deploy and host my website (and its subdomains, like this blog site) for only ~$10/year.

Services

Getting a Domain

I use Namecheap to register and buy my domains. They have an easy search for domains, and also provides free Whois Guard. This helps prevent people from getting personal information about you.

GitHub Pages

I host my websites with GitHub Pages. All my sites are static, and Pages is the best free deployment tool. It links to a specific branch in your repository and updates the deployment on every new push. Technologies that are great to generate static websites are Jekyll and Hugo.

CDN & Website Security

At this point, you have all the tools to host a website online under your own domain. To ensure the best security for your page and also the best experience for the user, I like to use CloudFlare. It’s a company for custom CDN and security. It has features such as advanced analytics, auto minification, caching, and enforcing HTTPS.

CDN Setup

Connecting Everything

Your GitHub repository should contain a CNAME file which contains the name of your website domain. For example, for my main site, it would have

1
neerajaggarwal.com

Then in the settings of your repository, make sure that the project deploys off of the production branch.

GitHub Repository Settings

Next, route the DNS servers so that GitHub can find to which domain to host. The first step is to import your new domain into Cloudflare and set up the records. GitHub’s help page describes the process, but here’s an easier step by step to add your apex domain to Cloudflare.

In the DNS management of your domain in Cloudflare, create 4 new A records that point to GitHub servers.

A records that connect to GitHub

The CNAME record at the bottom that points to your GitHub base URL ([username].github.io), creates a subdomain www that redirects to your page. Once done Cloudflare will give two DNS servers to put into Namecheap.

Connect Namecheap to Cloudflare

We allow this by by enabling custom DNS settings in Namecheap. Go to the “Manage” tab, and change Nameservers to be custom.

Enabling custom DNS in Namecheap

And that’s it! In a few moments your website should show up under your domain on the interwebs.

Creating a Subdomain

Let’s say that you want to have a blog under blog.[your-domain]. With this setup, its super easy to do.

First, create a new repository for the source code for the website under the subdomain. Follow the same steps for the main domain, except in CNAME put blog.[your-domain]. Make sure that in the GitHub settings it says that it will deploy to the URL that you want it.

Then in your Cloudflare DNS management, add a CNAME record that links to your GitHub deployment URL ([username].github.io). And that’s it! That’s everything to create a whole new website under a subdomain.

Using Domain for Mail

Now that you own your domain, you can receive email with your @[your-domain] address. To do this, you have to add MX records in Cloudflare. You can use ImproveMX to do this for free and set up mail forwarding to one of your main emails.