11ty Serverless Search

screenshot of 11ty Serverless Search
eleventy
scss

An example of using 11ty Serverless to. create site search using local and external data sources.

Overview:

11ty Serverless Search is an example of how to use 11ty Serverless to create a site search feature. It allows users to search for content within a website using local and external data sources.

Features:

  • Local and External Data: 11ty Serverless Search fetches results from both local and external sources. Local data is generated from an array of post data using a prebuild/prestart Node script. External data is fetched from Stephanie Eckles' dev.to profile.
  • Custom Collection: The combined custom collection is passed through an 11ty filter to search the content and return search results.
  • Development Scripts: Includes npm scripts for running 11ty with hot reload at localhost:8080 and building the production version with minified, autoprefixed CSS.

Summary:

11ty Serverless Search is an example of using 11ty Serverless to create a site search feature with both local and external data sources. It provides a custom collection and development scripts for easy setup and usage.

eleventy
Eleventy

11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.