This post is about using Jekyll with Github Page to build a personal blog. With the idea that not to invent the wheel again, I manage to find a great Jekyll blog theme in Github designed by HyG. It supports Disqus comments and Google Analytics with nice and concise front end design.
Steps
HyG has already explained detailed step by step guide in this page, I would like to add something I meet during the development process.
Get a Disqus short name
You could follow this guide to register your site and install Disqus on your blog.
Get a Google Analytics id
You could follow this guide to set up your google analytics id and use it to track the visiting statistics of your site.
Modify the content
First, modify your personal information in _config.yml.
Then, delete the original author’s post in _post folder and modify the html files in page folder to reset the content in “collections”, “demo”, and “about” page.
Ready to make your first post
Writing post is simple in Jekyll, instead of writing it online in browser, you could use your favourite editor with markdown syntax and put the file in _post folder, done!
But there are something need to be noticed, every Jekyll post markdown file need to follow naming convention YEAR-MONTH-DAY-title.MARKUP and with required front matter like :
---
layout: post
title: "using jekyll to build a personal blog"
date: 2017-07-28 11:28:20
categories: jekyll
tags: jekyll
mathjax: true
---
I found it’s tedious to manually write this down for every post, so I do some search and find a way to automate this process. The useful tutorials come from Guy Routledge and Jonas Forsberg. The basic idea is to use Ruby Thor to build a command line tools to do this boring job for us.
Here are the steps I did:
Install thor and stringex with gem :
gem install thor
gem install stringex
Create a jekyll.thor file with the following contents:
require "stringex"
class Jekyll < Thor
desc "new", "create a new post"
method_option :editor, :default => "subl"
def new(*title)
title = title.join(" ")
date = Time.now.strftime('%Y-%m-%d')
time = Time.now.strftime("%Y-%m-%d %H:%M:%S") + " " + Time.now.zone
filename = "_posts/#{date}-#{title.to_url}.md"
if File.exist?(filename)
abort("#{filename} already exists!")
end
puts "Creating new post: #{filename}"
open(filename, 'w') do |post|
post.puts "---"
post.puts "layout: post"
post.puts "title: \"#{title.gsub(/&/,'&')}\""
post.puts "date: #{time}"
post.puts "tags:"
post.puts "---"
end
system(options[:editor], filename)
end
end
Use the command thor:new
$ thor jekyll:new "The title of the new post"
I did some modifications with original script to generate timestamp more specific to second.
Publish the modified content to Github Page
Now you can git commit the content you modified and push your modification to your-github-username.github.io remote repository. Now we are all set, go to check and enjoy your blog!
Troubleshooting
Actual published site indexed page is different from the local version
It’s due to different time zone setting in server and your local host, add time zone information to the date in your post’s front matter to avoid this issue.
