I think personal websites are a great thing to have. They give you a page on the internet to do whatever you want with it - whether it be show off a portfolio, make a fun game, or even just host funny pictures. This is a simple breakdown on how I deploy and host my website (and all of its subdomains, like this blog site) for only ~\$10/year.
Getting a Domain
I use Namecheap to register and buy all of my domains. They have an intuitive interface to find the right domain, and also provides free Whois Guard after your purchase. This helps prevents people from getting personal information about you from having this domain.
I host all of my websites with GitHub Pages, because they’re all static and GitHub Pages is a great free deployment tool. In addition, it provides for the simplest way to update and change content on the website, since it links directly to a specific branch in your repository. 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, by linking Namecheap and GitHub. However, to ensure the best security for your page and also the best experience for the user, I like to use CloudFlare in the middle. It’s a company for custom CDN and security. It has great features such as advanced analytics, auto minification, caching settings, and forcing 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 is deployed off of the branch which you want to be production.
Next, we need to route the DNS servers appropriately, so that GitHub can find to which domain to host. The first step is to enable custom DNS settings in Namecheap. Go to the “Manage” portion of your domain, and change Nameservers to be custom.
Once you enable this, you should be given two different DNS servers to which you can connect Cloudflare. Go to your Cloudflare domain account, and then add the servers.
The last step is to add records so that GitHub can connect with Cloudflare, and you can properly link your custom domain. You can see GitHub’s help page here, but here’s an easier step by step process 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 (typically [username].github.io), creates a subdomain
www that will redirect to your main page. 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 set up, 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 (typically [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.