How To Build An Easy Search Bar For Your Astro Website With The Pagefind Package 👀
Exactly how we implement an easy Search Bar in our Astro Websites to allow for quick search functionality without a database or having to create complex search indexing's using the pagefind npm package.
At Island Web Design we are building at minimum 10 websites a month for our web design clients and we are using Astro & Sanity for nearly every single one. This gives us a unique insight into the Astro eco system, meaning we are up to date with all the latest technologies and releases usually before they are even taught on YouTube and in this video I am going to show you a simple npm package that we use all the time to create search functionality in our website projects with no database or indexing's.
Pagefind is a super easy to use npm package for adding search functionality to your static website without having to deal with any databases or search indexings. Every time you run or trigger a build on your static Astro website, pagefind will create new indexing's in your dist folder that update every time you rebuild the site.
Not only does this come with a pre built search bar ui component but it is also heavily customisable, along with the indexing's, all of the css files are also in the dist folder meaning if you want to change any of the styles, you can do so very easily.
So if you work with Astro or Sanity or really any static site builder, building websites or blogs or anything like that and you want to allow your users to easily search for your content then this is the tutorial for you.
In the next video I am going to show you how you can do authentication with the new Astro DB Studio so make sure you subscribe for that
And as I mentioned in the video I am just giving away the free value at this point which has encouraged me to create my FREE NEWSLETTER to allow you guys to get early access to all my tips, tricks and videos, along with all our world class design and development work. IT'S FREE! You can sign up on our website https://islandwebdesign.net/
Timestamps:
00:00 - Intro
00:51 - Explanation of project
01:45 - Install the pagefind package
02:05 - Import package in our Astro config file
02:25 - Building the search bar component
03:05 - How the search bar UI component works
03:35 - Adding the search bar to the website
04:40 - How Astro PageFind Works By Building Your Site
05:25 - How the Dist Folder Works For Search Indexing
05:45 - Show search bar working but with no preview searching for websites
05:52 - Why We need to fix the search indexing so only the pages we want are indexed
06:06 - Choosing what you want to index using data attributes
06:30 - Run build again to show search index is only using the things we marked with data attributes
06:52 - Fixing the search preview, by adding data attribute
07:32 - How the data pagefind meta attribute works
07:45 - Building site again to show search preview image now working
08:08 - How we change the title and subtitle of the search preview with data pagefind index attrs and data-pagefind-meta
08:47 - Re-running build to show finished working search bar on website
09:35 - What we do with Astro DB Studio next time
09:44 - Outro about our newsletter and the next videos
⭐️ Previous video on Sanity & Astro: • How I Create Page Builders Using Sani...
⭐️ Astro Docs: https://docs.astro.build/en/getting-s...
⭐️ Pagefind Docs: https://pagefind.app/
⭐️ Follow me on Instagram: / jordanislandwebdesign
⭐️ Sign Up For My Free Newsletter: https://islandwebdesign.net/
#webdevelopmenttutorials #codingtips #webdevelopmentagency #webdesignagency #webdesigntutorial #webdesigntips #guernsey #astrotips #astrojs #codingtutorial #codingtutorials
