Creating a custom search page for your Jekyll site can greatly enhance user experience by allowing visitors to easily find content. Unlike dynamic sites, Jekyll generates static pages, so implementing search requires some extra steps. This guide will walk you through creating a simple, effective search page using JavaScript and a pre-built search index.

Understanding the Basics of Jekyll Search

Jekyll sites are static, meaning they do not have built-in search capabilities like dynamic CMS platforms. To add search functionality, you typically generate a search index during site build time and then use JavaScript on the client side to perform searches.

Creating the Search Index

The first step is to create a JSON file that contains all your site content. You can do this by adding a plugin or script during your build process. For simplicity, you can manually create a search index file named search.json that includes titles, URLs, and snippets of your posts.

Example of a simple search.json structure:

[{"title": "Post Title", "url": "/post-url/", "content": "Brief snippet of the post content."}]

Designing the Search Page

Create a new page in Jekyll called search.html. This page will contain the search input, results container, and the JavaScript code to perform the search.

HTML Structure

Below is a basic template for your search page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Search</title>
</head>
<body>
<h1>Search the Site</h1>
<input type="text" id="search-input" placeholder="Type to search...">
<div id="search-results"></div>
<script src="search.js"></script>
</body>
</html>

JavaScript for Search

Create a search.js file in the same directory as your search.html. This script will fetch the JSON index and perform searches based on user input.

Sample JavaScript code:

const searchInput = document.getElementById('search-input');
const resultsContainer = document.getElementById('search-results');
let searchIndex = [];

fetch('search.json')
.then(response => response.json())
.then(data => {
searchIndex = data;
});

searchInput.addEventListener('input', function() {
const query = this.value.toLowerCase();
const results = searchIndex.filter(item =>
item.title.toLowerCase().includes(query) ||
item.content.toLowerCase().includes(query)
);
displayResults(results);
});

function displayResults(results) {
resultsContainer.innerHTML = ''; // Clear previous results
results.forEach(item => {
const div = document.createElement('div');
div.innerHTML = `

${item.title}

${item.content}

`;
resultsContainer.appendChild(div);
});
}

Implementing and Testing

Upload your search.html, search.js, and search.json files to your Jekyll site's directory. Then, build and serve your site locally to test the search functionality. Try typing keywords into the search box and see the results update dynamically.

Conclusion

Adding a custom search page to your Jekyll site involves creating a search index, designing a search interface, and using JavaScript to perform client-side searches. While this method works well for small to medium-sized sites, larger sites may require more advanced solutions or third-party search services. With these steps, you can significantly improve your site's navigability and user experience.