DOCSEARCHbyAlgolia
Submit Docs

Docusaurus Documentation

website·Indexed 30 days ago

https://bayudoc.vercel.app

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

Tokens
2.5K
Snippets
25
Records
29
Agent score
75%

What's inside Docusaurus

  1. Create a blog post in Docusaurus

    To create a blog post in Docusaurus, create a Markdown file within the blog/ directory. The filename should follow the date-slug format (e.g., YYYY-MM-DD-slug.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 at /blog/{slug}.
    ---
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.

  2. Add syntax-highlighted code blocks with titles

    Docusaurus supports Markdown code blocks with syntax highlighting. You can optionally add a title to the code block to indicate the filename or purpose.
    ```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}

  4. Create standalone pages using React or Markdown

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

    • src/pages/index.js maps to the root /
    • src/pages/foo.md maps to /foo
    • src/pages/foo/bar.js maps to /foo/bar

  5. 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)

  6. Translate documentation files for a specific locale

    To translate a document, copy the original markdown file from the docs/ directory into the corresponding locale folder within the i18n directory. The path structure follows the plugin name and content type (e.g., docusaurus-plugin-content-docs/current/).
    # Create the directory for French translations
mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/

# Copy the intro page to the translation folder
cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md

  7. Create a basic documentation page in Docusaurus

    To create a new documentation page, create a Markdown file within the docs directory. For example, creating docs/hello.md will make the document available at the URL path /docs/hello.
    # Hello

This is my **first Docusaurus document**!

  8. Build a Docusaurus site for production

    Docusaurus is a static-site-generator that produces static HTML, JavaScript, and CSS files. To build the site for production, run the build command. The resulting static files are generated in the build folder.
    npm run build

  9. Create a new documentation version in Docusaurus

    Docusaurus allows you to maintain 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 generates a versions.json file.

    After creating a version (e.g., 1.0):

    • The versioned docs are available at /docs/ (e.g., http://localhost:3000/docs/).
    • The upcoming, unreleased docs (the current state of the docs folder) are available at /docs/next/ (e.g., http://localhost:3000/docs/next/).
    npm run docusaurus docs:version 1.0

  10. Update content for specific documentation versions

    Versioned documentation is managed in separate folders. To update a specific version, edit the files within that version's directory in versioned_docs. To update the upcoming/unreleased version, edit the files in the main docs folder.

    Example mapping:

    • versioned_docs/version-1.0/hello.md $\rightarrow$ http://localhost:3000/docs/hello
    • docs/hello.md $\rightarrow$ http://localhost:3000/docs/next/hello

  11. Start the Docusaurus development server

    After generating the site, navigate into the project directory and run the start script. This builds the website locally and serves it at http://localhost:3000/. The server 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