Skip to main content

How to setup docusaurus

· 2 min read
  • setup project
  • setup i18n
  • build prod

1. setup project​

# cd <path where package.json resides>
rm package-lock.json
# automatically save it in dependencies
npm install @docusaurus/faster
npm i

2. setup i18n​

npx docusaurus write-translations

example of translated blog​

mydocuproject/
├── blog
│	└── 2025-09-27-setup-docusaurus/
│		└── index.md
├── docs
│	└── intro.md
├── i18n
│	├── en
│	└── it
│		└── docusaurus-plugin-content-blog/
│			└── 2025-09-27-setup-docusaurus/
│				└── index.md
└── ...

3. build prod​

# build after translations write
npm run clear && npm run build
# or if windows: 
#   npm run clear; npm run build

4. dev (if I remeber correctly traslation don't work in dev mode)​

npm run clear && npm run start

Plugins​

setup math equations​

npm install --save remark-math@6 rehype-katex@7

Download also katex's css:

mkdir ./static/katex
cd ./static/katex
curl -o katex.min.css https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css

# copy fonts
mkdir ./static/katex/fonts
cp node_modules/katex/dist/fonts/*.woff2 static/katex/fonts/

Then edit docusaurus.config.js:

import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default {
    presets: [
        [
            '@docusaurus/preset-classic',
            {
                docs: {
                    path: 'docs',
                    remarkPlugins: [remarkMath],      // ← here
                    rehypePlugins: [rehypeKatex],     // ← here
                },
                blog: {
                    remarkPlugins: [remarkMath],      // ← here
                    rehypePlugins: [rehypeKatex],     // ← here
                },
            },
        ],
    ],
    // ...
    stylesheets: [
        // ...
        {
            href: '/katex/katex.min.css',
            type: 'text/css',
        },
    ],
};

The create an .mdx file:

$$
I = \int_0^{2\pi} \sin(x)\,dx
$$

or

```math
I = \int_0^{2\pi} \sin(x)\,dx
```
npm run clear && npm run start
# or if windows: 
#   npm run clear; npm run start

sources​