Add full-text search to your static site with Pagefind.
It scans your built site, creates a fast index, and adds a client-side search UI.
Get in touch on the forums or in the chat if you need more info, help make this page better
Here is how it acctually looks:
¶ Prerequisites
- Your site publishes via GitLab Pages
¶ Installation in a Silex site
1. In GitLab find your website project and edit the file .gitlab-ci.yml.
2. Prevent Silex from resetting your changes during the next publication
At the top of the file you may see
# silexOverwrite: true
If needed, change it to
# silexOverwrite: false
3. Add the Pagefind step after the build:
A/ If you use data sources (Eleventy build with _site):
Add this line after npx @11ty/eleventy
- npx @pagefind/cli --source _site --output-subdir
Here’s a full example:
# silexOverwrite: false
image: node:20
pages:
stage: deploy
environment: production
script:
- npx @11ty/eleventy@v3.0.0-alpha.20 --input=public --output=_site
- npx @pagefind/cli --source _site --output-subdir
- mkdir -p public/css public/assets && cp -R public/css public/assets _site/
- rm -rf public && mv _site public
- echo "The site will be deployed to $CI_PAGES_URL"
artifacts:
paths:
- public
rules:
- if: '$CI_COMMIT_TAG'
- if: '$CI_PIPELINE_SOURCE == "trigger"'
B/ If you don’t use data sources (just public folder):
Add this line anywhere in script
- npx @pagefind/cli --source public --output-subdir
Here’s the full file:
# silexOverwrite: false
image: node:20
pages:
stage: deploy
environment: production
script:
- echo "The site will be deployed to $CI_PAGES_URL"
- npx @pagefind/cli --source public --output-subdir
artifacts:
paths:
- public
rules:
- if: '$CI_COMMIT_TAG'
- if: '$CI_PIPELINE_SOURCE == "trigger"'
4. Commit the file
Click "commit changes"
5. Back in Silex, click Publish again
6. After the pipeline finishes, your site will have a /pagefind/ folder containing the search index
¶ A search bar in your Silex site
To add a search bar, place the Pagefind UI snippet inside your page.
Open the "head editor":
"site settings" then "code"
or "page settings" then "code"
Here is the "head editor" to paste any HTML code in the head of your site:
Here is the code to paste there
<!-- Include Pagefind script -->
<script src="/pagefind/pagefind-ui.js"></script>
<script>
new PagefindUI({
element: "#search",
showImages: true
});
</script>
Then on the canvas, drop an element and give it the ID:
This is the HTML that pagefind expects (do it with drag and drop in Silex):
<div id="search"></div>
This renders a search input with instant results.
¶ Styling
You can override the default styles using pagefind-ui__search-input in Silex:
Here are the typical css class pagefind expects:
.pagefind-ui__search-input {
border-radius: 6px;
padding: 8px;
font-size: 1rem;
}
¶ Advanced options
You can customize language, result templates, or hide/show metadata.
See the Pagefind docs for the full list.
¶ Related docs
- Pagefind project pagefind.app
- Pages and links pages
- 11ty plugins in Silex docs cms-plugins