Skip to main content
Version: 2.0.0-beta.10

Versioned sites

Read up https://docusaurus.io/blog/2018/09/11/Towards-Docusaurus-2#versioning first for problems in v1's approach.

note

The versioned docs should normally be migrated correctly by the migration CLI

Migrate your versioned_docs front matter

Unlike v1, The markdown header for each versioned doc is no longer altered by using version-${version}-${original_id} as the value for the actual id field. See scenario below for better explanation.

For example, if you have a docs/hello.md.

---
id: hello
title: Hello, World !
---

Hi, Endilie here :)

When you cut a new version 1.0.0, in Docusaurus v1, website/versioned_docs/version-1.0.0/hello.md looks like this:

---
id: version-1.0.0-hello
title: Hello, World !
original_id: hello
---

Hi, Endilie here :)

In comparison, Docusaurus 2 website/versioned_docs/version-1.0.0/hello.md looks like this (exactly same as original)

---
id: hello
title: Hello, World !
---

Hi, Endilie here :)

Since we're going for snapshot and allow people to move (and edit) docs easily inside version. The id frontmatter is no longer altered and will remain the same. Internally, it is set as version-${version}/${id}.

Essentially, here are the necessary changes in each versioned_docs file:

---
- id: version-1.0.0-hello
+ id: hello
title: Hello, World !
- original_id: hello
---
Hi, Endilie here :)

Migrate your versioned_sidebars

  • Refer to versioned_docs id as version-${version}/${id} (v2) instead of version-${version}-${original_id} (v1).

Because in v1 there is a good chance someone created a new file with front matter id "version-${version}-${id}" that can conflict with versioned_docs id.

For example, Docusaurus 1 can't differentiate docs/xxx.md

---
id: version-1.0.0-hello
---

Another content

vs website/versioned_docs/version-1.0.0/hello.md

---
id: version-1.0.0-hello
title: Hello, World !
original_id: hello
---

Hi, Endilie here :)

Since we don't allow / in v1 & v2 for frontmatter, conflicts are less likely to occur.

So v1 users need to migrate their versioned_sidebars file

Example versioned_sidebars/version-1.0.0-sidebars.json:

versioned_sidebars/version-1.0.0-sidebars.json
{
+ "version-1.0.0/docs": {
- "version-1.0.0-docs": {
"Test": [
+ "version-1.0.0/foo/bar",
- "version-1.0.0-foo/bar",
],
"Guides": [
+ "version-1.0.0/hello",
- "version-1.0.0-hello"
]
}
}

Populate your versioned_sidebars and versioned_docs

In v2, we use snapshot approach for documentation versioning. Every versioned docs does not depends on other version. It is possible to have foo.md in version-1.0.0 but it doesn't exist in version-1.2.0. This is not possible in previous version due to Docusaurus v1 fallback functionality (https://v1.docusaurus.io/docs/en/versioning#fallback-functionality).

For example, if your versions.json looks like this in v1

versions.json
["1.1.0", "1.0.0"]

Docusaurus v1 creates versioned docs if and only if the doc content is different. Your docs structure might look like this if the only doc changed from v1.0.0 to v1.1.0 is hello.md.

website
โ”œโ”€โ”€ versioned_docs
โ”‚ โ”œโ”€โ”€ version-1.1.0
โ”‚ โ”‚ โ””โ”€โ”€ hello.md
โ”‚ โ””โ”€โ”€ version-1.0.0
โ”‚ โ”œโ”€โ”€ foo
โ”‚ โ”‚ โ””โ”€โ”€ bar.md
โ”‚ โ””โ”€โ”€ hello.md
โ”œโ”€โ”€ versioned_sidebars
โ”‚ โ””โ”€โ”€ version-1.0.0-sidebars.json

In v2, you have to populate the missing versioned_docs and versioned_sidebars (with the right frontmatter and id reference too).

website
โ”œโ”€โ”€ versioned_docs
โ”‚ โ”œโ”€โ”€ version-1.1.0
โ”‚ โ”‚ โ”œโ”€โ”€ foo
โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ bar.md
โ”‚ โ”‚ โ””โ”€โ”€ hello.md
โ”‚ โ””โ”€โ”€ version-1.0.0
โ”‚ โ”œโ”€โ”€ foo
โ”‚ โ”‚ โ””โ”€โ”€ bar.md
โ”‚ โ””โ”€โ”€ hello.md
โ”œโ”€โ”€ versioned_sidebars
โ”‚ โ”œโ”€โ”€ version-1.1.0-sidebars.json
โ”‚ โ””โ”€โ”€ version-1.0.0-sidebars.json

Convert style attributes to style objects in MDX

Docusaurus 2 uses JSX for doc files. If you have any style attributes in your Docusaurus 1 docs, convert them to style objects, like this:

---
id: demo
title: Demo
---

## Section

hello world

- pre style="background: black">zzz</pre>
+ pre style={{background: 'black'}}>zzz</pre>