RentCar - Gatsby JS Car Rental Theme with Headless Decap CMS
Premium Gatsby JS theme for car rental, limousine, and party bus websites. Direct email booking, Decap CMS, SEO optimized. One-time $79, unlimited projects.

Why Car Rental Operators Are Switching to Gatsby JS Themes

If you are searching for a Gatsby JS theme, Next JS theme, or Astro JS theme for a car rental business, you already know the problem.

OTAs take 15-25% of every booking. Payment gateways add complexity and fees. WordPress themes are slow and bloated. Website builders charge monthly forever.

RentCar solves all four.

Built on Gatsby and React - 20 - 22 Up — the same modern stack used by high-performance websites worldwide — this theme gives you a car rental website that Google loves, customers trust, and competitors cannot match.

What Makes RentCar Different

No OTA commission. Keep 100% of every booking.

No payment gateway. Direct email booking means you control price, terms, and negotiation.

No monthly fees. One-time $79. Unlimited projects. Forever.

Modern stack. Gatsby, React , Decap CMS. Built for speed and SEO.

Open source. You own the code. Modify it. Extend it.

Compared to Other Themes

Gatsby JS theme. RentCar is built specifically for car rental. Not a generic template.

Next JS theme. Same modern stack philosophy. But RentCar uses Gatsby for static generation and built-in GraphQL data layer.

Astro JS theme. Astro is great for content sites. RentCar uses Gatsby with React for interactive booking forms and CMS integration.

WordPress theme. No plugins. No updates. No security patches. No monthly hosting bills.

Website builder. No monthly subscription. You own the code.

Perfect For

• Independent car rental operators
• Limousine services
• Party bus companies
• Luxury car rental businesses
• Airport transfer services
• Wedding car rentals
• Chauffeur services

What You Get

Complete Gatsby JS car rental theme. Built with Gatsby, React , and Bootstrap 5. Static, fast, secure.

Headless Decap CMS included. Edit your fleet, blog, and content without touching code. Add a car in 2 minutes. Upload photos. Update pricing. No developer needed.

Direct email booking system. Visitors fill out a booking form. Submissions go straight to your inbox. No payment gateway. No OTA. You control the conversation.

SEO optimized from the ground up. Semantic HTML. Schema.org markup. Sitemap. RSS feed. Canonical URLs. Robots.txt. Everything Google needs to rank your website.

Blog system with tags. Write articles. Build backlinks. Rank for keywords like "luxury car rental [your city]". Tags automatically create category pages.

Page transitions. Smooth fade and slide animations between pages using Framer Motion.

Fully responsive. Perfect on mobile, tablet, and desktop.

Netlify ready. Deploy in minutes with one-click setup.

Pages Included

• Homepage with hero, fleet, features, customer section
• Fleet listing page
• Car detail page with booking form
• Blog listing page
• Blog post with tags
• About page
• Contact page with email form
• Tags index and tag pages
• 404 page

CMS Collections Included

• Home Page
• About Page
• Contact Page
• Cars (Fleet)
• Blog Posts
• Widget Setting
• Navbar
• Car List (Homepage)
• Contact Widget

Tech Stack

• Gatsby 5.16.1
• React 18 / 20
• Decap CMS
• Bootstrap
• Framer Motion
• Sharp image optimization

Who This Is For

Car rental operators who want to stop paying OTA commissions and build their own direct booking channel.

Developers who want a ready-to-use Gatsby JS starter for car rental clients.

Agencies who need a reliable, fast, SEO-optimized theme for automotive clients.

Anyone comparing Gatsby JS themes, Next JS themes, or Astro JS themes for a car rental project.

Frequently Asked Questions

Do I need coding skills?

No. Edit content through Decap CMS admin panel. No code required.

Do I need a payment gateway?

No. Bookings come through email. You handle payment directly with your customer.

Can I use it on multiple projects?

Yes. One-time purchase. Unlimited projects. Personal and commercial use.

Can I resell it?

No. You can build websites for clients, but cannot resell the theme itself.

Do I get updates?

Yes. Free lifetime updates.

What hosting do you recommend?

Netlify. The theme is optimized for it. Free tier is enough for most car rental websites.

How do I get support?

Email creativebydre@gmail.com. Response within 24 hours.

Buy Now — $79

One-time payment. Unlimited projects. Lifetime updates.

Buy on Gumroad

Need a custom website built from scratch? Hire us on Fiverr.

---

Documentation

Installation Guide

What You Need

Before installing RentCar, you need two things.

Node.js

Download from https://nodejs.org

Choose the LTS version. Install it. Restart your computer after installation.

VS Code

Download from https://code.visualstudio.com

Choose your operating system. Install it. Keep default settings.

Step 1: Extract the ZIP File

Extract the downloaded ZIP file to a folder on your computer.

Example:

• Windows: C:\Users\YourName\Projects\rentcar
• Mac: /Users/YourName/Projects/rentcar

Step 2: Open the Folder in VS Code

1. Open VS Code
2. Click File → Open Folder
3. Select the rentcar folder
4. Click Select Folder

Step 3: Open Terminal in VS Code

1. Click Terminal in the top menu
2. Click New Terminal

A terminal panel opens at the bottom.

Step 4: Install Dependencies

In the terminal, type:

npm install

Press Enter. Wait 2 to 5 minutes.

Step 5: Start the Development Server

Type:

npm start

Press Enter.

Wait until you see:

You can now view rentcar in the browser.
  http://localhost:8000/

Step 6: Open in Browser

Open your browser. Go to:

http://localhost:8000

Your website is now running.

Configuration

Step 1: Open gatsby-config.js

In VS Code, open the file:

gatsby-config.js

You will see this section at the top:

siteMetadata: {
  title: `RentCar - Car Rental Theme`,
  titleTemplate: `%s | RentCar`,
  gst: ``,
  author: {
    name: `Your Name`,
    summary: `Modern car rental website with direct email booking and Decap CMS.`,
  },
  description: `Modern car rental website with direct email booking and Decap CMS.`,
  siteUrl: `https://yourdomain.com/`,
  social: {
    twitter: ``,
    facebook: ``,
  },
  keywords: [
    `car rental website`,
    `car rental theme`,
    `jamstack car rental`,
    `decap cms theme`,
    `direct booking car rental`,
  ],
},

Step 2: Change These Fields

title

Change to your website name.

Example:

title: `My Car Rental`,

description

Change to your website description.

Example:

description: `Premium car rental service in your city.`,

siteUrl

Change to your website URL.

Example:

siteUrl: `https://mycarrental.com/`,

author.name

Change to your name or company name.

Example:

author: {
  name: `My Car Rental`,
  ...
},

Step 3: Change Site URL in Plugins

Scroll down in gatsby-config.js. Find these two sections:

{
  resolve: `gatsby-plugin-robots-txt`,
  options: {
    host: `https://yourdomain.com`,
    sitemap: `https://yourdomain.com/sitemap-index.xml`,
    policy: [{ userAgent: `*`, allow: `/` }],
  },
},
{
  resolve: `gatsby-plugin-canonical-urls`,
  options: {
    siteUrl: `https://yourdomain.com`,
  },
},

Change https://yourdomain.com to your actual domain.

Step 4: Save and Restart

1. Save the file (Ctrl + S or Cmd + S)
2. In terminal, press Ctrl + C to stop the server
3. Type npm start to restart

Decap CMS Setup

Important: Development vs Production

Gatsby develop server does not serve the /admin/ path. To use Decap CMS locally, you must run build and serve.

• npm start — CMS returns 404
• npm run build + npm run serve — CMS works

Step 1: Open Two Terminals

1. Open VS Code
2. Click Terminal → New Terminal
3. Click the + icon to create a second terminal

Step 2: Build and Serve in Terminal 1

In Terminal 1, type:

npm run build

Wait until build completes. Then type:

npm run serve

Wait until you see:

You can now view rentcar in the browser.
  http://localhost:9000/

Leave this terminal running.

Step 3: Start Decap CMS Proxy in Terminal 2

In Terminal 2, type:

npx decap-server

Wait until you see:

Decap CMS Proxy Server listening on port 8081

Leave this terminal running.

Step 4: Access the CMS

Open your browser. Go to:

http://localhost:9000/admin/

You will see the Decap CMS login page. In local mode, no login required.

Step 5: Page Content Collections

These collections edit JSON files in content/data/:

• Home Page — content/data/home.json
• About Page — content/data/about.json
• Contact Page — content/data/contact.json
• Widget Setting — content/data/widget.json
• Navbar — content/data/widget.json
• Car List (Homepage) — content/data/widget.json
• Contact Widget — content/data/widget.json

Step 6: Car Listings Collection

This collection edits Markdown files in content/car/:

• Cars (Fleet) — content/car/*.md

To add a new car:

1. Click Cars (Fleet) in the sidebar
2. Click New Car at the top
3. Fill in the fields:

Title: Mercedes-Benz S-Class

Publish Date: Today

Description: Luxury sedan for executive travel

Cover Image: Upload a photo

Intro: Executive Mercedes rental

Brand: Mercedes-Benz

Car Model: S-Class

Transmission: Automatic

Capacity: 5 Seats

Year: 2024

Color: Black

Price: 800

Duration: Day

Content: Write a description

1. Click Save
2. Click Publish

Step 7: Blog Articles Collection

This collection edits Markdown files in content/blog/:

• Blog Posts — content/blog/*.md

To add a new blog post:

1. Click Blog Posts in the sidebar
2. Click New Post
3. Fill in the fields:

Title: How to Start a Car Rental Business

Publish Date: Today

Description: A practical guide for new operators

Cover Image: Upload a photo

Tags: car-rental, business, guide

Content: Write your article

1. Click Save
2. Click Publish

Step 8: Rebuild After Changes

In serve mode, changes require a rebuild.

1. Stop Terminal 1 (Ctrl + C)
2. Type npm run build
3. Type npm run serve
4. Refresh browser

Deployment

Step 1: Create GitHub Account

If you do not have a GitHub account, create one at:

https://github.com/signup

Step 2: Create a New Repository

1. Log in to GitHub
2. Click the + icon in the top right
3. Click New repository
4. Enter repository name: rentcar
5. Select Private or Public
6. Leave all checkboxes unchecked
7. Click Create repository

Step 3: Push Your Code to GitHub

Open VS Code with your project folder. Open terminal.

git init

git add .

git commit -m "Initial commit"

git branch -M main

git remote add origin https://github.com/your-username/rentcar.git

git push -u origin main

Replace your-username with your GitHub username.

Step 4: Deploy to Netlify

1. Go to https://www.netlify.com
2. Click Sign up → Sign up with GitHub
3. Authorize Netlify
4. Click Add new site → Import an existing project
5. Click Deploy with GitHub
6. Select your rentcar repository
7. Configure build settings:

Build command: npm run build

Publish directory: public

1. Click Deploy site

Step 5: Add Custom Domain

1. In Netlify dashboard, go to Domain management
2. Click Add domain → Add a domain you already own
3. Enter your domain name
4. Click Verify → Add domain

Netlify will show you the DNS records you need to configure at your domain registrar.

Step 6: Configure DNS at Your Registrar

Log in to your domain registrar (Namecheap, GoDaddy, Cloudflare, etc).

For apex domain (yourdomain.com): Add an A record pointing to Netlify's load balancer IP.

For subdomain (www.yourdomain.com): Add a CNAME record pointing to your Netlify subdomain.

Example:

www  CNAME  your-site-name.netlify.app

Step 7: Enable HTTPS

1. In Netlify dashboard, go to Domain management → HTTPS
2. Click Verify DNS configuration
3. Click Provision certificate

Netlify automatically provisions a free Let's Encrypt SSL certificate.

Step 8: Automatic Deployments

Every time you push changes to GitHub, Netlify rebuilds your site automatically.

git add .
git commit -m "Update content"
git push

Wait 1 to 3 minutes. Your changes go live.

Optional: Deploy to Vercel

1. Go to https://vercel.com
2. Click Sign up → Continue with GitHub
3. Click Add New → Project
4. Select your rentcar repository
5. Framework Preset: Gatsby
6. Click Deploy

For custom domain:

1. Go to Settings → Domains
2. Enter your domain
3. Add A record (apex) or CNAME record (subdomain) at your registrar
4. Vercel provisions SSL automatically

Support

Before Contacting Support

Check the documentation first. Most questions are answered in the sections above.

Common Issues

Images Not Loading

Check that image paths in JSON files and Markdown frontmatter match actual file locations.

All images should be in static/images/. Use /images/filename.webp in your content files.

Build Fails on Netlify

Add an environment variable in Netlify:

Key: NODE_VERSION

Value: 18 or 20

Then trigger a new deploy.

CMS Login Not Working

Check that:

1. Netlify Identity is enabled
2. Git Gateway is enabled
3. The branch in config.yml matches your default branch

Port Already in Use

npm start -- --port 8001

/admin/ Returns 404 in Development

This is expected. Gatsby develop server does not serve static HTML files.

Use npm run build and npm run serve instead. Access CMS at http://localhost:9000/admin/.

Contact Support

Email us at:

creativebydre@gmail.com

Response time: Within 24 hours on business days.

When contacting support, include:

• Your operating system (Windows, Mac, Linux)
• Node.js version (node -v)
• Description of the issue
• Screenshot or error message

License Summary

You may:

• Use on unlimited personal projects
• Use on unlimited client projects
• Modify the source code
• Charge clients for websites built with this theme

You may not:

• Resell the theme as-is
• Redistribute the source code
• Share with others who did not purchase

See the LICENSE file for full terms.

Need a Custom Website?

If you need a fully custom website built from scratch, we offer professional web development services.

Hire us on Fiverr:

https://www.fiverr.com/creativitas/create-your-custom-website-and-app

Buy More Themes

Visit our Gumroad store for more themes:

https://creativitaz.gumroad.com/l/gatsbycar

Thank You

Thank you for choosing RentCar. We hope this theme helps you build an amazing car rental website.

If you find this theme useful, please leave a review on Gumroad. Your support helps us continue building high-quality products.