I remember using and integrating Google Search results in various web projects of mine, including this blog but never did occur to me that using Google Search for Jekyll was pretty painful. It wasn’t the feature Google was providing their free users; it wasn’t the idea behind the implementation but rather the various factors required to implement it correctly. A small mistake in proper configurations could make our end goal turn south.
I did not notice this problem until a week after I wrote a blog post - Importing and exporting files using ReactJS. and noticed that while searching for
export in my search page, the blog post was not included in the search results.
Like I mentioned before, if not configured right, problems and problems everywhere and so I decided to go the plain and simple way.
The simple way I chose to follow was a little too simple and lacks features for now, which I will eventually add as the time goes by but for starters, definitely gets the job done.
First, let me list1 some of Jekyll’s liquid template syntaxes that I used for this task.
site.posts- We will use it initialize and loop through all our posts.
post.title- To access our post’s title.
post.date- Date, the one we specify in the top of our post’s markdown file.
post.categories- One of the post properties that we set.
post.url- This one is generated by Jekyll during build but can be accessed and has a pattern unless specified.
post.tags- Our blog post’s tags, in case we use it, if not, not necessary.
I used these syntaxes to create and populate a JSON file named
posts.json with our blog posts data.
posts.json file does not necessarily need
tags JSON keys but I thought it would ease the search process if we can search the categories and tags! Also, we could extend this search feature by initializing and accessing various post properties2.
Our next process includes writing a search trigger which I already made a long time ago when Google Search was still being used for this blog, therefore, all I had to do was modify the search function. There are two conditions we need to focus on, to be able to search our
categories. I achieved this by using the
If we consider
data to be the contents from our
posts.json, our search/filter should something similar to the code below as I wanted the readers to be able to search my blog posts by their
The remaining task is to format the
filteredData in an organized manner, depending on layout and style of your preference. Mine is a bit messy but works well with the framework and libraries I’ve used!
The outcome I decided to settle with, I am pretty satisfied with it.
Enjoy & Happy Coding!
- Edited a little, didn’t want the full-sized photo.