Welcome the continuing series on using Jekyll. In this tutorial we are going to add the ability to search your blog using google.
This article is Part 7 in a 14-Part Series.
Part 1 - Jekyll Part 01: Getting Started
Part 2 - Jekyll Part 02: Your First Post
Part 3 - Jekyll Part 03: Adding Commenting to Post
Part 4 - Jekyll Part 04: Adding Additional Pages
Part 5 - Jekyll Part 05: Adding Category Page
Part 6 - Jekyll Part 06: Adding Post by Date Page
Part 7 - This Article
Part 8 - Jekyll Part 08: Using a Custom Domain
Part 9 - Jekyll Part 09: Installing Jekyll On Windows
Part 10 - Jekyll Part 10: Installing Jekyll On Linux
Part 11 - Jekyll Part 11: Installing Jekyll On OSx
Part 12 - Jekyll Part 12: Editing Locally
Part 13 - Jekyll Part 13: Creating an Article Series
Part 14 - Jekyll Part 14: How To Validate Links and Images
Overview
As your blog grows, you want to make it easy for your readers to find the content that they need on your blog. Out of the box, Jekyll does not have any type of search engine built-in. Thankfully, with Google you can easily tell Google to index your blog and then add a search box on the blog.
Section 1: Adding the Search Page
If you have been following along with the other lessons in the series, this should be familiar to you.
Open a web browser and navigate to your [username].github.io repository.
Click on the + button to add a new file
Name the file search.html
Add the following front matter
Add the following html to the page
Section 2: Adding Search Box
We need to get back to the main directory of our repository. To do this click on one of the [yourname].github.io links.
Then click on _layouts directory to go into it.
Click on the default.html file to open it.
Click on the 
icon to edit the file.
Before the <div id=”archives”> tag that we added previously, add the following html snippet.
Replace the <div class=”container”> above the search div with the following
After the <div id=”archives”> section add another </div> tag.
The whole section for the header should look like this
Scroll down to the bottom, add the commit comment, and click on the commit change button.
Next we need to update the theme so that the search box shows up in the correct spot on the page.
Section 3: Updating the Stylesheet
We need to get back to the main directory of our repository. To do this click on one of the [yourname].github.io links.
Click on the style.scss file to open it.
Click on the icon to edit the file.
Add the following to the bottom of the file before the two @import statements.
Scroll down to the bottom, add the commit comment, and click on the commit change button.
Now go view your blog’s home page at http://[username].github.io/. You should now see the search box in the header along with the “browse by category or date” links.
Now that the search box and search pages are done, we need to setup Google to actually search our blog.
Section 4: Configuring Google
Navigate to https://www.google.com/cse/
If you do not have a Google account, you will need to create one.
If you already have a Google account, please login to it now.
Once signed in, click the Add button
Fill in your web site url. Should be http://[username].github.io/*
Give the search a name that you will remember.
Click the create button
You search should now be created
Click the Get Code button
Copy the var cx = line
Go back to github and edit the search.html page. Replace the var cx = line with the line that you just copied.
Commit the changes to Github for the search.html page.
Now we are ready to test the search
Section 5: Testing the Search
Open a web browser and navigate to http://[username].github.io
Type some text into the search box and click Search
It should take you to your search page and then do a Google search
Conclusion
You now have the ability for Google to index and search your blog. This will make it much easier for your reader to find older posts that they may be interested in and hopefully keep them on your blog longer.
In our next lesson, I will show you how to host your http://[username].github.io blog with a custom domain name like I am doing with http://digitaldrummerj.me
This article is Part 7 in a 14-Part Series.
Part 1 - Jekyll Part 01: Getting Started
Part 2 - Jekyll Part 02: Your First Post
Part 3 - Jekyll Part 03: Adding Commenting to Post
Part 4 - Jekyll Part 04: Adding Additional Pages
Part 5 - Jekyll Part 05: Adding Category Page
Part 6 - Jekyll Part 06: Adding Post by Date Page
Part 7 - This Article
Part 8 - Jekyll Part 08: Using a Custom Domain
Part 9 - Jekyll Part 09: Installing Jekyll On Windows
Part 10 - Jekyll Part 10: Installing Jekyll On Linux
Part 11 - Jekyll Part 11: Installing Jekyll On OSx
Part 12 - Jekyll Part 12: Editing Locally
Part 13 - Jekyll Part 13: Creating an Article Series
Part 14 - Jekyll Part 14: How To Validate Links and Images