How to Add Site Search with SearchKit Admin and SearchBar in StacksApp
This tutorial shows you how to set up SearchKit Admin and SearchBar in your Stacks site to index your content and add a fast search bar for users.
What You Need:
- StacksApp or the Stacks Plugin.
- SearchKit Admin and SearchKit SearchBar stacks.
- A Stacks site to index (e.g., blog, store).
Step 1: Add SearchKit Admin to Your Project
1. Open your StacksApp project and create a new Stacks Page.
2. Drag the SearchKit Admin stack onto the page.
3. Name the page (e.g., /searchkit-admin) and publish.
Step 2: Configure SearchKit Admin Settings
1. General Settings:
- Site URL: Set your Stacks site’s root (e.g., https://example.com or /blog).
- Language: Choose your UI language (e.g., English, French).
- Show Notes?: Check to see setup instructions in preview mode.
2. Crawling Settings:
- Crawl Depth: Set to 3 to index most pages (1-5 range).
- Exclude URLs: Add patterns to skip (e.g., /login, /admin/.\*, \*.pdf).
- Crawl Speed: Use Medium (500ms) to balance speed and server load.
- Crawl Budget: Set to 500 pages (100-1000 range).
3. Ranking Weights:
- Adjust weights (0.0-10.0) to prioritize results. Example: Set title_weight to 8.0 and content_weight to 4.0 for a blog.
4. Advanced Settings:
- Create Log?: Check to enable logging for debugging (crawl_log.txt).
Step 3: Crawl Your Stacks Site
1. Click "Crawl Now" in the SearchKit Admin page.
2. Wait for the crawl to finish—check progress in the UI.
3. View "Search Health" for index size and "Broken Links" for 404s (e.g., /store/old-page).
Step 4: Add SearchKit SearchBar to Your Stacks Page
1. Open a public-facing Stacks Page in StacksApp (e.g., your homepage).
2. Drag the SearchKit SearchBar stack onto the page.
3. Customize the placeholder text if needed (default: "Search pages...").
4. Publish your Stacks site.
Step 5: Test the Search
1. Go to the Stacks Page with SearchKit SearchBar.
2. Enter a term (e.g., "blog post") and verify results show relevant pages.
3. Check that titles and content snippets highlight matches.
Step 6: Optional - Schedule Automatic Crawls
1. For automated re-crawls, set up a cron job on your server.
2. Use: php %siteAssetPath%/SearchKit/cron_crawl.php (e.g., run `0 0 * * *` for daily at midnight).
Your Stacks site now has a powerful search feature! Use SearchKit Admin to re-crawl or adjust settings as needed, and SearchKit SearchBar will keep delivering fast results.
