DOCSEARCHbyAlgolia
Submit Docs

Docusaurus Documentation

website·Indexed 31 days ago

https://docs.produtodigital.net

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

Tokens
2.6K
Snippets
26
Records
30
Agent score
50%

What's inside Docusaurus

  1. 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) are displayed automatically upon saving.
    cd my-website
npm run start

  2. 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> !

  3. Embed images in Docusaurus Markdown

    Images can be referenced using absolute paths (pointing to the static directory) or relative paths (colocated with the Markdown file).
    # Absolute path to static/img/docusaurus.png
![Docusaurus logo](/img/docusaurus.png)

# Relative path to image
![Docusaurus logo](./img/docusaurus.png)

  5. Create a blog post in Docusaurus

    To create a blog post in Docusaurus, create a markdown file within the blog/ directory. The filename should typically follow a date-based naming convention (e.g., YYYY-MM-DD-title.md). Docusaurus automatically generates a dedicated page for the post, adds it to the blog index page, integrates it into the tag system, and includes it in the RSS feed.
    ---
slug: greetings
title: Greetings!
authors:
  - name: Joel Marcey
    title: Co-creator of Docusaurus 1
    url: https://github.com/JoelMarcey
    image_url: https://github.com/JoelMarcey.png
  - name: Sébastien Lorber
    title: Docusaurus maintainer
    url: https://sebastienlorber.com
    image_url: https://github.com/slorber.png
tags: [greetings]
---

Congratulations, you have made your first post!

Feel free to play around and edit this post as much as you like.

  6. Create a basic document in Docusaurus

    In Docusaurus, documents are created as Markdown files within the docs folder. Creating a file at docs/hello.md automatically makes the document available at the corresponding URL path (e.g., http://localhost:3000/docs/hello).
    # Hello

This is my **first Docusaurus document**!

  7. Limit blog post preview size in list view

    To limit the amount of content displayed for a blog post in the list view, insert the <!-- truncate --> HTML comment within the post content. Content appearing after this comment will be hidden in the list view and only visible on the full post page.
    This is the summary that will appear in the list view.

<!-- truncate -->

This content will be hidden in the list view and only shown on the full post page.

  9. Translate a documentation page

    To translate a document, copy the original markdown file from the docs folder into the corresponding locale directory within the i18n folder. The path follows the pattern: i18n/{locale}/docusaurus-plugin-content-docs/current/{filename}.md.
    mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md

  10. Create a new documentation version in Docusaurus

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

    After creation, the documentation is split into two paths:

    • The released version (e.g., 1.0) is available at /docs/.
    • The upcoming, unreleased documentation (the current version) is available at /docs/next/.
    npm run docusaurus docs:version 1.0

  11. Create and organize blog posts in Docusaurus

    Docusaurus blogging features are powered by the @docusaurus/plugin-content-blog plugin. To create blog posts, add Markdown files or folders to the blog directory.

    Post dates are automatically extracted from filenames using the format YYYY-MM-DD-title.md (e.g., 2019-05-30-welcome.md) or by placing an index.md inside a folder named with the date (e.g., 2019-05-30-welcome/index.md). Using a folder for a post is recommended for co-locating images with the content.