Deploy Docusaurus Sites with Vercel

Docusaurus is a documentation framework that makes it easy to maintain open-source documentation websites. This guide covers how to deploy a Docusauras v1 site.

Step 1: Set Up Your Docusaurus Project

Firstly, set up a Docusaurus project by installing the Docusaurus CLI globally from your terminal:

npm i -g docusaurus-init

Installing docusaurus-init globally with npm.

Create and move into a directory for your Docusaurus website:

mkdir my-docs && cd my-docs

Creating and entering into the /my-docs directory.

Run the following command to create a Docusaurus project inside of the /my-docs directory:

docusaurus-init && cd website

Creating a Docusaurus project with the Docusaurus CLI and entering into the /website directory.

You will find that the Docusaurus CLI has created both a /docs and /website directory. Move the /docs directory inside of the /website directory, you can edit its contents later to provide your own documentation.

Add the following two lines of code to the /website/siteConfig.js file:

// See https://docusaurus.io/docs/site-config for all the possible
// site configuration options.
+ const path = require('path');

// List of projects/orgs using your project for the users page.
const users = [
  {
    caption: 'User1',
    // You will need to prepend the image path with your baseUrl
    // if it is not '/', like: '/test-site/img/image.jpg'.
    image: '/img/undraw_open_source.svg',
    infoLink: 'https://www.facebook.com',
    pinned: true,
  },
];

const siteConfig = {
+  customDocsPath: path.basename(__dirname) + '/docs',

Specifying the /docs path in the /website/siteConfig.js file.

Adding these two lines tells Docusaurus to use the path module to define where the /docs folder is located.

Step 2: Deploying Your Docusaurus Website with Vercel

To deploy your Docusaurus site with a Vercel for Git, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

Once deployed, you will get a URL to see your site live, such as the following: https://docusaurus.now-examples.now.sh

Set up a Docusaurus site with a few clicks using the Deploy button, and create a Git repository for it in the process for automatic deployments for your updates.