Deploy Your Site: GitHub, GitHub Desktop, and Netlify Guide

Introduction

Welcome to MikesBlogDesign! This beginner-friendly guide walks you through creating a GitHub repository, syncing it with GitHub Desktop, connecting to Netlify, and deploying your site. Whether you're launching a portfolio or a blog, this tutorial has you covered.

Prerequisites

• A GitHub account.
• A Netlify account.
• Basic knowledge of Git and web development.

Step 1: Create a New GitHub Repository

1. Log in to GitHub.
2. Click the + icon in the top-right corner and select New repository.
3. Fill in the details:
   • Repository name: Choose a unique name.
   • Description (optional): Add a brief project description.
   • Public/Private: Decide visibility.
   • Initialize with a README (optional): Check for a starter README.
4. Click Create repository.

Step 2: Install and Set Up GitHub Desktop

1. Download GitHub Desktop for your OS.
2. Install the application.
3. Open GitHub Desktop and sign in with your GitHub account.
4. Configure Git:
   • Go to File > Options (Windows) or GitHub Desktop > Preferences (Mac).
   • Set your name and email for commits.

Step 3: Clone the Repository

1. In GitHub Desktop, click File > Clone repository.
2. Select your repository from the GitHub.com tab.
3. Choose a local path for the repository folder.
4. Click Clone.

Step 4: Add Your Code/Files

1. Open the cloned repository folder.
2. Add your project files (e.g., index.html, CSS, JS).
3. Ensure your main file is index.html for Netlify.
4. Return to GitHub Desktop to view changes.

Step 5: Commit and Push Changes

1. Review changed files in GitHub Desktop’s Changes tab.
2. Write a commit message (e.g., “Initial project files”).
3. Click Commit to main.
4. Click Push origin to upload to GitHub.

Step 6: Connect to Netlify

1. Log in to Netlify.
2. Click New site from Git.
3. Select GitHub and authorize access.
4. Choose your repository.
5. Configure settings:
   • Branch to deploy: main.
   • Build command: Leave blank for static files or enter framework-specific command (e.g., npm run build).
   • Publish directory: Use / or your build folder (e.g., dist).
6. Click Deploy site. Netlify provides a unique URL.

Step 7: Automatic Updates

1. Edit files in your local repository folder.
2. In GitHub Desktop:
   • Review and commit changes.
   • Push to GitHub with Push origin.
3. Netlify auto-deploys updates from the main branch.

Troubleshooting

• GitHub Desktop issues: Ensure files are in the correct folder.
• Netlify build fails: Check build settings and logs.
• No updates: Verify Netlify’s repository and branch settings.

Optional: Custom Domain

1. In Netlify, go to Site configuration > Domain management.
2. Add your domain and configure DNS.
3. Wait for DNS propagation (up to 24 hours).

Conclusion

You’ve set up a GitHub repository, synced it with GitHub Desktop, connected to Netlify, and enabled automatic deployments. Share your live site with the world!

Start Deploying with Netlify

Further Reading

• GitHub Desktop Documentation
• Netlify Documentation
• Download PDF tutorial