Update: There is a newer post about Google CSE here.

What is Google CSE?

Google CSE allows you to setup a custom search engine specifically for your site. The free version will display ads. There is a paid version that allows you to strip ads and customize behaviors beyond the free version. This is an easy, and free, if you’re okay with ads, way to add search capabilities to your site.

Alternatives for search with Jekyll

Not everyone digs Google or ads, I get it. I have looked around quite a bit for alternatives, and the only one I’ve found that I’d seriously consider is TapirGo. With TapirGo, you submit your RSS feed, and it will crawl your site and allow you to plugin a little Javascript to get going. With TapirGo, you can push articles manually if pulling your RSS feed every 15 minutes isn’t frequent enough.

EDIT: As of December 2017, TapirGo is no longer active.

One advantage to Google CSE over TapirGo is that TapirGo will deactivate your site if it can’t fetch your RSS feed for five days or if the search function isn’t used for 30 days. As long as there are periodic searches, TapirGo is still a viable option.

What to do first

First, make sure you setup your site with Google Webmasters. You will need to verify ownership, submit your sitemap and set up the page you’d like Google to crawl. If your site is new or has very few from other sites, you’ll need to spend a fair amount of time with the webmaster tools to make sure your posts are being crawled and are showing up in search. To see what google has for your site, search for your site using site: in front of your site domain, for example: site:https://spock.rocks. This will show everything that Google has indexed.

When you submit pages to be crawled, it may be hours or days before it shows up in Google. If it doesn’t show up when searching on Google, it won’t show up in your CSE.

Integrating into Jekyll

When you setup your CSE, it will give you a snippet to include in your site to add your search engine. What we’re going to do is pull out the Google Search Engine ID, and turn it into a variable that’s loaded from your _config.yml. First, we’re going to create this snippet in _includes/googleanalytics.html. Here’s what the contents of the file will look like:

<script>
  (function() {
    var cx = '{{ site.google_cse_id }}';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

Next, we will configure your search engine by adding your Google CSE ID to _config.yml. I’m including my CSE ID, replace this with the one you get when setting up your search engine:

# Google CSE (Custom Search Engine) ID
google_cse_id: 000835168522850411644:fctjuy0jhia

Lastly, we’re going to add this search engine to every page on our site. Do this by adding {% include googlecustomsearch.html %} in the page content section. Once done, _layouts/default.html may look something like this:

<!DOCTYPE html>
<html>

  {% include head.html %}

  <body>

    {% include header.html %}

    <div class="page-content">
      <div class="wrapper">
        {% include googlecustomsearch.html %}
        {{ content }}
      </div>
    </div>

    {% include footer.html %}

  </body>

</html>

Troubleshooting Google CSE

If your links aren’t showing up, make sure you’ve submitted them to Google through the webmaster tools. The crawler tools will allow you to troubleshoot crawling issues as well. Since the crawler tools will allow you to render your pages, you can troubleshoot your site by seeing how Google sees it. Everything that shows up in your CSE comes from Google itself, so expect to spend a fair amount of time with the webmaster tools.

If you’ve done all of the necessary steps to setup your site, be patient. Google doesn’t immediate crawl things or update it’s index just because you ask it to. It may take hours or days before things show up how you’d expect.