A different way to add Google CSE

A little over a month ago, I made a post about adding Google CSE to a Jekyll site. This is a follow on to that article to show another way to get your site setup with a custom search engine.

Disclaimers around Google CSE

Just because you have a custom search engine doesn’t mean everything will show up in search right away. Make sure you’re using Google’s webmaster tools to ensure your site and pages are submitted to the search engine. Once your pages are indexed by Google, they will become searchable. I have found that it takes as long as a few days for pages to show up, even if you have submitted them directly to Google.

Setting up Google CSE with Jekyll

I built jekyll-google_cse to make the setup of Google CSE easier within Jekyll. Follow these simple instructions, and you’ll be on your way.

Step 1: Setup your site in Google CSE

If you haven’t, setup your custom search engine here. When you complete the setup process, you will be able to pull your Search Engine ID, which you will need later.

Step 2: Install jekyll-google_cse

Add jekyll-google_cse to your Gemfile. I have a group in my Gemfile for all Jekyll plugins that looks like this:

group :jekyll_plugins do
  gem 'jekyll-google_cse'
end

Once you’ve updated your Gemfile, run bundle to install it and any other required dependencies.

$ bundle
Fetching gem metadata from https://rubygems.org/
Fetching version metadata from https://rubygems.org/
Fetching dependency metadata from https://rubygems.org/
...
Installing jekyll-google_cse 1.0.0
...

Step 3: Edit your site configuration

Add jekyll-google_cse to your _config.yml file in the gems section. By default, Jekyll doesn’t have a gems section in the configuration, so if you don’t see it, add it like this:

gems:
  - jekyll-google_cse

Next, add the configuration for Google CSE using the Custom Search Engine ID retrieved in step 1. For example, add this to _config.yml:

google_cse_id: "000000000000000000000:fffffffffff" # Use your search engine ID

Step 4: Setup where the Google CSE code is placed

You have a few choices on how to do this. The way I do this is by editing _layouts/default.html and adding the engine in the page-content block:

<div class="page-content">
  <div class="wrapper">
    {% google_cse %}
    {{ content }}
  </div>
</div>

This will include the search engine at the top of every page.

Optionally, you can do other fun stuff to this. In my case, I only want this block put into place when it’s being built and shipped to the production environment, so I add a conditional:

{% if jekyll.environment == "production" %}{% google_cse %}{% endif %}

Step 5: Ship!

Now that everything is in place, build your site and ship it!