Giter VIP home page Giter VIP logo

lunr-index-and-search-for-static-sites's Introduction

Lunr-Index-and-Search-for-Static-Sites

This project demonstrates how to build and use a Lunr search index for a static website.

Live demo

Prerequisites

  1. Install Node.js (https://nodejs.org/en/download/).
  2. Create a working directory, separate from the directory with your HTML files.
  3. Open a command window or shell prompt in your working directory.
  4. Install lunr: npm install lunr
  5. Install cheerio, an HTML parser: npm install cheerio
  6. Copy build_index.js into your working directory.
  7. If you want to try this on the example site, copy the example_site folder into your working directory.

Building the Index

  1. Edit build_index.js.
  2. Change the HTML_FOLDER constant to point to the folder with your website's HTML files. Or leave it as is to see how it works for the example site.
  3. You can build the search index on the HTML document title, meta description, meta keywords, and body tags. Specify which of these tags to include using the SEARCH_FIELDS constant.
  4. Save and close build_index.js.
  5. In the command window or shell prompt, enter: node build_index.js

To build the index, the script reads HTML tags from each HTML file and initializes a Lunr index based on tag content. While the Lunr index can be serialized as JSON, the script adds a variable declaration (var LUNR_DATA = ...) so we can easily load it as a script file in our search page.

Lunr search results just provide the identifier of each matching item. To provide title, preview, and hyperlink, the script also includes a dictionary (var PREVIEW_LOOKUP = ...) mapping each identifier to its title, etc.

Using the Index

To see the search index in action:

  1. Build a search index named lunr_index.js for the example site using the instructions above.
  2. Copy lunr_index.js to the example_site folder.
  3. Open search.html in your browser and enter a search term like cat or mango.

lunr-index-and-search-for-static-sites's People

Contributors

twhiteaker avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.