How to Deploy on Netlify

Netlify is a popular platform that makes deploying modern web apps a breeze. It provides continuous deployment, a global CDN, and features like instant rollbacks. In this guide, we’ll walk through deploying your site to Netlify and troubleshooting common issues.

Prerequisites

  • A Git repository (e.g., GitHub, GitLab, Bitbucket)
  • A Netlify account (sign up at netlify.com)
  • A build command if your project requires it

or

  • A publish directory (e.g., build, dist, out) if your project requires it

or

Step 1: Create a Netlify Account

  1. Go to Netlify’s website and sign up using GitHub, GitLab, Bitbucket, or email.
  2. If using a Git provider, grant Netlify permission to access your repos.

Step 2: Connect Your Repository

  1. From your Netlify dashboard, click “New site from Git”.
  2. Choose your Git provider.
  3. Select the repository containing your project.

  Potential Issue

  • “No Repos Found”: Check if your repo is private and that Netlify has permission to access private repos.
  • “Branch Not Found”: Ensure the branch you want to deploy exists (like main or master).

Step 3: Configure Build Settings

  1. Build Command: This is the command Netlify will run to build your site (e.g., npm run build).
  2. Publish Directory: The folder containing your final build. Common examples:
    • React: build
    • Next.js (static export): out
    • Vue CLI: dist
  3. Click “Deploy site” to start your first build.

  Potential Issue

  • “Build command not found”: Make sure you have a build script in your package.json.
  • “Publish directory does not exist”: Double-check you’ve specified the correct folder name.

Step 4: Automatic Deployments

Once connected, every push to your main branch triggers a new build on Netlify.

  • Deploy Previews: Netlify creates unique preview URLs for pull requests, letting you test changes before merging.

  Potential Issue

  • “Deploy Preview Not Found”: Verify that your site is linked to the correct repo and branch.

Step 5: Custom Domain

Netlify provides a temporary subdomain (e.g., awesome-site-123.netlify.app), but you can add a custom domain:

  1. Go to Site Settings → Domain Management.
  2. Add your domain and follow the DNS instructions to point your domain to Netlify.

  Potential Issue

  • “DNS Verification Failed”: Ensure you’ve added the correct CNAME or A records in your domain registrar.

Step 6: Environment Variables (Optional)

If your project relies on secrets or API keys:

  1. Go to Site Settings → Build & Deploy → Environment.
  2. Add variables (e.g., API_KEY) there, so they’re available during the build process.

  Potential Issue

  • Undefined Variables: If you see a 404 or unexpected behavior, confirm the variable name in Netlify matches exactly what your code uses.

Step 7: Troubleshooting & Logs

  • Build Logs: Check Netlify’s deploy logs for details if something fails.
  • Function Logs: If using Netlify Functions, see logs in the Functions tab.
  • Rollbacks: Quickly revert to a previous successful deploy if the new one fails.

Conclusion

Netlify streamlines deployment with an intuitive dashboard and CI/CD integration. Whether you’re using React, Vue, or a static site generator, the setup is straightforward:

  1. Connect your repo
  2. Configure your build command and publish directory
  3. Deploy automatically on every push

If you encounter issues, use the Netlify logs and site settings to pinpoint and fix them. With this guide, you’re ready to deploy and maintain your app on Netlify with confidence!

Next Steps:

Happy coding! 🚀