When it came time to revamp my personal site, yichendong.com, I faced a bit of a problem. My old platform, fastpages, wasn’t supported anymore, and honestly, I couldn’t quite remember how the website worked. So, I decided it was time for a fresh start.

What the website looked like pre-rework

Choosing the Right Platform

I weighed my options: Hugo, Pelican, and Jekyll. Each had its strengths, but I initially leaned towards Jekyll for its established presence and GitHub’s seamless support.

The Journey with Github Pages

Creating a new GitHub page seemed like a straightforward task. I followed GitHub’s own guide and set up a new repository named yichen-dong.github.io. A quick git clone command, a simple “Hello World” in index.html, and a push to GitHub, and voilà! My site was up and running at https://yichen-dong.github.io/.

The initial GitHub page

Custom Domain Saga

I’d previously set up GitHub pages differently when experimenting with fastpages. Upon revisiting, I noticed my custom domain DNS check hadn’t gone through, despite yichendong.com resolving correctly.

GitHub pages settings

DNS Troubleshooting

I dove into GitHub’s documentation for apex domains, which suggested setting up an A, ALIAS, or ANAME record. A quick check on my Namecheap Nameservers revealed some old DNS settings linked to Netlify—time to clear that up.

Namecheap Nameservers

After tweaking some CNAMES and A Records as per this Namecheap guide, the DNS check was a success!

DNS check successful

However, at this point, I couldn’t figure out how to actually install Jekyll and set up the themes correctly. So I decided that I would explore my second option, which was Hugo.

The Hugo Experiment

Getting Started with Hugo

Installing Hugo on Windows was a breeze: winget install Hugo.Hugo.Extended. The quick start guide was equally straightforward, and soon I had a local site skeleton.

Hugo skeleton site

GitHub and Custom Domain Integration

After pushing my Hugo site to a new GitHub repository, I used this guide for hosting and GitHub actions. Then, I directed the GitHub Pages in the repo settings to my custom domain.

Setting custom domain in GitHub

However, the result wasn’t quite what I expected. There was an unwanted subpage. A simple CNAME addition to the base repo set to yichendong.com fixed it.

Setting Up PaperMod Theme

Choosing PaperMod

The PaperMod theme caught my eye. After downloading it and updating the config.toml file, I was halfway there.

Configuring the Theme

I needed to add more options to the configuration, as detailed in my hugo.yaml file. This involved setting up menu items, home page info parameters, and adding functionalities like ShowShareButtons and social icons. The PaperMod features page was a great help.

Running hugo server throughout this process was a game-changer for quick iterations and previews.

And there you have it! That’s how I quickly set up my data science website within two days (it would have been only a few hours, but I went down some wrong paths.) Hopefully this helps you set up a blog on Github Pages as well.