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.
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.
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.
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.
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:
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:
....
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.
Monitor the “Deploy Log” carefully to see if any error messages appear in the log.
You should now be able to see your Docusaurus site hosted on port 3000.
Step 7. Visit your new Docusaurus site on Netlify
Go to “Sites” on the top navigation menu and click on the latest preview build.
You will able to see that Netlify uploads site assets to a content delivery network and makes your site available.
Comments are closed.