How to add Google Programmable Search Engine to Ghost blog

Programmable Search Engine is a site search service by Google for adding search functionality to websites.

Benefits of using Programmable Search Engine:

You get high-quality and relevant search results because it's powered by Google's core search technology.
Free of cost
Easy implementation
You can customize the look and feel of the search bar and search results from your Google account, as well as use custom CSS to change the look. You can choose layouts and themes for your search.

These are the steps for adding it to your Ghost blog. In this tutorial, we'll be using the default Casper theme, but the same can be applied on any other Ghost theme as well:

Step 1: Create Search Engine

Enter the domain name of the site you want to use, for example, example.com, subdomain.example.com, or example.com/docs/ if you want to search on a part of the site.

After creating the engine, you'll receive the HTML embed code which we'll paste into our Ghost theme later.

Step 2: Add a Search Icon in Header

Edit default.hbs file and add the HTML code for the search icon next to navigation as shown below.

<div class="gh-head-menu">
    {{navigation}}

    {{!-- Search Icon --}}
    <button type="button" class="search-toggle" aria-label="Search">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
    </button>

</div>

Add search icon next to the navigation in default.hbs file

We are using the search icon from Feather Icons.

Add some CSS styling to style the search button:

<style>
    .search-toggle {
        background: none;
        width: 22px;
        display: flex;
        align-items: center;
        padding: 0;
    }
</style>

Add javascript code that will toggle the search view:

<script>
$(document).ready(function () {
    /* Search */
    $('.search-toggle').on('click', function () {
        $('.search-view').show()
        $('body').css('overflow', 'hidden')
    })
    $('.search-close').on('click', function () {
        $('.search-view').hide()
        $('body').css('overflow', 'initial')
    })
});
</script>

Step 3: Add a Search View

Now we'll add the search view which will hold the search bar and search results.

Edit the default.hbs and add the following HTML code after the footer.

<div class="search-view">
    <div class="gh-canvas">
        <div class="search-header">
            <h2 class="search-title">Search</h2>
            <button class="search-close" type='button' aria-label="Close search view">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
            </button>
        </div>
        <div class="search-body">
            {{!-- Google Programmable Search Engine --}}
                
                {{!-- Paste your embed code here --}}
                
            {{!-- End Google PSE --}}
        </div>
    </div>
</div>

Don't forget to paste your Programmable Search Engine HTML code in the space left for it.

Add CSS styling for the search view as well:

<style>
    .search-view {
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        z-index: 4000000;
        background: #fff;
        overflow-y: scroll;
        display: none;
    }

    .search-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .search-title {
        font-size: 3.6rem;
    }

    .search-close {
        border: none;
        background: var(--color-wash);
        width: 50px;
        height: 50px;
        padding: 12px;
        border-radius: 100%;
        position: absolute;
        top: 25px;
        right: 25px;
        cursor: pointer;
        color: var(--color-midgrey);
        z-index: 1;
        display: block;
    }
    
    /* Programmable Search Engine Customizations */
    .gsc-control-cse {
        padding: 0 !important;
    }
</style>

That's it. You have a working search available on your Ghost blog. By default, you will see ads above your search results but you can disable this by adding paid API key in settings.

Reference Links:

Disable Ads by adding an API Key
Programmable Search Engine Overview and Documentation