Skip to content
Fred Zhao
TwitterLinkedIn

Hello Github Project Page

— 2 min read

As my Dreamhost account drew near its annual renewal date, I took the opportunity to look into other hosting options.

GitHub Pages was an obvious winner because of its unbeatable price: free! I then followed this blog post by Joshua Lande to set up this site using Jekyll + Poole.

The preview looked great!

Custom domain name for Project Page

The only tricky part was mapping from my domain onto my Project Page and not my GitHub User Page. A quick Google search for the term github project page custom domain then turned up the exact article I needed, "Custom domain for GitHub project pages".

One point of confusion I had was that, in all of the articles, they explained that the DNS records should point to the GitHub User Page, but it wasn't clear how this connected to the Project Page. The second-highest answer on the Stack Overflow page explained this more in detail:

For the CNAME record, point www to yourusername.github.io. Note the trailing full stop. Note also, this is the username, not the project name. You don't need to specify the project name yet. Github will use the CNAME file to determine which project to ship content for.

After following the steps there, it looks like the changes will take some time to propagate.

Config adjustments for Project Page

When I previewed the new page on the github.io domain, I noticed the CSS resources were not fetched. The Jekyll docs explained how to fix this, so to manually patch up all the occurrences that didn't match up with the documentation, I ran the following find-and-replace script:

1$ sed -i -e 's:baseurl }}\([^{/]\):baseurl }}/\1:' \
2  $(git grep --name-only "baseurl }}[^{/]")

As a caveat, I had to use two different configurations for _config.yml depending on if I wanted the github.io page or my actual personal domain to display correctly. My current working theory is that it's impossible to both, so the main goal is to achieve the following

To demonstrate the changes I made in patch form (first displayed correctly on github.io, then on my own domain):

1# username.github.io/projectname (frdzy.github.io/fredzhao.com)
2-baseurl:  / +baseurl:  /projectname
3

4# mydomain.com (fredzhao.com)
5-baseurl:  /projectname

Testing everything

As a sanity check, I made sure these all worked (including serving up the page with the correct CSS):

  • Clicking on a post permalink Clicking back to the homepage Clicking "Older" to
  • see an older post Clicking "Older" again to see an even older post Clicking
  • "Newer" to step back Clicking "Newer" to step back one more time Loading
  • /atom.xml Loading /derp (which doesn't exist) and make sure the "Head back
  • home" works
1baseurl=/ GET
2http://0.0.0.0:4000/2014/09/14/hello-world/public/css/poole.css [Status: 404]
3

4baseurl=/fredzhao.com GET http://fredzhao.com/fredzhao.com/public/css/poole.css
5[Status: 404]
6

7baseurl=/ GET http://public/css/poole.css net::ERR_NAME_NOT_RESOLVED

(2015.01.03) Edited to update post title and clarify relative pathing issue