How to Deploy Docusaurus to Netlify in 5 Minutes


Profile picture for Ajeet Raina
Author:
Ajeet Raina, Developer Growth Manager at Redis

Millions of developers use Netlify to instantly build, deploy and scale their modern web applications. The platform comes with the first class-support for every popular framework like JAMstack, React, VueJS, NextJS, Gatsby, AngularJS, Nuxt, Eleventy, Svelte, Hugo, Astro and so on.

MyImage

The Netlify platform allows developers to build and deploy their website to the global network (CDN) from Git in a convenient way. It delivers out-of-the-box continuous integration and continuous deployment. Developers love Netlify because it allows them to focus on building and deploying apps by abstracting all the maintenance work away from them. Features like free SSL, Custom Domain, deploy previews, functions and workflows etc makes Netlify the most comprehensive platform for web projects.

Netlify CMS is an open source tool that allows non-technical users to easily manage and update content generated by a static site generator. Here's a documentation link for Netlify CMS if you're interested to learn more.

Learn how to deploy and host a Next.js app using Netlify

In the last blog post, we leveraged Netlify CLI to build a simple Next.js application built using TailwindCSS and Redis. In this blog, you will see how to deploy a Docusaurus website to Netlify Dashboard UI in 5 minutes.

Let's get started..

Table of Contents#

  • Step 1. Sign-in for a new Netlify Account
  • Step 2. Connect Netlify to a Git Provider
  • Step 3. Import the GitHub repo to your GitHub account
  • Step 4. Provide Netlify access to your GitHub repo
  • Step 5. Configure site settings for Netlify
  • Step 6. Deploy your static website
  • Step 7. Visit your new Docusaurus site on Netlify

Step 1. Sign-in for a new Netlify Account#

Visit https://app.netlify.com/ and sign up for a Netlify account.

MyImage

Step 2. Connect your Netlify account to your Git Provider#

Netlify allows you to sign-in using various authentication services, including GitHub, GitLab, Bitbucket, Email and SSO. For this demo we'll use GitHub. Sign into GitHub to connect it to Netlify.

MyImage

Step 3. Import the project files to your GitHub account#

Once you connect your Netlify account to GitHub, you can start collaborating with your other team members. Before we do that, let's push a sample Docusaurus site to our Git repository. You can use a generic Docusaurus site if you want. The Redis Developer Hub is built on Docusaurus, so we are using that instead.

MyImage

Step 4. Allow Netlify to access the GitHub repository#

Next, Netlify will allow you to import an existing project from a GitHub repository as shown below:

MyImage

Step 5. Configure site settings for Netlify#

There are two essential settings/changes that need to be configured. First, change the URL under docusaurus.config.js to any other random URL as shown below:

docusaurus.config.js
....
module.exports = {
title: 'Redis Developer Hub',
tagline: 'The Home of Redis Developers',
url: 'https://docusaurus-2.netlify.app',
baseUrl: '/',
onBrokenLinks: 'throw',
...
...

Secondly, you will need to add a build command as shown below: MyImage

Step 6. Deploy your static website#

Click "Deploys" on the top navigation, you will see an option "Trigger Deploy" on the right-side. Choose "Deploy site". If you are performing it for the second time, then choose "Clear cache and deploy site" option.

MyImage

Monitor the "Deploy Log" carefully to see if any error messages appear in the log.

MyImage

You should now be able to see your Docusaurus site hosted on port 3000. MyImage

Step 7. Visit your new Docusaurus site on Netlify#

Go to "Sites" on the top navigation menu and click on the latest preview build.

MyImage

You will able to see that Netlify uploads site assets to a content delivery network and makes your site available. MyImage

References#

Last updated on