Today I decided to migrate Cereal After Milk from a Ghost instance on a DigitalOcean droplet to Jekyll hosted on Github Pages. I'm pretty happy with the results so far, and I've decided to document briefly the process of getting a Jekyll site setup on Github Pages. I won't go too much in detail but I will point to the sources I read that will list down the specific steps in detail.
Why Move?
Mainly out of curiosity, and also trying to see if I can save $5 a month and have it contribute tp something more productive like a Netflix subscription. While I set up this blog initially using an Ansible script, I don't really want to do devops/maintenance for a humble blog that no one except me reads. Also, dealing with MySQL backups so I don't lose my blog posts when I accidentally and drunkenly do a DROP DATABASE cerealaftermilk is also quite a royal PITA.
What I like about Jekyll is that all posts are stored as files. Not having to deal with a database is really sweet! Github Pages also has native support for it, and customizing a theme for yourself is also a very straightforward process.
Setting Up Jekyll
Jekyll requires ruby and bundler, so make sure you have this installed. Run gem install jekyll, and create a new Jekyll site with jekyll new yoursite. Once your Jekyll site is generated, cd into your new directory and start a development server with bundle exec jekyll serve. Voila, your new site is now available on http://localhost:4000.
Theming
There are tons of free and paid Jekyll themes available online so I'm going to skip this part. However, if you want to start build your own theme from scratch (like me), read on:
- The default Jekyll theme - minima is installed as a gem. To edit your theme, we need to access the theme files. Copy all the folders in
vendor/bundle/gems/minima*/to your Jekyll root folder. - Remove the reference to the minima theme in your Gemfile.
- Restart your Jekyll server and happy customizing!
Deploy To Github Pages
Github by default gives you a free Github Page site under your own username - https://your-username.github.io. Claim and create your Github Page by creating a new repository called your-username.github.io, subsituting your username in of course. For Jekyll, Github will build and publish your site whenever you push your changes. When you're ready, launch your site by pushing your Jekyll folder into your repository. When you push for the first time, I believe you need to make a change in _config.yml in order for Github to build your site.
Github's instructions on how to setup Jekyll with Github Pages
Custom Domains And SSL
If you want to use a vanity URL for your new site, Github supports that too! Point your custom domain to your Github Page using A / CNAME records (see full guide).
By default, Github doesn't support SSL for custom domains, but the good news is that we can setup SSL for free courtesy to the wonderful folks at Cloudflare. Again, see the full instructions on the official Cloudflare website. There's no need to buy a SSL certificate yourself, awesome!
Bonus: Supercharge Your Posting Workflow With Prose
Prose.io is a free and open source service that simplifies posting to your Jekyll blog. Their online editor helps with writing, uploading images and even draft management so you don't need to write your post locally and then pushing to Github. This is optional, but I think this makes everything so much more convenient. Full instructions here
For simple blogs or personal sites, Jekyll + Github Pages is a really awesome (and free) alternative to consider. I have found it very easy to set up and fully customize almost every aspect of your blog.