Configuring Jekyll with GitHub Pages themes
A few days ago, I just started deploying a static blog site using Jekyll on
GitHub Pages and you probably noticed that using jekyll new . will deploy
Jekyll with a default minima theme. Today, I’m going to demonstrate on how
you can change your Jekyll default theme for your GitHub Pages.
Note: If you have not seen my previous blog post, this is the blog post which I am referring to here.
GitHub supported Jekyll Themes
As you probably discovers more about Jekyll, you will find that there are alot of themes available out there but we will only be discussing on the following GitHub supported themes below:
| Themes repository | Preview theme | Config theme key value |
|---|---|---|
| Architect | Demo | jekyll-theme-architect |
| Cayman | Demo | jekyll-theme-cayman |
| Dinky | Demo | jekyll-theme-dinky |
| Hacker | Demo | jekyll-theme-hacker |
| Leap day | Demo | jekyll-theme-leap-day |
| Merlot | Demo | jekyll-theme-merlot |
| Midnight | Demo | jekyll-theme-midnight |
| Minima | Demo | minima |
| Minimal | Demo | jekyll-theme-minimal |
| Modernist | Demo | jekyll-theme-modernist |
| Slate | Demo | jekyll-theme-slate |
| Tactile | Demo | jekyll-theme-tactile |
| Time machine | Demo | jekyll-theme-time-machine |
↑Top
Setting up Jekyll for GitHub Pages themes
After you had executed jeykll new . in your local repository path to create a
new static site, you can use the following Ruby script to modify Gemfile to use
github-pages gem to bootstrap dependencies for setting up and maintaining a
local Jekyll environment in sync with GitHub Pages.
1
2
3
4
text = File.read('Gemfile')
File.write('Gemfile', text.gsub(/gem\ \"jekyll\"/, '#gem \"jekyll\"'))
text = File.read('Gemfile')
File.write('Gemfile', text.gsub(/#gem\ \"github-pages\"/, 'gem \"github-pages\"'))
If you are like me who loves using the shell, you can use the following below
to execute the Ruby script above by using ruby -e.
1
2
3
4
ruby -e "text = File.read('Gemfile')
File.write('Gemfile', text.gsub(/gem\ \"jekyll\"/, '#gem \"jekyll\"'))
text = File.read('Gemfile')
File.write('Gemfile', text.gsub(/# gem\ \"github-pages\"/, 'gem \"github-pages\"'))"
↑Top
Choose a GitHub Pages themes
Once the Gemfile has been setup to use GitHub Pages for the local Jekyll
environment, you can apply the next following Ruby script from the shell to
configure the Jekyll (_config.yml) configuration file theme: key with the
value of chosen GitHub Pages theme.
↑Top
Architect
To apply your Jekyll site with this GitHub Pages theme, execute the following Ruby script in the shell below.
1
2
ruby -e "text = File.read('_config.yml')
File.write('_config.yml', text.gsub(/theme: minima/, 'theme: jekyll-theme-architect'))"
↑Top
Cayman
To apply your Jekyll site with this GitHub Pages theme, execute the following Ruby script in the shell below.
1
2
ruby -e "text = File.read('_config.yml')
File.write('_config.yml', text.gsub(/theme: minima/, 'theme: jekyll-theme-cayman'))"
↑Top
Dinky
To apply your Jekyll site with this GitHub Pages theme, execute the following Ruby script in the shell below.
1
2
ruby -e "text = File.read('_config.yml')
File.write('_config.yml', text.gsub(/theme: minima/, 'theme: jekyll-theme-dinky'))"
↑Top
Hacker
To apply your Jekyll site with this GitHub Pages theme, execute the following Ruby script in the shell below.
1
2
ruby -e "text = File.read('_config.yml')
File.write('_config.yml', text.gsub(/theme: minima/, 'theme: jekyll-theme-hacker'))"
↑Top
Leap Day
To apply your Jekyll site with this GitHub Pages theme, execute the following Ruby script in the shell below.
1
2
ruby -e "text = File.read('_config.yml')
File.write('_config.yml', text.gsub(/theme: minima/, 'theme: jekyll-theme-leap-day'))"
↑Top
Merlot
To apply your Jekyll site with this GitHub Pages theme, execute the following Ruby script in the shell below.
1
2
ruby -e "text = File.read('_config.yml')
File.write('_config.yml', text.gsub(/theme: minima/, 'theme: jekyll-theme-merlot'))"
↑Top
Midnight
To apply your Jekyll site with this GitHub Pages theme, execute the following Ruby script in the shell below.
1
2
ruby -e "text = File.read('_config.yml')
File.write('_config.yml', text.gsub(/theme: minima/, 'theme: jekyll-theme-midnight'))"
↑Top
Minimal
To apply your Jekyll site with this GitHub Pages theme, execute the following Ruby script in the shell below.
1
2
ruby -e "text = File.read('_config.yml')
File.write('_config.yml', text.gsub(/theme: minima/, 'theme: jekyll-theme-minimal'))"
↑Top
Modernist
To apply your Jekyll site with this GitHub Pages theme, execute the following Ruby script in the shell below.
1
2
ruby -e "text = File.read('_config.yml')
File.write('_config.yml', text.gsub(/theme: minima/, 'theme: jekyll-theme-modernist'))"
↑Top
Slate
To apply your Jekyll site with this GitHub Pages theme, execute the following Ruby script in the shell below.
1
2
ruby -e "text = File.read('_config.yml')
File.write('_config.yml', text.gsub(/theme: minima/, 'theme: jekyll-theme-slate'))"
↑Top
Tactile
To apply your Jekyll site with this GitHub Pages theme, execute the following Ruby script in the shell below.
1
2
ruby -e "text = File.read('_config.yml')
File.write('_config.yml', text.gsub(/theme: minima/, 'theme: jekyll-theme-tactile'))"
↑Top
Time Machine
To apply your Jekyll site with this GitHub Pages theme, execute the following Ruby script in the shell below.
1
2
ruby -e "text = File.read('_config.yml')
File.write('_config.yml', text.gsub(/theme: minima/, 'theme: jekyll-theme-time-machine'))"
↑Top
Modify the layout value for site index page
To apply your Jekyll site with this GitHub Pages theme, execute the following Ruby script in the shell below.
1
2
ruby -e "text = File.read('index.md')
File.write('index.md', text.gsub(/layout: home/, 'layout: default'))"
↑Top
Update all your gems
Once you have configured your preferred GitHub Pages theme using Ruby above,
you will need get bundle to assist you in updating all the necessary gems for
GitHub Pages.
1
bundle update
↑Top
Preview your site
Without any particular issue that may arise after you requested bundle to
update all necessary gems, you can use the following command to execute Jeykll
locally to serve and preview the site on
http://localhost:4000/.
1
bundle exec jekyll serve
↑Top
Conclusion
Once you are satisfied with the chosen GitHub Pages theme tested locally, use
git to add all modified files, commit the changes and push to your GitHub
repository.
1
2
3
git add --all
git commit -m 'Updated Jekyll with GitHub Pages themes'
git push -u origin master
Note: Remember to replace
$GITHUB_USERNAMEvariable with your real GitHub username to browse your published online site.
After you have pushed, you can view it live from your
$GITHUB_USERNAME.github.io URL using your favourite browser. It just that
easy with keyboard.
↑Top
Related Books
↑Top