One line to add a site-specific search to your site

After all the time and effort spent in the battle against the bots and large volumes of automated submissions of AI slop, I thought I should do something which actually benefits legitimate users for a change, especially after the good feedback for the search as a service earlier in the year. So here it is:

One line of code to add a site-specific search to your site

Just add a page (e.g. at /search/) to your site with the following one line of code (changing data-domain to your domain):

<script src="https://searchmysite.net/static/js/sms-search.js" data-domain="michael-lewis.com"></script>

And you get a search box which allows site-specific searching of your site.

You can see it in action on my personal site at https://michael-lewis.com/search/. You can also link directly to specific queries, e.g. https://michael-lewis.com/search/?q=antarctica.

Notes on implementing this with Hugo static site generator

I use Hugo static site generator for https://michael-lewis.com/, and the full steps I followed were:

Configure Hugo to allow HTML in the markdown

By adding the following to the config.toml:

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

(I had actually done this already to allow the obfuscated email address at https://michael-lewis.com/about/.)

Create a new content page

e.g. at content/search, by (i) creating a new folder below content called search, (ii) creating a new index.md in that new folder, and (iii) putting the standard Hugo front matter in that index.md:

---
title: "Search michael-lewis.com"
tags: ["search"]
keywords: ["search"]
description: "Search michael-lewis.com"
categories: []
draft: false
---

The page then showed up on my local dev (http://localhost:1313/search/) with the standard header and footer, and the title, but with nothing in the content area.

Add the one-line to the index.md

<script src="https://searchmysite.net/static/js/sms-search.js" data-domain="michael-lewis.com"></script>

The page then showed the new search box.

Test, and publish when ready

Note that if you just have a Basic listing the search box will take you to a results page on searchmysite.net, so you can test this on a local development environment without any issues. However, if you have a Full listing (or Free Trial) the search box will show results within your own site, but due to Cross-Origin Resource Sharing (CORS) this will not work between a local development environment and searchmysite.net, so on a local dev the behaviour falls back to that for a Basic listing. If you want to test the Full listing behaviour locally, you can either set up an entry in /etc/hosts e.g. 127.0.0.1 michael-lewis.com and test locally via e.g. http://michael-lewis.com:1313/search/, or you can run a browser with web security disabled, e.g. for chrome run google-chrome --disable-web-security --user-data-dir=/tmp/cors-test and open http://localhost:1313/search/.