Docusaurus Documentation

website·Indexed 30 days ago

https://docusaurus-gs.gruvros.se

A static-site generator (Jamstack) designed for quickly building and deploying websites. Features include support for Markdown and React pages, blog post management with RSS feeds, documentation versioning, i18n translation, and automatic sidebar navigation.

Tokens
2.2K
Snippets
22
Records
24
Agent score
50%

What's inside Docusaurus

  1. Start the Docusaurus local development server

    After generating a site, navigate into the project directory and run the start script. This builds the website locally and serves it via a development server. The site is accessible at http://localhost:3000/.

    Changes made to files (such as docs/intro.md) will trigger an automatic reload in the browser to display updates immediately.

    cd my-website
    npm run start
  2. Embed images using absolute or relative paths

    Docusaurus supports standard Markdown image syntax. You can use absolute paths to reference images located in the static directory or relative paths to reference images colocated with the Markdown file.
    <!-- Absolute path to static/img/docusaurus.png -->
    ![Docusaurus logo](/img/docusaurus.png)
    
    <!-- Relative path to image in same folder -->
    ![Docusaurus logo](./img/docusaurus.png)
  3. Install and initialize a new Docusaurus site

    To create a new Docusaurus site using the classic template, run the npm init command. This process automatically adds the classic template to your project 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
  4. Update content for specific documentation versions

    Documentation updates are handled based on the file location:

    • To update a specific released version, edit files within the versioned_docs/version-X.X/ directory.
    • To update the upcoming/unreleased version, edit files within the main docs/ directory.
  5. Create a new documentation version in Docusaurus

    Docusaurus allows you to manage multiple versions of your documentation. Running the versioning command copies the current docs folder into a version-specific directory (e.g., versioned_docs/version-1.0) and creates a versions.json file to track them.

    Once a version is created, the project will have two active versions:

    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
  6. Create a blog post in Docusaurus

    To create a blog post in Docusaurus, create a Markdown file within the blog/ directory. The file name should 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.

    Each post requires a front-matter block to define the slug (URL path), title, authors, and tags.

    ---
    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.
  7. Create a basic document in Docusaurus

    To create a new document in Docusaurus, create a Markdown file within the docs directory. For example, creating docs/hello.md will automatically make the document available at the URL path /docs/hello.
    # Hello
    
    This is my **first Docusaurus document**!
  8. Create standalone pages in Docusaurus

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

    • src/pages/index.js maps to the root / (e.g., localhost:3000/)
    • src/pages/foo.md maps to /foo (e.g., localhost:3000/foo)
    • src/pages/foo/bar.js maps to /foo/bar (e.g., localhost:3000/foo/bar)