Quick Start
From download to live site with full-text search in under ten minutes.
Before you begin
- A text editor — VS Code is free and works well
- A static hosting account — GitHub Pages or Netlify (both free)
- Node.js installed — required once to activate search
Steps
1 — Unzip the download
Extract the ZIP file to a folder on your computer.
2 — Open index.html in your browser
Double-click index.html. It opens directly. The search bar appears but won't return results until you run the indexer below.
3 — Edit the content
Open any .html file in your text editor. Replace placeholder text inside the .content div. Leave the topbar, sidebar, and script block unchanged.
<div class="page-label">Getting Started</div>
<h1>Your Title</h1>
<p class="page-intro">Your intro text.</p>
<h2>Your section</h2>
<p>Your content.</p>4 — Update the sidebar
The sidebar is the same HTML block in every file. When you rename or add a page, update the href across all files and set class="nav-link active" only on the current page's link.
5 — Activate search
Run the Pagefind indexer once from your project folder:
npx pagefind --site .This creates a pagefind/ folder with the search index. Re-run it whenever you publish new or updated content.
file://. To test locally before deploying, serve with npx serve . and open http://localhost:3000.
6 — Deploy
Upload the entire folder — including the pagefind/ folder — to your static host. See the Deployment guide for step-by-step instructions.
npx pagefind --site . before re-uploading. The index is fast — typically under 5 seconds for a 20-page site.
Adding a new page
- Duplicate any existing
.htmlfile - Rename it (e.g.
guide-billing.html) - Change the
<title>tag - Replace content inside
.content - Add a sidebar link in every page
- Set
class="nav-link active"on the new file's link only - Re-run
npx pagefind --site .