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

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

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

38 Replies to “When Docusaurus Meet Netlify for the first time”

  1. It?¦s truly a nice and helpful piece of information. I?¦m satisfied that you simply shared this useful info with us. Please keep us informed like this. Thanks for sharing.

  2. Hmm it looks like your blog ate my first comment (it was extremely long) so I guess I’ll just sum it up what I wrote and say, I’m thoroughly enjoying your blog. I as well am an aspiring blog writer but I’m still new to the whole thing. Do you have any recommendations for inexperienced blog writers? I’d definitely appreciate it.

  3. After research a few of the weblog posts in your web site now, and I actually like your way of blogging. I bookmarked it to my bookmark web site record and shall be checking back soon. Pls try my web site as nicely and let me know what you think.

  4. I will right away clutch your rss feed as I can’t in finding your e-mail subscription hyperlink or e-newsletter service. Do you have any? Please permit me recognise so that I may just subscribe. Thanks.

  5. I loved as much as you will receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get got an shakiness over that you wish be delivering the following. unwell unquestionably come further formerly again since exactly the same nearly very often inside case you shield this increase.

  6. Hi! I just wanted to ask if you ever have any problems with hackers? My last blog (wordpress) was hacked and I ended up losing months of hard work due to no backup. Do you have any solutions to prevent hackers?

  7. You can definitely see your skills in the work you write. The world hopes for more passionate writers like you who are not afraid to say how they believe. Always go after your heart.

  8. Do you have a spam problem on this site; I also am a blogger, and I was curious about your situation; many of us have created some nice methods and we are looking to swap methods with others, be sure to shoot me an email if interested.

  9. hey there and thank you for your information – I have definitely picked up something new from right here. I did however expertise some technical points using this web site, as I experienced to reload the website a lot of times previous to I could get it to load correctly. I had been wondering if your web host is OK? Not that I am complaining, but sluggish loading instances times will very frequently affect your placement in google and could damage your high quality score if ads and marketing with Adwords. Well I am adding this RSS to my email and can look out for a lot more of your respective intriguing content. Make sure you update this again very soon..

  10. Hey there this is kind of of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding skills so I wanted to get guidance from someone with experience. Any help would be greatly appreciated!

  11. I’ve recently started a website, the info you provide on this web site has helped me tremendously. Thanks for all of your time & work. “Quit worrying about your health. It’ll go away.” by Robert Orben.

  12. I’d have to examine with you here. Which is not one thing I usually do! I take pleasure in reading a post that may make folks think. Additionally, thanks for permitting me to comment!

  13. Hey very nice website!! Man .. Excellent .. Amazing .. I will bookmark your web site and take the feeds also…I am happy to find numerous useful information here in the post, we need develop more techniques in this regard, thanks for sharing. . . . . .

  14. What’s Happening i’m new to this, I stumbled upon this I’ve found It absolutely useful and it has aided me out loads. I hope to contribute & help other users like its aided me. Good job.

  15. I discovered your blog web site on google and check just a few of your early posts. Proceed to keep up the superb operate. I just extra up your RSS feed to my MSN News Reader. Seeking forward to studying extra from you in a while!…

  16. QuickBooks Time is one of the best tools offered by QuickBooks to make employee schedules, track in and out times and more.
    Sometimes, users can face QuickBooks Time Login Issues. A number of reasons could cause this issue. Visit our troubleshooting guide for QuickBooks Time Login Issue.

  17. Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You obviously know what youre talking about, why throw away your intelligence on just posting videos to your weblog when you could be giving us something enlightening to read?

  18. Appreciating the hard work you put into your site and detailed information you offer. It’s awesome to come across a blog every once in a while that isn’t the same outdated rehashed material. Wonderful read! I’ve bookmarked your site and I’m including your RSS feeds to my Google account.

  19. F*ckin’ awesome things here. I’m very happy to see your article. Thank you a lot and i am looking ahead to touch you. Will you kindly drop me a mail?

  20. I’ll right away grab your rss feed as I can not find your e-mail subscription link or e-newsletter service. Do you’ve any? Kindly let me know so that I could subscribe. Thanks.

  21. This website can be a stroll-via for all of the information you wished about this and didn’t know who to ask. Glimpse here, and you’ll undoubtedly discover it.

Leave a Reply

Your email address will not be published.