Moving to GitHub Pages

2017-04-30

Moving to GitHub Pages

takuti.me is currently generated by Hugo, a fast static site generator written in Go, as I introduced a year and a half ago.

Until this point, this site initially started as a WordPress blog in 2012, and I switched to create the contents by using a static site generator, Jekyll, from 2014 to 2015.

In fact, all of the WordPress blog, Jekyll and Hugo sites were hosted on VPS having the basic CentOS + nginx (or Apache) environment. However, last week I eventually moved the site to GitHub Pages.

Basically, there were only 2 steps I needed to undergo:

Create my github.io page and upload contents
Set up custom HTTPS domain https://takuti.me/

(Nothing has changed from a user side.)

Surprisingly, moving a VPS-hosted site to GitHub Pages was really easy and comfortable than I expected for a long time. This new environment clearly motivates my weekly writing activity :)

Below I briefly writes down what I did to move this site.

Step 1: Hosting Static Pages Generated by Hugo on GitHub Pages

In order to host your Hugo-generated site on GitHub Pages, you first need to create own github.io space as explained here: GitHub Pages Basics. Moreover, Hugo officially provides a tutorial page: Hosting on GitHub.

In my case, I have two repositories on GitHub, takuti/takuti.me and takuti/takuti.github.io; the former contains "source" contents which will be used to generate a site itself, and the latter has "destination" contents generated by Hugo.

In other words, once I hit:

$ hugo

at a directory corresponding to takuti/takuti.me, a site is generated under a public directory, and the public directory itself corresponds to takuti/takuti.github.io.

Finally, pushing all contents under the public directory to the GitHub takuti.github.io repository automatically deploys and updates my page. Yay, I do not need to touch rsync command anymore!

Step 2: Using Custom HTTPS Domain via Cloudflare

If you set up DNS and GitHub github.io repository correctly, you can freely use custom domain on your GitHub Page. See using a custom domain with GitHub Pages for more information.

Here, I had a question before moving to GitHub Pages: Can we use custom "HTTPS" domains on GitHub Pages?

The answer is definitely YES thanks to Cloudflare. For more detail, Cloudflare officially introduces how to utilize secure HTTPS custom domain on GitHub Pages: Secure and fast GitHub Pages with CloudFlare.

Briefly, instead of using the original name servers provided by a domain registrar, we newly set up name servers on Cloudflare so that users' access to own domain goes though Cloudflare over SSL.

When I hosted this site on VPS, I installed free SSL certificate provided by Let's Encrypt. It was okay, but installing the certificate to an appropriate path, setting nginx.conf (or httpd.conf) and updating the certificate might be complicated. Thus, using GitHub Pages + Cloudflare should be preferable in terms of manageability.

Author: Takuya Kitazawa

Takuya Kitazawa is a freelance software developer based in British Columbia, Canada. As a technologist specializing in AI and data-driven solutions, he has worked globally at Big Tech and start-up companies for a decade. At the intersection of tech and society, he is passionate about promoting the ethical use of information technologies through his mentoring, business consultation, and public engagement activities. See CV for more information, or contact at [email protected].

Now Gift a cup of coffee

Disclaimer

Opinions are my own and do not represent the views of organizations I am/was belonging to.
I am doing my best to ensure the accuracy and fair use of the information. However, there might be some errors, outdated information, or biased subjective statements because the main purpose of this blog is to jot down my personal thoughts as soon as possible before conducting an extensive investigation. Visitors understand the limitations and rely on any information at their own risk.
That said, if there is any issue with the content, please contact me so I can take the necessary action.