Create a doc
Create a Markdown file, greeting.md, and place it under the docs directory.
website # root directory of your site
βββ docs
β βββ greeting.md
βββ src
β βββ pages
βββ docusaurus.config.js
βββ ...---
description: Create a doc page with rich content.
---
# Hello from Docusaurus
Are you ready to create the documentation site for your open source project?
## Headers
will show up on the table of contents on the upper right
So that your users will know what this page is all about without scrolling down or even without reading too much.
## Only h2 and h3 will be in the TOC by default.
You can configure the TOC heading levels either per-document or in the theme configuration.
The headers are well-spaced so that the hierarchy is clear.
- lists will help you
- present the key points
- that you want your users to remember
- and you may nest them
- multiple timesDoc front matter
Section titled βDoc front matterβThe front matter is used to provide additional metadata for your doc page. Front matter is optionalβDocusaurus will be able to infer all necessary metadata without the front matter. For example, the doc tags feature introduced below requires using front matter. For all possible fields, see the API documentation.
Doc tags
Section titled βDoc tagsβTags are declared in the front matter and introduce another dimension of categorization in addition to the docs sidebar.
It is possible to define tags inline, or to reference predefined tags declared in a tags file (optional, usually docs/tags.yml).
In the following example:
docusaurusreferences a predefined tag key declared indocs/tags.ymlReleasesis an inline tag, because it does not exist indocs/tags.yml
---
tags:
- Releases
- docusaurus
---
# Title
Contentdocusaurus:
label: 'Docusaurus'
permalink: '/docusaurus'
description: 'Docs related to the Docusaurus framework'Organizing folder structure
Section titled βOrganizing folder structureβHow the Markdown files are arranged under the docs folder can have multiple impacts on Docusaurus content generation. However, most of them can be decoupled from the file structure.
Document ID
Section titled βDocument IDβEvery document has a unique id. By default, a document id is the name of the document (without the extension) relative to the root docs directory.
For example, the ID of greeting.md is greeting, and the ID of guide/hello.md is guide/hello.
website # Root directory of your site
βββ docs
βββ greeting.md
βββ guide
βββ hello.mdHowever, the last part of the id can be defined by the user in the front matter. For example, if guide/hello.md's content is defined as below, its final id is guide/part1.
---
id: part1
---
Lorem ipsumThe ID is used to refer to a document when hand-writing sidebars, or when using docs-related layout components or hooks.
Doc URLs
Section titled βDoc URLsβBy default, the document's URL location is derived from the document id, which in turn is based on the document's file path.
If a file is named one of the following, the file name won't be included in the URL:
- Named as
index(case-insensitive):docs/Guides/index.md - Named as
README(case-insensitive):docs/Guides/README.mdx - Same name as parent folder:
docs/Guides/Guides.md
In all cases, the default slug would only be /Guides, without the /index, /README, or duplicate /Guides segment.
Use the slug front matter to provide an explicit document URL and override the default one.
For example, suppose your site structure looks like this:
website # Root directory of your site
βββ docs
βββ guide
βββ hello.mdBy default, hello.md will be available at /docs/guide/hello. You can change its URL location to /docs/bonjour:
---
slug: /bonjour
---
Lorem ipsumslug will be appended to the doc plugin's routeBasePath, which is /docs by default. See Docs-only mode for how to remove the /docs part from the URL.
Making a document available at the root
Section titled βMaking a document available at the rootβIf you want a document to be available at the root, and have a path like https://docusaurus.io/docs/, you can use the slug front matter:
---
id: my-home-doc
slug: /
---
Lorem ipsumSidebars
Section titled βSidebarsβWhen using autogenerated sidebars, the file structure will determine the sidebar structure.
Our recommendation for file system organization is: make your file system mirror the sidebar structure (so you don't need to handwrite your sidebars.js file), and use the slug front matter to customize URLs of each document.