SSG Search — Adding Search Functionality to Static Sites

// scripts/generate-search-index.js — Build-time index generation
const fs = require('fs');
const path = require('path');
const glob = require('glob');

const contentDir = './public';
const outputDir = './public/search';

if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir, { recursive: true });
}

// Collect all HTML files and extract text
const files = glob.sync(`${contentDir}/**/*.html`);
const documents = [];

files.forEach(filePath => {
    const html = fs.readFileSync(filePath, 'utf8');
    const relativePath = path.relative(contentDir, filePath);

    // Extract title from <title> tag
    const titleMatch = html.match(/<title>(.*?)<\/title>/);
    const title = titleMatch ? titleMatch[1] : '';

    // Extract text content (strip HTML tags)
    const text = html
        .replace(/<script[\s\S]*?<\/script>/gi, '')
        .replace(/<style[\s\S]*?<\/style>/gi, '')
        .replace(/<[^>]*>/g, ' ')
        .replace(/\s+/g, ' ')
        .trim();

    documents.push({
        id: relativePath,
        title,
        url: '/' + relativePath.replace(/index\.html$/, ''),
        text: text.substring(0, 5000),
    });
});

// Generate the search index as JSON
const searchData = {
    documents,
    index: null, // Built on client side
};

fs.writeFileSync(
    path.join(outputDir, 'data.json'),
    JSON.stringify(searchData)
);

console.log(`Indexed ${documents.length} pages for search.`);

// static/js/search.js — Client-side search
const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');

let documents = [];

// Load search data
async function loadSearchIndex() {
    const response = await fetch('/search/data.json');
    const data = await response.json();
    documents = data.documents;
}

// Simple search implementation
function search(query) {
    const terms = query.toLowerCase().split(' ').filter(Boolean);

    return documents
        .map(doc => {
            const text = doc.text.toLowerCase();
            const title = doc.title.toLowerCase();

            // Score based on matches
            let score = 0;
            terms.forEach(term => {
                if (title.includes(term)) score += 10;
                if (text.includes(term)) score += 1;

                // Count occurrences
                const titleMatches = (title.match(new RegExp(term, 'g')) || []).length;
                const textMatches = (text.match(new RegExp(term, 'g')) || []).length;
                score += titleMatches * 5 + textMatches * 0.5;
            });

            return { ...doc, score };
        })
        .filter(doc => doc.score > 0)
        .sort((a, b) => b.score - a.score)
        .slice(0, 10);
}

// Handle search input
searchInput.addEventListener('input', (e) => {
    const query = e.target.value.trim();

    if (query.length < 2) {
        searchResults.innerHTML = '';
        searchResults.classList.remove('active');
        return;
    }

    const results = search(query);

    searchResults.innerHTML = results
        .map(result => `
            <a href="${result.url}" class="search-result">
                <h3>${result.title}</h3>
                <p>${result.text.substring(0, 150)}...</p>
            </a>
        `)
        .join('');

    searchResults.classList.add('active');
});

loadSearchIndex();

// package.json — Pagefind with Hugo/11ty
{
    "scripts": {
        "build": "hugo --minify && npx pagefind --source public",
        "dev": "hugo server & npx pagefind --source public --serve"
    }
}

// _layouts/default.html — Pagefind UI
<script src="/pagefind/pagefind-ui.js"></script>
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">

<div id="search"></div>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({
            element: '#search',
            showSubResults: true,
            showImages: false,
            resetStyles: false,
            bundlePath: '/pagefind/',
            highlightParam: 'highlight'
        });
    });
</script>
// Pagefind generates the index automatically.
// No custom scripts needed — just add the UI element.

// scripts/push-to-algolia.js — Build-time indexing
const algoliasearch = require('algoliasearch');
const glob = require('glob');
const fs = require('fs');

const client = algoliasearch(
    process.env.ALGOLIA_APP_ID,
    process.env.ALGOLIA_ADMIN_KEY
);
const index = client.initIndex('content');

// Collect and index content
const files = glob.sync('./public/**/*.html');
const records = [];

files.forEach((filePath, i) => {
    const html = fs.readFileSync(filePath, 'utf8');
    const relativePath = filePath.replace('./public/', '');

    const title = html.match(/<title>(.*?)<\/title>/)?.[1] || '';
    const text = html
        .replace(/<script[\s\S]*?<\/script>/gi, '')
        .replace(/<style[\s\S]*?<\/style>/gi, '')
        .replace(/<[^>]*>/g, ' ')
        .replace(/\s+/g, ' ')
        .trim()
        .substring(0, 8000);

    records.push({
        objectID: relativePath,
        title,
        url: '/' + relativePath.replace(/index\.html$/, ''),
        content: text,
        lastUpdated: new Date().toISOString(),
    });
});

// Send to Algolia in batches
index
    .saveObjects(records, { batchSize: 100 })
    .then(({ objectIDs }) => {
        console.log(`Indexed ${objectIDs.length} records to Algolia`);
    })
    .catch(err => console.error('Algolia indexing failed:', err));