Implementing search functionality on a full-stack application is hard. But doing it on a static site might seem impossible. After all, you don’t have
a database to query, right?
Fortunately, the Astro web framework has an API, where you can fetch the markdown or MDX files you need. After fetching all the data, we’ll able to search
for a specific query provided by our users.
Here is a demo of what we’re going to build.
Let’s build an Astro search component by using React and fuse.js.
Note:
The source code for this project is available on this GitHub
repository.
Creating an Astro Blog Project
Let’s kick things off by creating an Astro project. I built an in-depth guide on how to start an Astro project
if you have any questions about this process.
I’ll be using the recommended starting template by Astro.
npm create astro@latest
✔ Where would you like to create your new project? … Astro-search-component
✔ How would you like to setup your new project?...