DOCSEARCHbyAlgolia
Submit Docs

Docusaurus Documentation

website·Indexed 30 days ago

https://docusaurus-ten-ivory.vercel.app/

A static-site-generator (Jamstack) designed for quickly building websites. Features include support for React and Markdown pages, a built-in blog plugin with tag and author systems, documentation versioning, and i18n configuration for site translation.

Tokens
2.6K
Snippets
25
Records
29
Agent score
75%

What's inside Docusaurus

  1. Overview of Docusaurus core features

    Docusaurus is a documentation framework designed for quick installation and deployment. It allows developers to focus on content by placing documentation files in the docs directory and provides extensibility through React, enabling the customization of website layouts while maintaining consistent global elements like headers and footers.

  2. Create interactive blog posts using MDX in Docusaurus

    Docusaurus blog posts support MDX, allowing you to embed React components and JSX directly within your blog content to create interactive elements.
    <button onClick={() => alert('button clicked!')}>Click me!</button>

  4. Limit blog post preview size in Docusaurus list view

    To limit the amount of content displayed for a blog post in the list view, insert the <!-- truncate --> HTML comment at the point where the preview should end. Content following this comment will only be visible on the full blog post page.
    This is the summary that will appear in the list view.

<!-- truncate -->

This content is hidden in the list view and only appears on the full post page.

  5. 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. Run the Docusaurus development server

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

  9. Install and initialize a new Docusaurus site

    To create a new Docusaurus site using the classic template, run the npm init docusaurus@latest command. This process automatically generates the project structure and installs all necessary dependencies.

    Prerequisites:

    • Node.js version 20.0 or above is required. It is recommended to install all suggested dependencies during the Node.js installation process.
    npm init docusaurus@latest my-website classic