Creating the Document Collection
For Lunr to search your site, it needs to know about all of the documents available, and it’ll need the titles and some text to search. Lunr accepts a collection of documents that looks something like this:
| | [{ |
| | "name": "A document", |
| | "text": "A bunch of content filled with amazing thoughts." |
| | }, { |
| | "name": "A second document", |
| | "text": "Similar, but different from the first one." |
| | }] |
To generate the search index that Lunr needs, you’ll use an approach similar to how you generated the projects JSON feed; you’ll create a layout for the search index that iterates through all of the pages in the site, emitting the fields that Lunr will use. Later, you’ll fetch this JSON file from the server using JavaScript, parse it with Lunr, and match it against the search terms your visitor provides.
Create the file themes/basic/layouts/_default/search.json and add the following code which iterates through all the pages in the site and displays the title, the body, and the link to the page:
| | { |
| | "results": [ |
| | {{- range $index, $page := .Site.RegularPages }} |
| | {{- if $index -}} , {{- end }} |
| | { |
| | "href": {{ .Permalink | jsonify }}, |
| | "title": {{ .Title | jsonify }}, |
| | "body": {{ .Content | plainify | jsonify }} |
| | } |
| | {{- end }} |
| | ] |
| | } |
The .RegularPages collection gives you access to all of the pages on the site. You’ll need the link to the page when you eventually display the search results to the visitor.
Next, create the Search content page itself. It won’t have any content, but you need it so you can specify the output formats. Define both an HTML and JSON format, as you’ll create an HTML layout which will display the actual search interface shortly.
Create content/search.md:
| | $ hugo new search.md |
| | /Users/brianhogan/portfolio/content/search.md created |
Modify the file’s front matter so it displays the output formats. Use layout to associate this file with the search layout you created, and make sure draft is set to false:
| | --- |
| | title: "Search" |
| | date: 2020-01-02T12:42:17-05:00 |
| | draft: false |
| » | outputs: |
| » | - HTML |
| » | - JSON |
| » | layout: search |
| | --- |
Save the file. This is enough to generate the search index. Start the Hugo server and visit http://localhost:1313/search/index.json and you’ll see your documents:
| | { |
| | "results": [ |
| | { |
| | "href": "http://localhost:1313/search/", |
| | "title": "Search", |
| | "body": "" |
| | }, |
| | { |
| | "href": "http://localhost:1313/posts/2020/01/third-post/", |
| | "title": "Third Post", |
| | "body": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed |
| | do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
| | Ut enim ad minim veniam, quis nostrud exercitation ullamco |
| | laboris nisi ut aliquip ex ea commodo consequat. " |
| | }, |
| | |
| | ... |
| | |
| | { |
| | "href": "http://localhost:1313/projects/linkitivity/", |
| | "title": "Linkitivity", |
| | "body": "Description of the Linkitivity projectu0026hellip; " |
| | } |
| | ] |
| | } |
You now have a single JSON file that contains the entire contents of your site. Let’s build the page that displays the search box next.
Yes it will. And a large JSON file will take longer for your visitors to download and longer for Lunr to index. You might consider using the summary instead of the entire content. This will reduce the size of the file, but will also reduce the reliability of your searches, as they’ll have less to work with. In that case you can explore other options. On a site like this, a single search index such as this one won’t cause any serious performance issues. On sites with thousands of pages, a solution like Algolia will probably be a better fit.