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 a template that implements this plugin, you can fork it to see how it works in Silex. You will probably be interested in this file where the plugin is installed.
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 -y pagefind@1.4.0 --site _site
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 -y pagefind@1.4.0 --site _site
- 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 -y pagefind@1.4.0 --site public
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 -y pagefind@1.4.0 --site public
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, check https://docs.silex.me/en/user/search -->
<link rel="preload" href="pagefind/pagefind-ui.css" as="style" onload="this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="pagefind/pagefind-ui.css">
</noscript>
<script src="/pagefind/pagefind-ui.js"></script>
<script>
window.addEventListener('load', (event) => {
new PagefindUI({
element: "#search",
showSubResults: true
});
});
</script>
Then on the canvas, drop a container 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