Ajeet Raina Docker Captain, ARM Innovator & Docker Bangalore Community Leader.

When Docusaurus Meet Netlify for the first time

1 min read

 

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.

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.

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: 'Welcome to Collabnix Site',
tagline: 'The Home of DevOps Team',
url: 'https://docusaurus-2.netlify.app',
baseUrl: '/',
onBrokenLinks: 'throw',
...
...
 

 

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.

References

Please follow and like us:

Have Queries? Join https://launchpass.com/collabnix

Ajeet Raina Docker Captain, ARM Innovator & Docker Bangalore Community Leader.

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright Collabnix Inc

Built for Collabnix Community, by Community