Hosting a Jekyll Theme on GitHub Pages

The Jekyll Theme
New Repository on GitHub
Website URL in _config.yml
Some Commands
Custom Domain on GitHub Pages
Changing DNS on Namecheap
Conclusion

I’ve probably hosted six Jekyll websites as of now, but I still end up looking at this video on Hosting on GitHub Pages to make sure I don’t mess up anything. Annoyed, I’m going to pen down the step-by-step process today.

I recently hit a jackpot. I got a domain with just my first name! Even though this website is the same, there’s a huge difference between .com and .blog. It’s wild that nobody bought it till 2022 until I randomly stumbled upon it.

Having a uniquely unique name helps, huh?

Free SEO for life.

The Jekyll Theme

To start, I got this beautiful minimalistic theme called Clancy.

It is super clean and fully optimizable, and I’ll customize it to showcase my apps instead of photographs.

New Repository on GitHub

The first step is to create a new repository. I’ll name it repoName, which is private.

I already have the theme ready on my local machine so I won’t initialize the repository with a README file.

Website URL in _config.yml

One mistake I always commit is adding the custom URL in the baseurl value. For all my sites, adding it to url works fine.

baseurl: "" # <-  NOT HERE
url: "https://yourWebsite.com" # <- HERE

Some Commands

To upload the local folder on the remote repository, you’ve to execute some commands. First, change to the directory where the theme is located:

rudrankriyam@Rudrank-2 ~ % cd /Users/rudrankriyam/Downloads/Personal/repoName

The second thing is to initialize an empty Git repository:

rudrankriyam@Rudrank-2 repoName % git init

GitHub Pages requires you to create gh-pages branch:

rudrankriyam@Rudrank-2 repoName % git checkout -b gh-pages

Now, we’re working in the gh-pages branch. To upload all the files:

rudrankriyam@Rudrank-2 repoName % git add .

Then, add the commit message:

rudrankriyam@Rudrank-2 repoName % git commit -m "Initial commit"

To link the local Git to the remote one:

rudrankriyam@Rudrank-2 repoName % git remote add origin https://github.com/rudrankriyam/repoName.git

Finally, push the changes:

rudrankriyam@Rudrank-2 repoName % git push origin gh-pages

You’ll see the content in the remote repository now!

Custom Domain on GitHub Pages

The next step is to go to Settings on GitHub Pages. Pages now has a dedicated tab instead of just an option. Scrolling down, there’s an option to add your custom domain.

Add https://yourWebsite.com.

Hit the Save button.

It’ll check for DNS validity and then throw an error something like:

Both rudrank.com and its alternate name are improperly configured

Domain does not resolve to the GitHub Pages server. For more information, see Learn more (NotServedByPagesError). We recommend you add an A record pointed to our IP addresses, or an ALIAS record pointing to rudrankriyam.github.io.

So let’s do that.

Changing DNS on Namecheap

I’m using Namecheap for the domain provider, but the steps should be similar for your provider.

In Domain List > The Domain > Advanced DNS, search for HOST RECORDS. Then add four new A record that has host as @ and the values as:

199.108.153
199.109.153
199.110.153
199.111.153

Then, add a CNAME Record with the host as www and the value as the default domain for your site: .github.io or .github.io.

It may take some time for DNS propagation. It may even take up to 24 hours. Also, if you set TTL to Automatic, it may take time too.

Go back to the Pages tab and checkmark Enforce HTTPS. HTTPS provides a layer of encryption that prevents others from snooping on or tampering with traffic to your site. When HTTPS is enforced, your site will only be served over HTTPS.

Conclusion

And that’s it! Our new website is hosted on GitHub Pages for free!

If you have a better approach, please tag @rudrankriyam on Twitter! I love constructive feedback and appreciate constructive criticism.

Thanks for reading, and I hope you’re enjoying it!