- The Jekyll Theme
- New Repository on GitHub
- Website URL in _config.yml
- Some Commands
- Custom Domain on GitHub Pages
- Changing DNS on Namecheap
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
.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
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
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.
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 recordpointed to our IP addresses, or an
ALIAS recordpointing 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:
18.104.22.168 22.214.171.124 126.96.36.199 188.8.131.52
Then, add a
CNAME Record with the host as
www and the value as the default domain for your site:
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.
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!