Exploring Freelancing
Navigate freelancing as a developer; find clients, manage contracts, ensure timely payment, and learn from experiences!
- 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 anALIAS 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:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
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.
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!
Exploring Freelancing
Navigate freelancing as a developer; find clients, manage contracts, ensure timely payment, and learn from experiences!