Learning how to make your own website is both fun and useful. In this guide, I cover how to create and host a static website just like this one using Jekyll and Github Pages.

You can view this website’s code here.

Jekyll and Github Pages

Why not just use Wordpress or Blogger?

There are two types of websites: static and dynamic.

Webistes created with Wordpress and Blogger are all dynamic websites, meaning that every time a user requests to see a page, the server needs to find the page in the database, generate HTML code for it, and send it to the user.

This site is a static website, meaning that the HTML code for every page already exists, and can be directly accessed. This allows static websites to load much faster than dynamic websites. Static websites are also simpler than dynamic websites, making them more suitable for small websites.

Static websites are better!

Starting a website

Starting a new website can be a bit complicated, but don’t worry! I found an amazing tutorial which some random other person wrote, so please go and read that. Come back when you’re done …

Freenom stuff

By now, you should have already built a small website and successfully deployed it onto Github Pages. If not, go back and follow the steps in the amazing tutorial!

To register for a free domain name, go to freenom.com and pick a domain that ends with .tk, .ml, .ga, .cf, or .gq.

After going through all of the registration steps, the domain name should officially be yours.

Freenom

Next, you need to direct your domain name towards your Github Pages site. Go to freenom.com and click on Services then My Domains. Click on Manage Domain beside your domain name. Then click on Manage Freenon DNS. The DNS server directs your website traffic towards the Github Pages server IP addresses. You can think of domain names as physical addresses (such as 158 Glen Shields Ave, Concord, ON), IP addresses as coordinates (43.8051052,-79.4650133), and DNS servers as services like Google Maps which map addresses to coordinates.

Here are the records which you need to add to Freenom DNS:

Name Type TTL Target
[leave blank] A 3600 185.199.110.153
[leave blank] A 3600 185.199.108.153
[leave blank] A 3600 185.199.111.153
[leave blank] A 3600 185.199.109.153
WWW CNAME 3600 [your-username].github.io

Configuring custom domain name in Github Pages

Open your Github Pages website repository. Click Settings and scroll down to the Github Pages section. For custom domain, enter your domain name (without the http, https, or www.). Click Save.

Now try visiting your website. If nothing shows up, try waiting a few hours for everything to update.

HTTPS

HTTPS allows website visitors to browse your website over a secure connection. To force your visitors to use HTTPS, go back to your Github Pages settings and select Enforce HTTPS.

HTTPS

Now your website should be accessible on the public Internet! It’s time to start making some content …