Skip to main content

GitBook migration

This guide describes the process of converting GitBook docs into Docusarus. Luckily, they are both using Markdown to render content, which makes the process a bit easier.

1. Setup Docusaurus Repository​

Start by selecting "Import repository" option in GitHub and put the URL of the starter repository (https://github.com/ChainSafe/documentation-starter). Update docusaurus.config.js and package.json configs with proper naming and urls.

2. Export GitBook Docs to Markdown​

You can do this by syncing the GitBook site with GitHub. Choose the 3 dots icon in the top-right corner of your GitBook site and choose the "Synchronize with GitHub" option. Connect your GitHub account if you haven't already and select a GitHub repository where you want your GitBook site to export. Make sure there are no branch protection rules in place and that priority is selected "GitBook to GitHub".

./assets/sync-with-github.png

3. Migrate content​

Copy all .md files from exported GitHub repository into your new Docusarus repository into /docs directory. Delete SUMMARY.md file because in Docusaurus it is automatically generated (Read more how to modify sidebar: https://docusaurus.io/docs/sidebar/autogenerated#autogenerated-sidebar-metadata).

If you ran yarn start in the new repository you should see your documentation homepage. There will probably be some unsupported markdown features.

4. Fix unsupported Markdown features​

GitBookDocusaurus
{% embed url="<youtube video url>" %}Go to the source (YouTube, Vimeo), choose to share embedded and paste raw html code in markdown

Change anchor names​

GitBookDocusaurus
# Heading <a href="#heading2" id="heading2"></a># Heading {#heading2}

Description sections to call-outs​

GitBookDocusaurus
---
description: >-
---
:::info

:::

Syntax highlight for non-default languages​

Docusaurus by default supports only this set of language highlights. In order to add highlight support for other popular languages docusaurus.conf.js needs to be extended with the desired languages list:

themeConfig:
...
prism: {
...
additionalLanguages: ['csharp'],
}
...

More information can be found here.

Code blocks line numbering​

GitBookDocusaurus
{% code lineNumbers="true" %}showLineNumbers