In this instruction-set, I’ll explain how you can host your Jekyll blog on GitHub Pages for free with your own domain!

Don’t have a Jekyll blog yet? It’s easy to make one yourself! Check out this article and get started in just a few minutes: Creating a Dev-Blog Using Jekyll

Setting up GitHub Pages

Navigate to GitHub and create a new repository. If it’s your personal blog, make sure to name it <username>.github.io (in my case, baruchadi.github.io).

Any other naming scheme would end up hosted at <username>.github.io/projectName see GitHub Pages for an in-depth explanation on how to set up a project page instead of a personal site.

Now all you got to do is push your local Jekyll project to GitHub!
With your CLI of choice, (assuming you have git installed) Navigate to your project’s directory & initialize a new Git local repo and configure it, make sure to replace the git URL with your own repo’s URL

$ git init
$ git remote add origin https://github.com/<UserName>/<ProjectName>.git
$ git add *
$ git commit -m "first commit"
$ git push -u origin master
  • I found that sometimes it takes GitHub a really long time to realize this is a Jekyll project, to escalate it, I’ve picked a theme under Settings -> GitHub Pages -> Theme Chooser and then undid it.
  • Also, If it does deploy but you get a blank screen, please make sure you have set the URL flag under your _config.yml file!

Jekyll would do the rest for you! It would now build and deploy your site to <username>.github.io.
In my case, baruchadi.github.io

Buying a Domain & Setting up DNS Records

So now your site is published under <username>.github.io. Sure, that works, but you probably want to have your own domain name instead of a subdomain on github.io!

Personally, I manage my domains on NameCheap. But any other domain registration site would do as well.
After buying your domain, you will need to modify a few settings to make it work with your GitHub Pages free hosting:

  1. Navigate to your DNS settings

    on NameCheap, go to Dashboard -> Click Manage next to your domain name -> Advanced DNS on the top

  2. We will set up a CNAME record (basically configuring our custom domain as an alias to our GitHub Pages domain)

    Click Add New Record -> select CNAME Record -> write www under Host -> write your GitHub Pages domain name under Value -> select TTL (I set mine under 30 minutes)

    TTL is how long it will take DNS servers to update with your new data.

  3. You might also want a URL Redirect Record if you don’t already have one. In my case, it redirects people from baruchadi.com to www.baruchadi.com so that no matter which one you go to, you’ll get to the same site.

    Click Add New Record -> select URL Redirect Record -> set Host as @ -> set Value to http://www.yourdomain.com and keep it as unmasked.

That’s it for DNS settings!

Now, go back to your GitHub Repo -> Settings, and scroll down to GitHub Pages section.
Under Custom Domain, make sure you write down your domain address (www.yourdomain.com). This will create a CNAME file on your master branch with your domain name inside of it. Keep that, that makes it so that if people navigate to <username>.github.io they would instead end up on your new custom domain.

Keep in mind, it might take up to 30 minutes for everything to update (determined by your TTL setting). Right after that is done, you should be able to access your site using your own domain!

EOF

Congratulations! Your site is now hosted on GitHub Pages for free, and you even have your own custom domain!

This is the last article in the “dev-blog” series. Stay tuned to find out what’s next!