Docusaurus Documentation

website·Indexed 30 days ago

https://docslab.vercel.app

A static-site generator (Jamstack) used for creating documentation sites. Features include Markdown and MDX support, versioning for docs, i18n translation, and a built-in blog plugin.

Tokens
10.8K
Snippets
102
Records
123
Agent score
66%

What's inside Docusaurus

  1. Create standalone pages using file-based routing

    To create a standalone page, add a Markdown (.md) or React (.js) file to the src/pages directory. The file path determines the URL route:

    • src/pages/index.js maps to the root URL (/)
    • src/pages/foo.md maps to /foo
    • src/pages/foo/bar.js maps to /foo/bar
  2. Create a basic document in Docusaurus

    Documents in Docusaurus are created as Markdown files within the docs directory. Each file corresponds to a page in the documentation site. For example, creating a file at docs/hello.md makes the document available at the /docs/hello URL path.
    # Hello
    
    This is my **first Docusaurus document**!
  3. Install Docusaurus prerequisites

    To run Docusaurus, you must have Node.js version 18.0 or above installed. It is recommended to enable all dependency-related checkboxes during the Node.js installation process.
  4. Install Docusaurus prerequisites

    To use Docusaurus, you must have Node.js version 18.0 or above installed. It is recommended to enable all dependency-related checkboxes during the Node.js installation process.
  5. Create a basic document in Docusaurus

    In Docusaurus, documents are groups of pages connected via a sidebar, previous/next navigation, and versioning. To create a new document, create a Markdown file within the docs/ directory. For example, creating docs/hello.md will make the document available at /docs/hello.
    # Hello
    
    This is my **first Docusaurus document**!
  6. 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 generates a versions.json file to track the versions.

    After creating a version, Docusaurus maintains two paths:

    • The released version (e.g., 1.0) is served at /docs/.
    • The upcoming, unreleased documentation (the current version) is served at /docs/next/.
    npm run docusaurus docs:version 1.0
  7. 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 versions.json file and copies the content into a specific version folder (e.g., versioned_docs/version-1.0).

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

    1. The versioned docs (e.g., version 1.0) available at the base /docs/ path.
    2. The 'current' (unreleased) docs available at /docs/next/.
    npm run docusaurus docs:version 1.0
  8. Create and manage 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 from an index.md file within a dated folder (e.g., 2019-05-30-welcome/index.md). Using folders for posts allows for the co-location of post-specific images. Blog authors can be managed in the authors.yml file, and posts support the use of tags.
  9. Update content for specific documentation versions

    Documentation content is updated by editing the files in their respective directories. Changes to files in versioned_docs/version-X.X/ update the released version's pages, while changes to files in the root docs/ folder update the 'next' (unreleased) version of the documentation.
    # To update version 1.0:
    Edit versioned_docs/version-1.0/hello.md -> updates /docs/hello
    
    # To update the upcoming version:
    Edit docs/hello.md -> updates /docs/next/hello
  10. 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.

    Blog post dates are automatically extracted from filenames using the format YYYY-MM-DD-title.md (e.g., 2019-05-30-welcome.md) or from an index.md file within a dated folder (e.g., 2019-05-30-welcome/index.md). Using a folder for a blog post is recommended for co-locating images with the post content. The blog also supports tags.

  11. 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, updates the blog index page, manages the tag system, and updates the RSS feed. The post is accessible via the slug defined in the front matter (e.g., http://localhost:3000/blog/greetings).
    ---
    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.
  12. Create links and reference images in Markdown

    Docusaurus supports standard Markdown links and images using either absolute paths (referencing the static directory) or relative file paths to colocate assets with documentation.
    <!-- Link to a page -->
    [Create a page](/create-a-page)
    [Create a page](./create-a-page.md)
    
    <!-- Absolute path to static/img/ -->
    ![Docusaurus logo](/img/docusaurus.png)
    
    <!-- Relative path to image -->
    ![Docusaurus logo](./img/docusaurus.png)