Chenguang Xiao

Logo

Chenguang is currently a PhD candidate in computer science.

View My GitHub Profile

11 April 2023

The jekyll theme experience on GitHub Pages

by

Why Github pages with jekyll theme?

Github pages are one of the best choices for publish you static websites. There are also other choices including WordPress and Google Sites that provide a similar service. With all the content and style control via webgui, Wordpress and Google Sites are more convienient to startup. However, they limited in the customization of the website from the source code level.

Github pages are more flexible in this aspect, with the help of Jekyll. You can control the full source code of your website, therefore customize every single part of it. This may involve huge efforts to do this, but there is a workaround to trade off the effort with the convenience. That is using the jekyll themes. Once you setup your style in jekyll, you can easily publish your posts on Github pages with uniform stracture. There are also many themes available for Jekyll, which makes it easy to setup a website with a new style.

get your github pages ready

choose and apply a jekyll theme

customize the theme

publish your first post

Source of jekyll themes: GitHub Pages themes

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

Jekyll requires blog post files to be named according to the following format:

YEAR-MONTH-DAY-title.MARKUP

Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and MARKUP is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.

tags: