5

I'm developing an encyclopedia-type site, of sorts. Essentially the site contains pages for words, definitions, concepts, and blog posts, and I intend to add a new page/post every week or so. I currently have about 40 HTML pages for each post. Previously I had been publishing a repository of the site to Github Pages, but recently I made the decision to host my website through Netlify. So far, I've enjoyed Netlify's features and it has improved my development process pretty well.

However, my website remains static. To be clear, I haven't created the site's files with a static site generator such as Next.js or Jekyll. I wanted the project to be a practice for hard-coding. The only files in the directory currently are HTML, CSS, and JS files (along with git attributes and things like icons and fonts) I've looked through Netlify's web applications and functions sections, however, nothing that I've found really hits the mark, whether it's because I'm a new user to Netlify, or because I don't necessarily have much experience in site indexing and/or back-end applications.

My question is, how can I implement a search bar and a title search functionality to the homepage of my static site? This would be for the process of viewers to easily find any specific post of mine once visiting. I would want the search bar to ONLY search the title of each html file (at least for now) in a designated folder I have for posts. Additional questions would be which, if any, web apps should I use to accomplish this, and should I consider changing the process of which I develop and host the site to accommodate for these?

sortarobin
  • 71
  • 2
  • 4

4 Answers4

4

Look at Lunr.js / ElasticLunr.js. Both allow you to create an index as a file and provide Javascript access that can be embedded in your page.

I'm currently working through that process now.

Chuck McKnight
  • 71
  • 7
  • As of June 2023, the lunr.js source has not been updated in almost 3 years. Another alternative under active development is [Stork](https://stork-search.net/) – ishigoya Jun 01 '23 at 02:13
1

I think as you are not using database you can't have search functionality within the application. but you can google search within your website. Check this out. https://cse.google.com/cse/

kushal parikh
  • 821
  • 9
  • 10
  • I think folks have a huge misconception about when a database is needed and when it is not. [MiniSearch](https://github.com/lucaong/minisearch) has worked well for my static sites. It generates an index file that can be stored on the site and searched via the Javascript library. That gives me the ability to version control the index as well so that if by some off chance my static site gets hacked, all I have to do is redeploy from version control. – Chuck McKnight Jun 02 '23 at 14:33
0

I use MiniSearch for full-text and keyword searching on my static sites. It's flexible, relatively fast, and should fulfill your needs. The folks working on it are friendly, helpful, and knowledgeable from my experience.

Chuck McKnight
  • 71
  • 7
0

If you publish a full content RSS feed you may try using that one for scanning the content and returning the corresponding page.

The hard part, doing it yourself, would be writing an accurate and quick algorithm that runs client-side.

77nn
  • 1