DOCSEARCHbyAlgolia
Submit Docs

Docusaurus Documentation

website·Indexed 30 days ago

https://nightmachinery.github.io/dblog/

Tutorials and guides for Docusaurus, a static-site-generator (Jamstack) used for creating documentation sites. Covers basic setup, creating documents, pages, and blog posts, utilizing Markdown features, managing documentation versions, i18n translation, and site deployment.

Tokens
4.3K
Snippets
43
Records
47
Agent score
70%

What's inside Docusaurus

  2. 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: localhost:3000/
    • src/pages/foo.md maps to localhost:3000/foo
    • src/pages/foo/bar.js maps to localhost:3000/foo/bar

  3. Create a new documentation version in Docusaurus

    Use the Docusaurus CLI to snapshot the current state of your docs folder into a versioned release. This process copies the docs folder into a new directory under versioned_docs/ and creates a versions.json file to track the versions.

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

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

  5. Create standalone pages using the src/pages directory

    To create a standalone page, add a Markdown (.md) or React (.js, .jsx, .tsx) file to the src/pages directory. The file system routing automatically maps the file path to the URL path:

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

  6. 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 at http://localhost:3000/. The server supports hot-reloading, meaning changes made to files (such as docs/intro.md) will be reflected automatically in the browser.
    cd my-website
npm run start

  8. Install and initialize a new Docusaurus site

    To create a new Docusaurus site using the classic template, ensure you have Node.js version 14 or above installed. Run the initialization command to generate the project structure and install all necessary dependencies.
    npm init docusaurus@latest my-website classic

  10. Create a blog post in Docusaurus

    To create a new blog post in Docusaurus, create a Markdown file within the blog/ directory. The file should include a front matter block containing the slug (which determines the URL), the title of the post, an optional list of authors with their details, and optional tags. Docusaurus automatically generates a dedicated page for the post, updates the blog index page, and manages the tag system and 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 you like.

  11. Start the Docusaurus development server

    After generating a 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 made to files (such as docs/intro.md) will be reflected automatically in the browser.
    cd my-website
npm run start

  12. Update content for specific documentation versions

    Docusaurus separates content by version using different directories. To update a specific version, edit the file within its corresponding versioned folder:

    • To update a released version: Edit files in versioned_docs/version-X.X/ (e.g., versioned_docs/version-1.0/hello.md updates http://localhost:3000/docs/hello).
    • To update the upcoming/unreleased version: Edit files in the main docs/ folder (e.g., docs/hello.md updates http://localhost:3000/docs/next/hello).