Skip to main content
Updated on · 2 min read

Documentation for React Component Library - Configure Docusaurus - [3/3]

In this post, I will walk you through using Docusaurus to create comprehensive documentation for your React component library. You'll also learn to configure automated documentation deployments to GitHub Pages, set up custom domains, and implement PR preview environments.

This is part 3 of the series. Here are the parts:

Configure docusaurus​

docusaurus.config.ts
{
  organizationName: 'orgName-or-Username', // Put your GitHub org/user name.
  projectName: 'projectName', // Put your repo name.
}

Deploy to Github Pages​

The first deployment to Github pages is manual, but we will automate it in the next steps.

npm run docs:deploy

After running this command, you should see a branch in your Github like the following:

gh-pages branch

Configure Domain​

Depending on which endpoint you want to deploy, you must configure baseUrl accordingly and do DNS mapping for your preferred domain. If you are going to use *.github.io, you won't have to configure DNS. But you would need to configure baseUrl.

docusaurus.config.ts
{
  baseUrl: "???"
}

Once you configure, things will start looking like the following:

Here, I have configured at rcls.rjv.im, so I had to do DNS mapping.

Domain mapped

Automate deployment​

We will automate the deployment using GitHub actions. Create a new file in .github/workflows/docs-deploy.yml with the following content:

.github/workflows/docs-deploy.yml
loading...

Add this change to the main branch and deploy it.

Preview PR​

This is optional, but you can preview the PR by deploying it to a temporary URL on the same domain. I recommend this as it will make reviewing much more manageable and efficient.

For a PR preview, the main docs baseUrl has to be changed to /pr-preview/pr-<PR_NUMBER>/

docusaurus.config.ts
const BASE_URL =
  process.env.PR_NUMBER !== undefined
    ? `/pr-preview/pr-${process.env.PR_NUMBER}/`
    : "/";


const config: Config = {
  baseUrl: BASE_URL,
}

Create a new file in .github/workflows/docs-preview.yml with the following content:

.github/workflows/docs-preview.yml
loading...