Adding search function to static page site

I've discussed some of my reasons for moving my site from WordPress to a static page engine. The one reason I didn't explicitly state is that a static page engine, like Pelican or Jekyll, renders quite a bit faster - ok, a lot faster. The upside to the rendering speed is because the site isn't being queried from a database and then rendered by the Wordpress engine as an HTML page for users to view. The downside to not having a WordPress database is there isn't anything to run queries against to do searches on your own site. This was a problem for me because I use searches on my site daily to find old articles or snippets of stuff I can't remember.

So I knew I needed to be able to add searching capabilities to my site. Here's a general run down on how you can add a search box to your static engine site.

General setup

You can add search to a static page site by taking three steps.

  1. Create a sitemap.html template to generate the sitemap.xml file.
  2. Update your static engine to automatically generate a sitemap.xml file.
  3. Add a search field to your site layout.

What I ended up doing was giving search engines a map of my site and then used that an external search engine to find information on my site. Most search engines allow users to limit search results to a single site, like this:

foo bar site:example.com

So the search results will only return hits found on the example.com site. So adding a search box that only searches my site was the simplest way to go.

Disclaimer: The example below is how I added site searching on a Pelican static page site. I'm guessing the process would be similar for Jekyll, or other static page engines, but you'll have to use your Google-foo if you use another engine.

Create the sitemap.html template

The first part of the process is to give search engines a road map of your site. On Pelican this was handled by adding a template to my theme called sitemap.html.

Now the template rebuilds a sitemap.xml file each time the site is regenerated and adds any new content to the site's map file.

Have Pelican generate sitemap.xml file

Next step is we want Pelican to generate the sitemap.xml file each time we regenerate the site. To do this you direct Pelican to use the sitemap.html template, even though it isn't being directly called by the core templates. To do this you add a line to your pelicanconf.py configuration file.

DIRECT_TEMPLATES = ('index', 'tags', 'categories', 'archives', 'sitemap')

After adding and saving the config file, the sitemap.html template will get polled when the site regenerates and create the sitemap.xml file.

Adding search in your sidebar

The last part is adding a search box to your site. We gave the search engines a map of the site in the previous step, now we want to add the search box into a site template so it is visible when the site in regenerated and viewed in a browser. In my case my theme had a sidebar template where the search field would be a perfect placement for the box. You could use a similar technique to add a search bar in other template files to show up in your preferred spot on the page.

The search engine I chose to use is DuckDuckGo. DDG has a great page on how to create a search box for your site - DDG Search Box Tutorial. After using the DDG tools and the tips from hardik.org, I got the following HTML snippet:

<section>
        <h1>Search</h1>  
            <form method="get" id="search" action="http://duckduckgo.com/">
                <input type="hidden" name="sites"value="mygeekdaddy.me"/>
                <input type="hidden" name="ka" value="h"/>
                <input type="hidden" name="k7" value="w"/>
                <input type="hidden" name="kj" value="#434843"/>
                <input type="hidden" name="ky" value="#F3FEF3"/>
                <input type="hidden" name="kx" value="#384338"/>
                <input type="hidden" name="kt" value="Helvetica"/>
                <input type="text" name="q" maxlength="255" placeholder="via DuckDuckGo"/>
                <input type="submit" value="Go!"  />
            </form>
        </section>

The full sidebar.html template looks like this:

Note: Due to the age of my new static page site, results may be limited. For sites that have been online for a while, you would see immediate results from previous site crawls.

Comments

Top