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
|
|
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 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.
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.
We allow this by 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 main emails.