Deploy Docusaurus Sites with Vercel

Docusaurus with Vercel makes it easy to create and deploy open source project documentation.

Check out the Live Demo or...

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 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: '',
    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 Vercel for Git, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git provider 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:

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.

Written By
Written by mcsdevmcsdev