Explore More Passive Income Ideas

add search to jekyll without javascript frameworks

Why Use Native Search for Jekyll Most Jekyll blogs rely on static content, which makes traditional database-driven search impossible. However, you don’t need heavy JavaScript frameworks like Vue or React to implement search. By leveraging JSON, Liquid, and a bit of vanilla JavaScript, you can create a responsive search experience that works on any static host—even GitHub Pages. Core Concepts Here’s the approach we’ll take: Generate a JSON index of your posts during build time Load the JSON file with plain JavaScript Match user input against title and content Display matching posts as results dynamically Step 1: Create a Search Index in JSON Add a new file called search.json at the root of your project: --- layout: null --- [ {% raw %}{% for post in site.posts %} { "title": "{{ post.title | escape }}", "url": "{{ post.url | absolute_url }}", "date": "{{ post.date | date: '%Y-%m-%d' }}...

custom homepage layout for jekyll blog

Why Use a Custom Homepage in Jekyll

By default, Jekyll displays a list of recent posts on the homepage. While functional, it lacks the structure and branding needed for a more polished and goal-oriented blog. Creating a custom homepage allows you to:

  • Showcase featured content or categories
  • Improve navigation and user flow
  • Highlight lead magnets, CTAs, or newsletter signups
  • Enhance brand perception and visual hierarchy

Creating a Custom Homepage Layout

First, create a file named index.html at the root of your Jekyll project (not inside the _posts or _layouts folder).

Example Template

---
layout: default
title: Home
---

<div class="home-hero">
  <h2>Welcome to My Blog</h2>
  <p>Sharing practical insights on building static websites with Jekyll.</p>
</div>

<div class="featured-posts">
  <h3>Featured Posts</h3>
  <ul>
    {% for post in site.posts limit:3 %}
      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endfor %}
  </ul>
</div>

<div class="categories-section">
  <h3>Browse by Topic</h3>
  <ul>
    {% assign categories_list = site.categories | sort %}
    {% for category in categories_list %}
      <li>
        <a href="{{ site.baseurl }}/categories/{{ category[0] | slugify }}/">{{ category[0] }}</a>
      </li>
    {% endfor %}
  </ul>
</div>

Handling Custom Content Blocks

You can add sections for testimonials, newsletter signup forms, or service descriptions. Use reusable includes or custom data from _data folder if you want structured content.

Adding a Newsletter Section

<div class="newsletter-cta">
  <h3>Join the Newsletter</h3>
  <p>Get weekly tips and tutorials right in your inbox.</p>
  <form action="https://yourmailservice.com/subscribe" method="post">
    <input type="email" name="email" placeholder="Enter your email" required>
    <button type="submit">Subscribe</button>
  </form>
</div>

Styling Your Homepage

To style the homepage layout distinctly, you can target it using a custom body class or by assigning an ID:

<body class="home-page">

Or add SCSS under a condition like:

body.home-page {
  .home-hero {
    background-color: #f7f7f7;
    padding: 40px 20px;
    text-align: center;
  }

  .featured-posts ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }
}

Adding SEO-Friendly Elements

  • Include meta descriptions using the YAML front matter
  • Add Open Graph and Twitter cards in your _includes/head.html
  • Use semantic HTML tags like <section>, <article>, and <nav>

Customizing the Layout File

You can create a custom layout file such as homepage.html inside the _layouts folder for more separation:

---
layout: homepage
title: "My Jekyll Blog"
---

<!-- homepage layout HTML will be used instead of default post layout -->

Conclusion

Creating a custom homepage in Jekyll gives your site a professional front that engages visitors and helps them navigate better. It improves user experience, SEO, and brand clarity—essential for any serious blog or content project. With a bit of Liquid and structured layout, your homepage can go from a simple post listing to a high-converting, engaging experience.


Archives / All Content

© ScrollBuzzLab . All rights reserved.