Docusaurus v2

► Docusaurus is a popular way to quickly build a documentation site, and deploying it on Vercel takes only a few minutes. Follow this guide to get your new website up and running.

Step 1: Create a New Docusaurus Project

The easiest way to get started is by creating a new Docusaurus site.

Steps:

1. Open your terminal (or use GitHub CodeSpaces if preferred).
2. Run the following command to create a new Docusaurus project:

npx create-docusaurus@latest my-docusaurus-project classic

3. Navigate into the project directory:

cd my-docusaurus-project

4. Start the development server:

npm run start

5. Open http://localhost:3000 in your browser to view your site.

Docusaurus©

📌 Estimated Time: 10-15 minutes

Learn More:

• Docusaurus Installation Guide
• Traversy Media - Docusaurus Tutorial

Step 2: Push Your Project to GitHub

Next, set up version control for your project on GitHub.

Steps:

1. Initialize Git in your project directory:

git init

2. Stage and commit your files:

git add .
git commit -m "Initial commit"

3. Create a new repository on GitHub.
4. Push your code to GitHub:

git remote add origin <YOUR_GITHUB_REPO_URL>
git push -u origin main

GitHub Integration for Docusaurus

📌 Estimated Time: 10-15 minutes

Learn More:

• GitHub Docs: Getting Started
• GitHub & Git Basics

Step 3: Set Up Vercel for Deployment

Now, let’s deploy your Docusaurus site on Vercel.

Steps:

1. Log in to Vercel and create a new project.
2. Import your GitHub repository into Vercel.
3. Configure the project:
   • Build Command: npm run build
   • Output Directory: build
4. Click Deploy to trigger the deployment process.

📌 Estimated Time: 15 minutes

Learn More:

• Vercel Docs: Deploying Docusaurus
• Fireship - Vercel Basics

Step 4: Customize Your Site

Customize your Docusaurus site by modifying files in the src folder.

Steps:

1. Clone your GitHub repository locally:

git clone https://github.com/your-username/your-repo-name.git

2. Navigate into the cloned directory:

cd your-repo-name

3. Run the development server locally:

npm run start

4. Edit content in the docs and blog folders to customize your site.

🎥 Video Recommendation:
The Net Ninja - Git & GitHub for Beginners

📌 Estimated Time: 2-3 hours (depending on customization level)

Learn More:

• Docusaurus Customization Guide
• Fireship - Tailwind CSS Customization

Step 5: Deploy Updates to Vercel

With every commit to the main branch, Vercel automatically redeploys your site.

Steps:

1. After making changes, commit and push them:

git add .
git commit -m "Updated content"
git push origin main

2. Vercel will automatically deploy the new version of your site.

Dashboard Showing New Deployments

📌 Estimated Time: 15-30 minutes (for updates and debugging)

Learn More:

• Traversy Media - Deploy Websites with Vercel
• Fireship - Vercel Deployment Workflow

Helpful Resources

Here are additional resources to enhance your learning:

• Docusaurus Documentation
• Vercel Documentation
• GitHub Docs

Note: Take time to customize and explore different themes and features in Docusaurus. Practice will help you understand its flexibility and streamline your workflow. Happy coding!