white pixel
Jekyllrb logo

How to Install Jekyll Themes

Jekyll Theme Installation Guide: Choose, Install, and Customize Themes for Your Website. Easy-to-follow steps for beginners.

A guide for Installing Jekyll Theme

This guide will walk you through the simple process of installing a theme for your Jekyll website. We'll cover how to choose a theme, install it using different methods, and configure it to fit your unique style. Let's get started!

Using Git

Find the theme repository: Locate the GitHub repository for the chosen theme.

Clone the repository: In your Jekyll project's root directory, use the following command:

git clone

For example:

git clone https://github.com/mmistakes/minimal-mistakes.git themes/minimal-mistakes

This creates a folder named "themes" (or the name you specify) and clones the theme repository within it.

Manual Download:
  • Download the theme files as a ZIP archive from the theme repository.
  • Extract the downloaded archive to a folder named "themes" (or your preferred name) within your Jekyll project's root directory.
Configure Jekyll

Update _config.yml

Open the _config.yml file in your Jekyll project's root directory.

Locate the theme configuration option:

theme:

Replace with the actual name of the directory where you installed the theme. For example:

theme: minimal-mistakes

(Optional) Customize Theme Settings:

Most themes provide their own configuration options within their _config.yml file.
Locate the theme's _config.yml file within the theme directory.
Copy any desired theme-specific settings from the theme's _config.yml to your project's _config.yml.

Start the Jekyll Server

Run the Jekyll server:

bundle exec jekyll serve

View your site: Open your web browser and visit http://127.0.0.1:4000/ to see your site with the new theme applied.

Customize the Theme

Refer to the theme's documentation: Most themes provide documentation on how to customize them. This documentation will usually cover:

  • Liquid templates: How to modify existing templates or create new ones.
  • CSS and Sass: How to change the theme's colors, fonts, and styles.
  • JavaScript: How to add or modify JavaScript functionality.
  • Inspect the theme's files: Explore the theme's files (HTML, CSS, JavaScript) to understand how they work and make your desired modifications.

That's it! You've successfully installed and applied a theme to your Jekyll site. You can now further customize the theme to match your unique style and requirements.

Remember

Always back up your project before making significant changes.

Refer to the specific theme's documentation for detailed instructions and customization options.