How to Add a Blog Search Functionality to Your Github Pages Site

by

Adding a search functionality to your GitHub Pages site can greatly enhance user experience by allowing visitors to easily find specific content. Although GitHub Pages does not support server-side scripting, you can implement client-side search using JavaScript and third-party tools. This guide will walk you through the process step-by-step.

Using a JavaScript-Based Search Solution

One effective way to add search to your GitHub Pages site is by integrating a JavaScript-based search tool such as Simple-Jekyll-Search or Algolia DocSearch. These tools index your content and provide instant search results without needing a backend server.

Follow these steps to implement Simple-Jekyll-Search on your site:

  • Create a search.json file in your repository that contains an array of your posts or pages with titles and URLs.
  • Include the Simple-Jekyll-Search script in your HTML, usually in index.html or a layout file.
  • Add a search input box where users can type their queries.
  • Initialize the search script with your search.json data source.

Example Code Snippet

Here is a basic example of how to set up the search box and script:

<input type="text" id="search" placeholder="Search..."/>

<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search/dist/simple-jekyll-search.min.js"></script>
<script>
  SimpleJekyllSearch({
    searchInput: 'search',
    resultsContainer: '#results',
    json: '/search.json'
  });
</script>

Creating the search.json File

This JSON file should include an array of objects, each representing a post or page with fields like title, url, and optionally content. For example:

[
  {
    "title": "My First Blog Post",
    "url": "/blog/my-first-post.html",
    "content": "This is the content of my first post."
  },
  {
    "title": "Another Article",
    "url": "/blog/another-article.html",
    "content": "Details about another article."
  }
]

Final Tips

Ensure your search.json file is kept up-to-date whenever you add new content. You can automate this process with scripts or manually update the JSON file. Additionally, style your search box and results using CSS to match your site’s design for a seamless user experience.

Implementing a client-side search is a simple yet powerful way to improve navigation on your GitHub Pages site without requiring server-side code. Try it out and make your content more accessible!