DOCSEARCHbyAlgolia
Submit Docs

Docusaurus Documentation

website·Indexed 30 days ago

https://kmin-blog-new.vercel.app

Documentation and tutorials for Docusaurus, a static-site-generator for building documentation and blogs. Includes guides on creating documents, managing doc versions, configuring i18n for site translation, using Markdown and MDX features, and deploying sites.

Tokens
3.2K
Snippets
30
Records
37
Agent score
73%

What's inside Docusaurus

  1. 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 copy of the docs in versioned_docs/version-X.X and updates the versions.json file. After creating a version, the site will host the versioned docs at the root /docs/ path and the upcoming, unreleased docs at /docs/next/.
    npm run docusaurus docs:version 1.0

  2. 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. To co-locate images with a specific post, use a folder structure where the post content is in an index.md file. The blog post date is automatically extracted from filenames using the format YYYY-MM-DD-title.md (e.g., 2019-05-30-welcome.md).
    # Example file structures for blog posts:
/blog/2019-05-30-welcome.md
/blog/2019-05-30-welcome/index.md

  3. 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 by adding title="filename" to the language tag.
    ```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}

  4. 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 easier co-location of post-specific images. Blog authors can be managed via an authors.yml file, and posts support the use of tags.

  6. 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 summary/list view.
    This text will appear in the list view summary.

<!-- truncate -->

This text will only be visible on the full blog post page.

  7. 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. To co-locate images with a specific post, use a folder structure where the post content is in index.md within that folder. Blog post dates are automatically extracted from filenames using the format YYYY-MM-DD-title.md (e.g., 2019-05-30-welcome.md).

  8. Translate documentation files for a specific locale

    Docusaurus uses a specific directory structure for translated content. To translate a document, copy the original file from the docs folder into the corresponding path within the i18n directory for the target locale. For example, to translate docs/intro.md to French (fr), place the translation in i18n/fr/docusaurus-plugin-content-docs/current/intro.md.
    mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md

  9. Create a new documentation page in Docusaurus

    In Docusaurus, documents are created by adding Markdown files to the docs directory. Each file corresponds to a page. For example, creating a file at docs/hello.md makes the content available at the /docs/hello URL path.
    # Hello

This is my **first Docusaurus document**!

  10. 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 to files like docs/intro.md will automatically refresh the browser.
    cd my-website
npm run start

  11. Use React components in Markdown via MDX

    Docusaurus supports MDX, allowing developers to export and use React components directly within 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> !

  12. Install and initialize a new Docusaurus site

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