Step-by-step guide to build up your personal website with custom domain


I often compare open source to science. To where science took this whole notion of developing ideas in the open and improving on other peoples' ideas and making it into what science is today and the incredible advances that we have had. And I compare that to witchcraft and alchemy, where openness was something you didn't do.

Linus Torvalds

Get started with a free website

GitHub, perhaps the most famous web-based hosting service for git, offers you the possibility to host a free website through GitHub Pages, and easily manage its static content with Markdown. Moreover, it provides a series of custom Jekyll themes (some of them really well designed).
In order to get your website up, simply follow the instructions to register on GitHub. Once you have successfully logged in, you have to choose the theme that you prefer or the one that fits you most.
The choice was really hard for me, but at the end, I decided to pick Pixyll, kindly crafted by John Otander.
All you have to do is search the repository of the theme you’ve chosen, and fork it, as shown below.

Fork


At this point, inspect your forked repo, go to Settings and Rename the repo in order to match your username on GitHub, followed by .github.io

Rename


Ready to rock!
Open your favorite browser and look for https://yourusername.github.io: if you have correctly followed these simple steps, your website should be running within one minute. Obviously, the content you’ll find will be the one hosted on the repository you have forked. To create your own content through GitHub, visit your repo and add/remove/modify .md files from the _posts directory. To change the configuration on your website just edit the _config.yml file in the root directory to match your requirements.

For more information about Markdown and how it works, just follow this link.

Setting up a custom domain

If you’re happy with your free GitHub pages website but you’d want to switch to a custom domain, obviously the first thing you have to do is to buy that particular domain. There’s plenty of companies that allow you to buy and register a domain (some really cheap, others very expensive), for example Namecheap, GoDaddy, or Google Domains.
In my case, I bought it at Register.it, although I wouldn’t recommend it.
However, follow the instructions to buy the domain you’re looking for, which I’ll refer to as mydomain.com from now on. Once you are done with that, go to your repo on GitHub, under Settings, scroll the screen until you find Custom domain, enter mydomain.com and click on Save. In this way, you are given the chance to serve your site from a domain other than yourusername.github.io

Custom domain


(Don’t worry if GitHub doesn’t allow you to tick Enforce HTTPS, we’ll do it later)

At this point, you have to sign up at Cloudflare, which is an American company that offers CDN, DNS, DDoS protection, caching and so on: it’s very easy to use and provides a free plan (among a variety of scalable and expensive business plans) that perfectly suits your needs.
Upon registration, Cloudflare will ask you to link a domain (our beloved mydomain.com), and to change the nameservers with two brand new ones of their property, which we’ll call foo.cloudflare.com and bar.cloudflare.com

Let’s get back to the website at which you bought the domain, and navigate through the admin panel to change the nameservers for your domain. For example, if you bought it at Namecheap, this is an excellent guide to help you go through this step.
This is what I had to edit on Register.it:

Change nameservers


In order to obtain the IP addresses of the nameservers (if required), just write on your terminal (bash for MacOS and Linux, or PowerShell for Windows)

$ ping foo.cloudflare.com
$ ping bar.cloudflare.com


Cloudflare should now have full control of your domain and display a Status: Active on the Overview dashboard. The only thing left at this point is to add DNS records that point to the GitHub hosting. To do this, as shown in this guide, you have essentially two ways: with an ALIAS or ANAME record, or with an A record. We’ll use the second one.
According to the guide, you have to follow your DNS provider’s instructions to create two A records that point your custom domain to the following IP addresses:

192.30.252.153
192.30.252.154


On Cloudflare, click on the DNS tab, and use the form to add the two records. I also suggest you to create another CNAME record to automatically translate every request to www.mydomain.com to mydomain.com
Records should resemble something like this:

DNS records on Cloudflare


Here we go!
Your website is now published at mydomain.com, even though it is effectively hosted on GitHub. You can still make requests to yourusername.github.io which will be translated to your custom domain.


Make the best out of Cloudflare

To improve your ranking on the main search engines and to make your users trust your website, it is fundamental to get an SSL certificate (https:// instead of http://). Luckily, Cloudflare offers a shared Universal SSL Certificate for free plans, so you don’t have to pay for that. Of course, you still can upload a custom SSL Certificate, even though you can automatically renew it only if you have a Business (or higher) plan.
To activate it, click on Crypto in the dashboard, and select Full. Besides this configuration, you can also choose Full (strict) or Flexible: the differences between these options are marvelously explained here.


SSL Certificate


(It may take up to several days for your certificate to be approved, so be patient.)

Once the certificate is active, you can turn on the option Always use HTTPS, thus all HTTP requests are redirected to HTTPS (hence secured).


Always use HTTPS


Finally, another option I’d strongly recommend to use is the minification: in this way, your website’s general speed can increase drastically. On the Speed tab, under Auto minify, check Javascript, CSS and HTML, as shown below:

Auto minify

In case you have problems with the certificate

If there are huge delays in the delivery of your SSL certificate (aka it keeps showing up the elusive Authorizing Certificate), you can submit a request and follow this thread to receive support from the community and from the staff.


Conclusions

I really hope this guide helped you to build up your personal website. If you found this useful, I invite you to share this post. For any doubt (or if you spot issues with my bad English) don’t hesitate to contact me using the form above. See ya! 1

Artorias


  1. Oh, and don’t forget to Praise the Sun!