How I built this blog with GitHub Pages, Jekyll Now & Route53

From AWS S3 to GitHub Pages

It all started with the 12 months free tier from Amazon Web Services (AWS). I looked through the “Host a Static Website” tutorial and learned how easy it was to get a static webpage up and running, that’s when I first published my resume webpage. Later, I wanted to start blogging and needed a different platform. That’s when I stumbled across GitHub Pages with Jekyll Now. Here’s my journey:

All started with S3 - my simple resume page

It was all surprisingly straightforward, with a couple of visit to StackOverflow to troubleshoot some s3 public access settings. In general:

Then I wanted to blog …

Things got a bit more complicated when I wanted to blog.

I helped my wife start a Squarespace site for her blogging needs, there really wasn’t much to setup. Sqaurespace is really a great platform - super easy to use, but more costly than I am willing to pay for this blog. So this time around I wanted something lightweight and free.

Browsing through Towards Data Science, I found this post - Five Minutes to Your Own Website talking about building on GitHub Pages and Jeykll Now. It looked easy, and reminded me of MkDocs, so I took a stab at it.

The process to get started was quick but requires a bit more familiarity with bash and git:

  • Create a new repository on GitHub with the repository name as “[yourgithubusername].github.io”
  • Fire up a terminal, cd to where you want to save your repo locally, then clone the repo.
    git clone https://github.com/username/username.github.io
    
  • Fork & duplicate or download the files from the jekyll-now repo, push the content up to your username.github.io repo.
    git add --all
    git commit -m 'first commit'
    git push -u origin master
    
  • Notes: Look at the README.md on jekyll-now repo to configure your config.yml and how to make a post, etc.
    • I found it helpful to install jekyll and serve up the webpage locally to learn/play around with the features. All the git commits and git pushes was too annoying when I just wanted to mess with some features.
      • You can do that by installing ruby then install github-pages gem install github-pages. When done you can use jekyll serve at the root folder of your repo to view your website locally at http://127.0.0.1:4000/
  • We are up and running now! Just need to add a domain name.

Adding a custom domain name for GitHub Pages with Google Domains, Route53.

Steps:

  • Create a Route53 hosted zone for your domain name.
  • Setup your Google Domain to use Route53’s Name Servers, should be under “DNS” on Google Domain.
  • Setup an apex domain (e.g. ericchan.page) by adding A Record Set into Route53:
    • Go to GitHub Docs and look up the A record addresses to use, at time of this post they are:
        185.199.108.153
        185.199.109.153
        185.199.110.153
        185.199.111.153
      
  • Inside your github page repo, change your settings, under “Custom Domain”, put in your domain name.
  • Refresh and wait for DNS Propagation to finish.
  • To make www.yourdomain.com work, see GitHub’s docs on adding a www. subdomain.

What’s next?

  • Learning Jekyll and how to customize it.
  • Jupyter Notebook in Jekyll & GitHub Pages

Other resources:

Thoughts, comments?:

Reach out on LinkedIn or email.