myamio Blog
Back to articles

About Search Functionality in Astro Blog (Pagefind)

astropagefindsearchtech

Feature Overview

Astro allows for the implementation of full-text search across all blog posts. By adopting “Pagefind”, a static site search library, it provides a fast and lightweight search experience without requiring server-side processing. It is designed to make it easier to find past articles as the number of posts increases, with automatic index generation and rapid result display for users.

What You Can Do with This Search Feature

The search feature offers the following capabilities:

  • Full-Text Search: Searches across titles, body text, and tags of all articles.
  • Language-Specific Indexing: Separate indices are managed for the Japanese and English versions, displaying appropriate results for each language.
  • Real-Time Search: Results are displayed in real-time as you type keywords.
  • Automatic Index Generation: The search index is automatically generated during the site build process, eliminating the need for manual updates.

Mechanism and Operating Environment

The search feature operates based on data generated as static files.

  • Configuration: The search package is added as a dependency, and the system is configured to automatically generate the search index after the site build. Generated data is stored within the output directory.
  • Page Layout: A page component for displaying the search UI is placed, utilizing necessary attributes.
  • Operating Environment: Since the search feature depends on static files generated during build, it does not function in the development environment and is only available in the production environment.

Users can utilize the search feature in the following ways:

  • Access Method: Click the “Search” link in the page header or access the URLs directly at /search (Japanese) or /en/search (English).
  • Search Operation: Enter keywords into the search box to see real-time results. Clicking a result will navigate you to the detailed page.
  • Search Tips:
    • Multiple Keywords: Entering keywords separated by spaces will narrow down results to articles containing all keywords.
    • Tag Search: You can search for articles with specific tags by entering the tag name.
    • Partial Match: Partial match searching is performed against the included text.

Customization and Notes

The following customizations and limitations apply to this feature:

  • Excluding from Search: You can exclude specific HTML elements from the search index by adding attributes to them.
  • Design Adjustments: Colors can be changed to match the site theme by defining CSS variables.
  • Operational Notes: Since the index is generated at build time, the build must be re-run whenever a new article is published. Additionally, the search feature is disabled on the development server by design.

Frequently Asked Questions

Common issues and solutions are as follows:

  • Search results are not displayed: Check if the build has been executed and if the index directory exists. Checking for errors in the browser console is also effective.
  • Search is slow: If there are many articles, the initial load may take some time. Enabling browser caching can improve this.
  • New articles are not reflected: The index is a snapshot at the time of the build, so be sure to re-run the build.
  • Issues with language-specific search: Verify that the article’s language settings and collection placement are correct. Try clearing the cache as well.

Potential Feature Additions

The following features could be added in the future:

  • Customizing search result weighting.
  • Adding a search history feature.
  • Implementing search keyboard shortcuts (e.g., Cmd+K).

Related Articles