The search field in your Docusaurus site doesn’t come out-of-the-box. If you want to add the full-text search to your Docusaurus site and deploy the site to GitHub Pages, follow the instructions.
Contents
What’s Lunr.js
The lunr.js search plugin for the Docusaurus site is a node.js package. Use it to add the full-text search functionality to your Docusaurus site.
Prerequisites
To add the lunr.js search plugin, you must have installed:
Node.js. Run node --version in your Command Prompt to see if it’s installed. If you don’t see the version, download the installer here: https://nodejs.org/en.
Docusaurus. Run npx docusaurus --version. If you don’t see the version of Docusaurus, install it using these instructions.
How to install lunr.js
To install lunr.js search for your Docusaurus site:
1. Run npm i docusaurus-lunr-search --save in your Docusaurus site folder. For example, when you open Command Prompt, you have this path: C:\Users\Ivan_Cheban> where Ivan Cheban is your username. To go to the folder where your Docusaurus is installed: cd test-website where test-website is the folder with your Docusaurus project.
2. Add the docusaurus-lunr-search plugin to your docusaurus.config.js file:
Expand to view code
plugins: [
require.resolve('docusaurus-lunr-search')
],Your docusaurus.config.js file will look like this:
Remember that your Lunr.js search works only in production. It means that you can’t check the search locally, you need to deploy your website, for example to GitLab Pages or Netlify to see how it works. To deploy your site to GitLab Pages, read this article.
Deploy your site to GitHub Pages
To deploy your Docusaurus site online using GitHub Pages:
1. In Visual Studio Code, open the Docusaurus project folder.
2. Go to the Source Control tab.
3. Click Publish to GitHub.
4. Select Publish to GitHub public repository.
5. Click Open on GitHub to open the browser GitHub page with the created repository.
6. In your docusaurus.config.js file, change the values for the following fields:
baseUrl: /test-website/
organizationName: ivancheban
projectName: test-website
Your docusaurus.config.js file would look like this:
7. Create a folder and file in the root of your Docusaurus project folder: .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
push:
branches:
- main
# Review gh actions docs if you want to further define triggers, paths, etc
# https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
jobs:
build:
name: Build Docusaurus
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: actions/setup-node@v4
with:
node-version: 18
cache: npm
- name: Install dependencies
run: npm install --frozen-lockfile
- name: Build website
run: npm run build
- name: Upload Build Artifact
uses: actions/upload-pages-artifact@v3
with:
path: build
deploy:
name: Deploy to GitHub Pages
needs: build
# Grant GITHUB_TOKEN the permissions required to make a Pages deployment
permissions:
pages: write # to deploy to Pages
id-token: write # to verify the deployment originates from an appropriate source
# Deploy to the github-pages environment
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v48. Add a new branch called gh-pages.
9. In your GitHub website, go to Settings > Pages and select a branch from which you want to deploy your Docusaurus site. Type: gh-pages. Click Save.
10. Commit and push your changes to the remote repository.
11. Go to Actions in your web repository. You should see the pipeline and the site being built.
You can check the settings in the repository and the site here:
Comments