Docusaurus Documentation

website·Indexed 29 days ago

https://svetlasyrimis.github.io/docs-example

A static-site generator (Jamstack) designed for building documentation websites. Features include support for Markdown and React pages, a built-in blogging system with tag support, i18n configuration for site translation, and documentation versioning management.

Tokens: 3.4K
Snippets: 30
Records: 40
Agent score: 72%

What's inside Docusaurus

Customize Docusaurus layouts using React
Docusaurus is powered by React, allowing developers to extend or customize the website layout. You can create custom components or modify the layout while maintaining the existing header and footer.
https://svetlasyrimis.github.io/docs-example/
Create a new documentation version in Docusaurus
Docusaurus allows you to maintain multiple versions of your documentation. To release a specific version (e.g., 1.0), use the docs:version CLI command. This process copies the current docs folder into a new directory named versioned_docs/version-1.0 and generates a versions.json file to track the versions.
After creating a version, your documentation will be split into:
- The released version (e.g., 1.0) located at /docs/.
- The upcoming, unreleased version (labeled as current) located at /docs/next/.
```
npm run docusaurus docs:version 1.0
```
https://svetlasyrimis.github.io/docs-example/docs/tutorial-extras/manage-docs-versions
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. 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. Regular authors can be managed via the authors.yml file.
https://svetlasyrimis.github.io/docs-example/blog/tags/hello
Set blog post dates using filenames
Docusaurus can automatically extract the blog post date from the filename. Use the YYYY-MM-DD format at the start of the filename or the folder name containing the post.
```
2019-05-30-welcome.md
2019-05-30-welcome/index.md
```
https://svetlasyrimis.github.io/docs-example/blog/tags/docusaurus
Get started with Docusaurus documentation
Docusaurus is designed for quick installation and setup. To begin building your website, place your documentation files into the docs directory.
https://svetlasyrimis.github.io/docs-example/
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 a folder for a post allows you to co-locate images with the content. Regular authors can be managed via the authors.yml file, and posts support tags.
https://svetlasyrimis.github.io/docs-example/blog

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> !

Install Docusaurus using the classic template
To create a new Docusaurus site with the classic template, run the npm init command. This process automatically adds the template to your project and installs all necessary dependencies. You must have Node.js version 18.0 or above installed.
```
npm init docusaurus@latest my-website classic
```
https://svetlasyrimis.github.io/docs-example/docs/intro
Create a basic document in Docusaurus
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 the URL path /docs/hello.
```
# Hello

This is my **first Docusaurus document**!
```
https://svetlasyrimis.github.io/docs-example/docs/tutorial-basics/create-a-document
Start the Docusaurus development server
After generating your 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 automatically refresh the page.
```
cd my-website
npm run start
```
https://svetlasyrimis.github.io/docs-example/docs/intro
Build a Docusaurus site for production
Docusaurus is a static-site-generator that compiles the site into static HTML, JavaScript, and CSS files. To generate these production files, run the build command. The resulting static assets are output to the build folder.
```
npm run build
```
https://svetlasyrimis.github.io/docs-example/docs/tutorial-basics/deploy-your-site
Update content in specific documentation versions
Versioned documentation is managed via the file system. To update a specific version, edit the files within that version's folder 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
https://svetlasyrimis.github.io/docs-example/docs/tutorial-extras/manage-docs-versions