Host Jekyll on GitHub Pages With a Custom Domain
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:
-
Navigate to your DNS settings
on NameCheap, go to Dashboard -> Click
Manage
next to your domain name ->Advanced DNS
on the top -
We will set up a CNAME record (basically configuring our custom domain as an alias to our GitHub Pages domain)
Click
Add New Record
-> selectCNAME Record
-> writewww
under Host -> write your GitHub Pages domain name underValue
-> select TTL (I set mine under 30 minutes)TTL is how long it will take DNS servers to update with your new data.
-
You might also want a URL Redirect Record if you don’t already have one. In my case, it redirects people from
baruchadi.com
towww.baruchadi.com
so that no matter which one you go to, you’ll get to the same site.Click
Add New Record
-> selectURL Redirect Record
-> set Host as@
-> set Value tohttp://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!