Jekyll has an extensive theme system, which allows you to leverage community-maintained templates and styles to customize your site’s presentation. Jekyll themes package layouts, includes, and stylesheets in a way that can be overridden by your site’s content.
Installing a theme
To install a theme, first, add the theme to your site’s
- Save the changes to your
- Run the command
bundle installto install the theme
Finally, activate the theme by adding the following to your site’s
You can have multiple themes listed in your site’s Gemfile, but only one theme can be selected in your site’s
Overriding theme defaults
Jekyll themes set default layouts, includes, and stylesheets, that can be overridden by your site’s content. For example, if your selected theme has a
page layout, you can override the theme’s layout by creating your own
page layout in the
_layouts folder (e.g.,
Jekyll will look first to your site’s content, before looking to the theme’s defaults, for any requested file in the following folders:
Refer to your selected theme’s documentation and source repository for more information on what files you can override.
To locate theme’s files on your computer, run
bundle show followed by
the name of the theme’s gem, e.g.
bundle show minima for default Jekyll’s
theme. Then copy the files you want to override, from the returned path to your root folder.
Creating a theme
Jekyll themes are distributed as Ruby gems. Don’t worry, Jekyll will help you scaffold a new theme with the
new-theme command. Just run
jekyll new-theme with the theme name as an argument:
jekyll new-theme my-awesome-theme create /path/to/my-awesome-theme/_layouts create /path/to/my-awesome-theme/_includes create /path/to/my-awesome-theme/_sass create /path/to/my-awesome-theme/_layouts/page.html create /path/to/my-awesome-theme/_layouts/post.html create /path/to/my-awesome-theme/_layouts/default.html create /path/to/my-awesome-theme/Gemfile create /path/to/my-awesome-theme/my-awesome-theme.gemspec create /path/to/my-awesome-theme/README.md create /path/to/my-awesome-theme/LICENSE.txt initialize /path/to/my-awesome-theme/.git create /path/to/my-awesome-theme/.gitignore Your new Jekyll theme, my-awesome-theme, is ready for you in /path/to/my-awesome-theme! For help getting started, read /path/to/my-awesome-theme/README.md.
Add your template files in the corresponding folders, complete the
.gemspec and the README files according to your needs.
Layouts and includes
Theme layouts and includes work just like they work in any Jekyll site. Place layouts in your theme’s
/_layouts folder, and place includes in your themes
For example, if your theme has a
/_layouts/page.html file, and a page has
layout: page in its YAML front matter, Jekyll will first look to the site’s
_layouts folder for the
page layout, and if none exists, will use your theme’s
Any file in
/assets will be copied over to the user’s site upon build unless they have a file with the same relative path. You may ship any kind of asset here: SCSS, an image, a webfont, etc. These files behave just like pages and static files in Jekyll: if the file has YAML front matter at the top, then it will be rendered. If it does not have YAML front matter, it will simply be copied over into the resulting site. This allows theme creators to ship a default
/assets/styles.scss file which their layouts can depend on as
All files in
/assets will be output into the compiled site in the
/assets folder just as you’d expect from using Jekyll on your sites.
Your theme’s stylesheets should be placed in your theme’s
/_sass folder, again, just as you would when authoring a Jekyll site. Your theme’s styles can be included in the user’s stylesheet using the
Documenting your theme
Your theme should include a
/README.md file, which explains how site authors can install and use your theme. What layouts are included? What includes? Do they need to add anything special to their site’s configuration file?
Adding a screenshot
Themes are visual. Show users what your theme looks like by including a screenshot as
/screenshot.png within your theme’s repository where it can be retrieved programatically. You can also include this screenshot within your theme’s documentation.
Previewing your theme
To preview your theme as you’re authoring it, it may be helpful to add dummy content in, for example,
/page.html files. This will allow you to use the
jekyll build and
jekyll serve commands to preview your theme, just as you’d preview a Jekyll site.
If you do preview your theme locally, be sure to add
/_site to your theme’s
.gitignore file to prevent the compiled site from also being included when you distribute your theme.
Publishing your theme
First, package your theme, by running the following command, replacing
my-awesome-jekyll-themewith the name of your theme:
gem build my-awesome-jekyll-theme.gemspec
Next, push your packaged theme up to the RubyGems service, by running the following command, again replacing
my-awesome-jekyll-themewith the name of your theme:
gem push my-awesome-jekyll-theme-*.gem
To release a new version of your theme, simply update the version number in the gemspec file, (
my-awesome-jekyll-theme.gemspecin this example ), and then repeat Steps 1 & 2 above. We recommend that you follow Semantic Versioning while bumping your theme-version.