Visitar URL original
stackbit-examples/algolia-search at main · stackbit-themes/stackbit-examples · GitHub
Skip to content

Latest commit

 

History

History

README.md

Example App: Search for Jamstack themes

Netlify Status

Showcasing: Stackbit, Algolia & on-demand static generation with Next.js

Live demo: search-example.stackbit.app.

image

Details of all themes in jamstackthemes.dev are copied into this repository (under /content).
Individual themes can be then added & edited within the Stackbit UI, and are indexed to Algolia to power a fast search.

There are currently about ~1,000 themes, and each has its own page. To keep build times short, we're not actually generating all pages at build time. Rather, we use Next's dynamic routes + the fallback parameter to instruct Next to generate pages on demand. Meaning, once per page (after each deployment) only.

How to run

Running the site locally

If you don't have an existing Algolia account, create one (it's free).

Create a new local project:

npx create-stackbit-app@latest --example algolia-search
cd algolia-search

Then do the following:

  1. Copy env.local.example to env.local and set the needed Algolia settings (find them in Algolia's API Keys screen).
  2. Index themes data to Algolia: npm run index.
  3. Run your site in development mode: npm run dev.
  4. You can now open localhost:3000.

Visual Editing in Stackbit

To edit the site in the Stackbit UI (a.k.a. local dev):

  1. Install our CLI (if you haven't already): npm i -g @stackbit\cli.
  2. Run stackbit dev.
  3. Click the shown URL.

Get answers

Join us on Discord for community support.