DOCSEARCHbyAlgolia
Submit Docs

Docusaurus Documentation

website·Indexed 29 days ago

https://tusoul-docs.netlify.app

Documentation for Docusaurus, a static-site generator (Jamstack) used to build websites with Markdown and React. Includes tutorials on creating documents, React pages, blog posts, configuring i18n, and managing documentation versions for versions 1.0 and Next.

Tokens
4.6K
Snippets
50
Records
55
Agent score
74%

What's inside Docusaurus

  3. Run the Docusaurus development server

    After generating a site, navigate into the project directory and start the development server. This builds the website locally and serves it at http://localhost:3000/. The server supports hot-reloading, meaning changes made to files (such as docs/intro.md) will be reflected automatically in the browser.
    cd my-website
npm run start

  4. Create a new documentation version in Docusaurus

    To release a specific version of your documentation, use the docs:version CLI command. This process copies the current docs folder into a new versioned directory (e.g., versioned_docs/version-1.0) and creates a versions.json file to track the versions.

    After creating a version, Docusaurus maintains two sets of docs:

    1. The released version (e.g., 1.0) available at /docs/.
    2. The 'current' version (upcoming, unreleased docs) available at /docs/next/.
    npm run docusaurus docs:version 1.0

  5. Update content for specific documentation versions

    Docusaurus allows editing of both released and unreleased documentation by modifying files in their respective directories:

    • To update a released version: Edit files in versioned_docs/version-X.X/ (e.g., versioned_docs/version-1.0/hello.md updates the content at /docs/hello).
    • To update the upcoming version: Edit files in the main docs/ folder (e.g., docs/hello.md updates the content at /docs/next/hello).

  6. Use React components in Markdown via MDX

    Docusaurus supports MDX, allowing you to export and use React components directly within your Markdown files to create interactive documentation.
    export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`You clicked the color ${color} with label ${children}`)
    }}>
    {children}
  </span>
);

This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !

  7. Prerequisites for installing Docusaurus

    To run Docusaurus, you must have Node.js version 18.0 or above installed. It is recommended to install all suggested dependencies during the Node.js installation process.

  9. Create interactive blog posts using MDX in Docusaurus

    Docusaurus blog posts support MDX, allowing the use of React components and JSX directly within markdown files. This enables the creation of interactive elements, such as buttons with event handlers, inside blog content.
    <button onClick={() => alert('button clicked!')}>Click me!</button>

  10. Update content for specific documentation versions

    Docusaurus allows independent editing of versioned and unreleased documentation.

    • To update a specific released version, edit the files within the corresponding folder in versioned_docs/ (e.g., versioned_docs/version-1.0/hello.md).
    • To update the upcoming/unreleased version, edit the files in the main docs/ folder (e.g., docs/hello.md).

  11. Create a new documentation version in Docusaurus

    Use the Docusaurus CLI to snapshot the current state of your docs folder into a versioned directory. This creates a static copy of the documentation for a specific release. After running the command, the docs folder is copied to versioned_docs/version-[versionNumber] and a versions.json file is generated.

    Once versioned, the site will host two versions:

    1. The released version (e.g., 1.0) at /docs/.
    2. The upcoming, unreleased version (marked as 'next') at /docs/next/.
    npm run docusaurus docs:version 1.0