Deploy to Netlify

Netlify is the recommended hosting platform for GatsbyCar because it has built-in support for Decap CMS. This guide will walk you through deploying your website and setting up the CMS admin panel.

Why Netlify

Netlify is the best choice for GatsbyCar because:

• Built-in Git Gateway — Decap CMS authentication without extra setup
• Netlify Identity — free user management for CMS editors
• Automatic builds — every push to GitHub triggers a rebuild
• Free tier — 100 GB bandwidth and 300 build minutes per month
• Global CDN — fast loading worldwide
• HTTPS included — free SSL certificate

Step 1: Create a Netlify Account

1. Open your browser and go to https://www.netlify.com
2. Click Sign up in the top right
3. Choose Sign up with GitHub
4. Authorize Netlify to access your GitHub account
5. Complete the onboarding

Step 2: Import Your Repository

1. From the Netlify dashboard, click Add new site
2. Click Import an existing project
3. Click Deploy with GitHub
4. Authorize Netlify if prompted
5. Find and select your gatsbycar repository
6. Click it to select

Step 3: Configure Build Settings

Netlify will show build settings. Configure them as follows:

Branch to deploy

• main (or your default branch)

Build command

• npm run build

Publish directory

• public

Environment variables (optional)

• NODE_VERSION — set to 18 or 20 if build fails

Click Deploy site.

Step 4: Wait for the First Build

Netlify will start building your site. This takes 2 to 5 minutes.

You can watch the build progress. When complete, you will see:

Site is live

Your site is now available at a URL like:

https://random-name-12345.netlify.app

Step 5: Change the Site Name

1. Go to Site configuration → Site details
2. Click Change site name
3. Enter your preferred name, like gatsbycar
4. Click Save

Your site is now at:

https://gatsbycar.netlify.app

Step 6: Update Your Site URL

Open gatsby-config.js in VS Code.

Update siteUrl:

siteUrl: `https://gatsbycar.netlify.app/`,

Commit and push:

git add .
git commit -m "Update site URL"
git push

Netlify will rebuild automatically.

Step 7: Enable Netlify Identity

Netlify Identity manages CMS admin users. It lets people log in to Decap CMS without having GitHub accounts.

1. In Netlify dashboard, go to your site
2. Click Integrations in the top menu
3. Find Identity and click Enable Identity
4. Go to Identity → Configuration and usage

Registration settings:

• Select Invite only (recommended)
• This means only people you invite can access the CMS

External providers (optional):

• Check GitHub if you want editors to log in with GitHub
• Check Google for Google login

Step 8: Enable Git Gateway

Git Gateway allows Decap CMS to read and write to your GitHub repository without giving editors direct GitHub access.

1. In Netlify dashboard, go to Identity → Services
2. Find Git Gateway
3. Click Enable Git Gateway
4. Leave the Roles field blank (allows all Identity users to access CMS)

Netlify will generate an API token automatically.

Step 9: Update config.yml for Production

Open static/admin/config.yml.

Make sure the backend section looks like this:

backend:
  name: git-gateway
  branch: main

Important: If your repository default branch is master, change branch to master.

Do not add repo field — Git Gateway handles that automatically.

Commit and push:

git add .
git commit -m "Update Decap CMS config"
git push

Step 10: Invite Yourself as CMS User

1. In Netlify dashboard, go to Identity
2. Click Invite users
3. Enter your email address
4. Click Send

You will receive an email invitation. Click the link to set your password.

Step 11: Access the CMS Admin Panel

1. Open your browser
2. Go to https://gatsbycar.netlify.app/admin/
3. You will see the Decap CMS login page
4. Click Log in with Netlify Identity
5. Enter your email and password

You are now in the CMS dashboard.

Step 12: Test CMS in Production

Let's verify everything works.

1. Click Home Page in the sidebar
2. Edit the Title field
3. Click Save
4. Click Publish

Netlify will detect the commit and rebuild your site. Wait 1 to 3 minutes.

Refresh your website. Your change should appear.

How the Production Workflow Works

When you save in Decap CMS (production mode):

1. CMS commits changes to your GitHub repository via Git Gateway
2. Netlify detects the new commit
3. Netlify rebuilds your Gatsby site
4. Changes go live on your domain

This happens automatically. You do not need to do anything manually.

Step 13: Add a Custom Domain (Optional)

1. Go to Site configuration → Domain management
2. Click Add a domain
3. Enter your domain name, like mycarrental.com
4. Follow Netlify's instructions to update your DNS
5. Netlify will provision an SSL certificate automatically

Once set up, update siteUrl in gatsby-config.js to match your custom domain.

Common Issues and Solutions

Issue: Build fails with "Node version not supported"

Solution: Add an environment variable:

• Go to Site configuration → Environment variables
• Add NODE_VERSION with value 18 or 20
• Trigger a new deploy

Issue: "Your Git Gateway backend is not returning valid settings"

Solution: This means Git Gateway is not enabled or configured correctly.

1. Go to Identity → Services
2. Check that Git Gateway is enabled
3. Check that branch in config.yml matches your default branch (main or master)

Issue: CMS login page does not appear

Solution: Check that /admin/ route exists:

1. Go to https://yoursite.netlify.app/admin/
2. If 404, check that static/admin/index.html exists
3. Check that static/admin/config.yml exists

Issue: "Cannot commit to repository"

Solution: Git Gateway token may have expired:

1. Go to Identity → Services
2. Click Git Gateway settings
3. Regenerate the access token
4. Save

Issue: Changes in CMS do not appear on site

Solution:

1. Check Netlify dashboard → Deploys for build errors
2. Wait a few minutes for rebuild
3. Hard refresh browser with Ctrl + Shift + R

Issue: Build succeeds but site shows 404

Solution: Check Publish directory:

1. Go to Site configuration → Build & deploy
2. Check that Publish directory is public
3. Trigger a new deploy

Netlify Dashboard Overview

Understanding the Deploy Process

Every time you push to GitHub, Netlify:

1. Detects the new commit
2. Runs npm run build
3. Generates static files in public/
4. Deploys to global CDN
5. Updates your live site

You can watch the progress in the Deploys tab.

Next Step

Your website is now live and the CMS is working. Proceed to:

Support and Custom Projects

Need Help?

If you get stuck, contact us:

• Email: creativebydre@gmail.com
• Custom project: https://www.fiverr.com/creativitas/create-your-custom-website-and-app