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.
Services
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.
GitHub Pages
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.
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 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 import your new domain into Cloudflare, and set up the records. 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.
The additional 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. Once you finish this, Cloudflare will give you two DNS servers to put into Namecheap.
We allow this by by enabling custom DNS settings in Namecheap. Go to the “Manage” portion of your domain, 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 (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.