DEV Community

Ralf πŸ’₯πŸ”₯β˜„οΈ
Ralf πŸ’₯πŸ”₯β˜„οΈ

Posted on

Adding scripts to every page of a docusaurus project

If you aren't familiar with docusaurus (v2), it's an open source static site generator. It's mostly used for documentation, but it can also be used for blogs or any other static site.

I used it to build a very basic info page for kiss.js https://kissdev.io and I wanted to add simpleanalytics to it. This requires me to add a little js script to every site that should be tracked.

Docusaurus doesn't expose it's index.html like eg create-react-app, so it's not trivial to find a place to paste your tracking script.

Here is how I did it:

run in you project folder:

npm run swizzle @docusaurus/theme-classic Footer

(of course the command changes if your project is not based on theme-classic)

This command will download the code of the default Footer used on every page and copy it into your project directory.

You can now make changes to the footer component. Just paste your scripts right before the closing tag.

Top comments (0)