Jekyll Theme Usage - How to Find and Change Themes

Jekyll themes control the look and feel of your website. This guide explains how to locate theme files, customize your Jekyll site’s appearance, and switch between themes. Understanding how themes work is fundamental to building a polished Jekyll site that matches your brand or personal style.

How Jekyll Themes Work

Jekyll themes are packaged as Ruby gems. When you install a theme, it provides default layouts, includes, stylesheets, and assets. Your project files take precedence over theme files, which means you can selectively override any part of the theme without modifying the original gem.

The typical theme structure includes:

_layouts/ - Page layout templates (default.html, post.html, page.html)
_includes/ - Reusable HTML snippets (header.html, footer.html, head.html)
_sass/ - SCSS/Sass stylesheets
assets/ - Static files like CSS, JavaScript, and images

Finding Theme Files

When you want to customize a theme, you first need to find where the theme files are located.

Locate the theme directory

bundle info --path minima

This command shows the path to the theme files. You can copy files from this directory to your project to override them.

To explore the full structure of a theme:

ls -la $(bundle info --path minima)
tree $(bundle info --path minima)

This helps you understand which files are available for customization and how the theme is organized.

Changing Themes

Method 1: Change in _config.yml

Edit your _config.yml file to change the theme:

theme: minima

For remote themes (from GitHub):

remote_theme: owner/repository

Remote themes are particularly useful for GitHub Pages, as they allow you to use themes hosted on GitHub without installing them as gems locally. You will also need the jekyll-remote-theme plugin:

plugins:
  - jekyll-remote-theme

Method 2: Install a New Gem Theme

Add the theme to your Gemfile:
```
gem "jekyll-theme-minimal"
```
Run bundle install:
```
bundle install
```
Update _config.yml:
```
theme: jekyll-theme-minimal
```

Important: Check Layout Compatibility

When switching themes, be aware that different themes may use different layout names. For example, one theme might use post while another uses single. If your posts reference a layout that doesn’t exist in the new theme, Jekyll will fall back to the default layout or show no layout at all. Check your front matter and update layout names accordingly.

Popular Jekyll Themes

Minima: Default Jekyll theme, clean and simple
Minimal Mistakes: Feature-rich, great for blogs and portfolios
Just the Docs: Perfect for documentation sites
Chirpy: Modern blog theme with dark mode
Beautiful Jekyll: Easy to set up, ideal for personal blogs
Hyde: A brazen two-column Jekyll theme
Architect: Clean theme for project pages

You can browse more themes at:

Customizing Theme Layouts

To override a theme file:

Find the original file path using bundle info --path
Create the same directory structure in your project
Copy and modify the file

For example, to customize the header:

mkdir -p _includes
cp $(bundle info --path minima)/_includes/header.html _includes/

Customizing Styles

To override theme styles without modifying the original SCSS files, create a file at assets/css/style.scss:

---
---
@import "minima";  // Import the original theme styles

// Add your custom styles below
.site-header {
  background-color: #2c3e50;
}

.post-title {
  color: #e74c3c;
}

This approach ensures your customizations are applied on top of the theme defaults, making it easy to update the theme later without losing your changes.

Creating Custom Layouts

You can create entirely new layouts by adding files to the _layouts/ directory:

---
layout: default
---
<article class="custom-post">
  <h1>Jekyll Theme Usage - How to Find and Change Themes</h1>
  <div class="meta">December 03, 2023</div>
  <div class="content"><article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">

  <header class="post-header">
    <h1 class="post-title p-name" itemprop="name headline">Publish Jekyll on GitHub Pages</h1>
    <p class="post-meta">
      <time class="dt-published" datetime="2023-12-03T12:05:37+00:00" itemprop="datePublished">Dec 3, 2023
      </time></p><div class="post-categories"><a href="/Tools/" class="post-category-badge">Tools</a><span class="category-separator">›</span><a href="/Jekyll/" class="post-category-badge">Jekyll</a></div></header><img src="/assets/images/posts/thumbnails/2023-12-03-Publish-jekyll-on-github-io.png" alt="Publish Jekyll on GitHub Pages" class="post-thumbnail" itemprop="image"><div class="post-content e-content" itemprop="articleBody">
    <p>In this blog post, we will walk through the process of installing Jekyll on your desktop and publishing it on Github Pages. This is a great way to create and manage your own website or blog.</p>

<h2 id="install-jekyll-on-your-desktop">Install Jekyll on your desktop</h2>
<p>Jekyll is a simple, blog-aware, static site generator that’s ideal for personal, project, or organization sites. To get started, you need to install Jekyll on your desktop. Follow the instructions provided on the <a href="https://jekyllrb.com/docs/installation/">official Jekyll installation guide</a>.</p>

<h3 id="on-mac">On Mac</h3>
<p>If you’re using a Mac, you’ll need to install Ruby first before you can install Jekyll.</p>

<h4 id="install-ruby">Install Ruby</h4>
<p>Ruby is a dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write. Here’s how you can install Ruby on your Mac:</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>brew <span class="nb">install </span>chruby ruby-install xz
ruby-install ruby 3.1.3

<span class="nb">echo</span> <span class="s2">"source </span><span class="si">$(</span>brew <span class="nt">--prefix</span><span class="si">)</span><span class="s2">/opt/chruby/share/chruby/chruby.sh"</span> <span class="o">&gt;&gt;</span> ~/.zshrc <span class="nb">echo</span> <span class="s2">"source </span><span class="si">$(</span>brew <span class="nt">--prefix</span><span class="si">)</span><span class="s2">/opt/chruby/share/chruby/auto.sh"</span> <span class="o">&gt;&gt;</span> ~/.zshrc <span class="nb">echo</span> <span class="s2">"chruby ruby-3.1.3"</span> <span class="o">&gt;&gt;</span> ~/.zshrc <span class="c"># run 'chruby' to see actual version</span>

ruby <span class="nt">-v</span>
</code></pre></div></div>

<h4 id="install-jekyll">Install Jekyll</h4>
<p>Once you have Ruby installed, you can proceed with installing Jekyll. Here’s how:</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gem <span class="nb">install </span>bundler jekyll
jekyll new site
<span class="nb">cd </span>site
</code></pre></div></div>

<h2 id="deploy">Deploy</h2>
<p>Now that you have Jekyll installed and a new site created, it’s time to deploy your site on Github Pages.</p>

<h3 id="create-repository-named-user-namegithubio">Create repository named {user-name}.github.io</h3>
<p>First, you need to create a new repository on Github. The repository name should be in the format <code class="language-plaintext highlighter-rouge">{user-name}.github.io</code>.</p>

<h3 id="commit-and-push-jekyll-code">Commit and push Jekyll code</h3>
<p>Next, commit your Jekyll site code to the repository and push the changes. Github Pages will automatically deploy your site upon each commit.</p>

<h3 id="configure-deployment-setting">Configure deployment setting</h3>
<p>It’s well described on <a href="https://docs.github.com/pages/quickstart#creating-your-website">Pages Quickstart</a></p>

<h3 id="check-website">Check website</h3>
<p>Finally, you can check your website by navigating to <code class="language-plaintext highlighter-rouge">{user-name}.github.io</code> in your web browser. Your Jekyll site should now be live!</p>

<h2 id="reference">Reference</h2>
<p>For more information, you can refer to the official Github Pages documentation on <a href="https://docs.github.com/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll">creating a Github Pages site with Jekyll</a>.</p>

  </div>

<div class="related-posts">
  <h2>Related Posts</h2>
  <ul class="related-posts-list">
    
            <li class="related-post-item">
              <a href="/tools/mac/2026/03/04/finicky-url-based-browser-routing.html">
                <span class="related-post-title">회사 Chrome, 개인 Brave — 링크 클릭 한 번으로 자동 분기하기 (Finicky)</span>
                <span class="related-post-meta">
                  <span class="related-post-category">tools</span>
                  <span class="related-post-date">2026-03-04</span>
                </span>
              </a>
            </li>
          
            <li class="related-post-item">
              <a href="/frontend/common/2026/01/20/mermaid-diagram-jekyll.html">
                <span class="related-post-title">Jekyll 블로그에 Mermaid 다이어그램 추가하기</span>
                <span class="related-post-meta">
                  <span class="related-post-category">frontend</span>
                  <span class="related-post-date">2026-01-20</span>
                </span>
              </a>
            </li>
          
            <li class="related-post-item">
              <a href="/tools/common/2026/01/08/chrome-extensions-recommendations.html">
                <span class="related-post-title">2026년 추천 Chrome 확장 프로그램 - 생산성 향상을 위한 필수 익스텐션</span>
                <span class="related-post-meta">
                  <span class="related-post-category">tools</span>
                  <span class="related-post-date">2026-01-08</span>
                </span>
              </a>
            </li>
          
            <li class="related-post-item">
              <a href="/tools/obsidian/2026/01/06/Obsidian-Tasks-MCP-Plugin.html">
                <span class="related-post-title">Manage Obsidian Tasks with AI - Tasks MCP Plugin Guide</span>
                <span class="related-post-meta">
                  <span class="related-post-category">tools</span>
                  <span class="related-post-date">2026-01-06</span>
                </span>
              </a>
            </li>
          
  </ul>
</div>

<style>
.related-posts {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid #e0e0e0;
}

.related-posts h2 {
  margin-bottom: 20px;
  font-size: 1.4em;
  color: #333;
}

.related-posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
}

.related-post-item {
  background: #f8f9fa;
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.related-post-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.related-post-item a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: inherit;
}

.related-post-title {
  display: block;
  font-weight: 600;
  color: #0366d6;
  margin-bottom: 8px;
  font-size: 0.95em;
  line-height: 1.4;
}

.related-post-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8em;
  color: #666;
}

.related-post-category {
  background: #e0e0e0;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: capitalize;
}

@media (max-width: 600px) {
  .related-posts-list {
    grid-template-columns: 1fr;
  }
}
</style>
<section class="post-comments">
  <h2>Comments</h2>
  <script src="https://giscus.app/client.js"
          data-repo="dss99911/dss99911.github.io"
          data-repo-id="R_kgDOK1J8gQ"
          data-category="Announcements"
          data-category-id="DIC_kwDOK1J8gc4C0Sct"
          data-mapping="pathname"
          data-strict="0"
          data-reactions-enabled="1"
          data-emit-metadata="0"
          data-input-position="top"
          data-theme="preferred_color_scheme"
          data-lang="ko"
          data-loading="lazy"
          crossorigin="anonymous"
          async>
  </script>
</section>

<style>
.post-comments {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid #e0e0e0;
}

.post-comments h2 {
  margin-bottom: 20px;
  font-size: 1.5em;
}
</style>
<a class="u-url" href="/tools/jekyll/2023/12/03/Publish-jekyll-on-github-io.html" hidden></a>
</article>
</div>
</article>

Then reference it in your post’s front matter:

---
layout: custom-post
---

Tips for Theme Management

Version pinning: Specify exact theme versions in your Gemfile to avoid unexpected changes when updating.
Override minimally: Only copy the files you need to modify. This makes theme updates easier.
Test locally: Always run bundle exec jekyll serve to preview changes before deploying.
Keep a backup: Before switching themes, commit your current state to git so you can easily revert.