Personal websites are great – 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 host and deploy my website (and subdomains like this blog site) for only ~$10/year.
Getting a Domain
I use Namecheap to register and buy domains. They have an easy search for domains and provide free Whois Guard. This helps prevent people from getting personal information about you from the domain registry.
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 redeploys on every 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.
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
Then in the settings of your repository, make sure that the project deploys off of the production branch.
Next, route the DNS servers so that GitHub can find which domain to host it on. 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.
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.
We allow this by enabling custom DNS settings in Namecheap. Go to the “Manage” tab, and change Nameservers to be custom.
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 emails.