Moving from WordPress to Gatsby: A Step‑by‑Step Guide

Migrating a site from a traditional CMS like WordPress to a modern static‑site framework such as Gatsby can dramatically improve performance, security, and developer experience. In this guide we’ll walk through the entire process—from inventorying your existing content to deploying a lightning‑fast Gatsby site—while showing you how to integrate formcrab.com, an instant, code‑free email form service that protects your address from bots.

Why Switch to Gatsby?

WordPress	Gatsby
Server‑side rendering (PHP)	Pre‑rendered HTML + React
Vulnerable to plugin exploits	No runtime server, only static files
Slower page loads on high traffic	Instant page loads from CDN
Requires regular updates & backups	Deploy once, forget about it

If you want a site that loads in milliseconds, scales effortlessly, and still lets you collect messages without exposing your email, Gatsby + formcrab.com is a perfect match.

Prerequisites

Node.js (>= 18) – for running Gatsby CLI.
Git – to version‑control your new project.
A WordPress export (.xml) or access to the WordPress REST API.
A formcrab.com account – create a private form link for contact forms (more on this later).

Step 1 – Audit Your Existing WordPress Site

List all content types (posts, pages, custom post types).
Identify essential plugins (e.g., SEO, contact forms).
Export your data:
- Use Tools → Export in the admin dashboard to download an XML file.
- Or note the base URL of the WordPress REST API (https://example.com/wp-json/wp/v2).

Document this inventory; it will guide the data sourcing step.

Step 2 – Bootstrap a New Gatsby Project

# Create a new site using the default starter
npm create gatsby@latest my-gatsby-site
cd my-gatsby-site

# Install the WordPress source plugin
npm install gatsby-source-wordpress

Update gatsby-config.js with your WordPress source:

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-wordpress",
      options: {
        // For a self‑hosted WP site
        url: "https://your-wordpress-site.com/graphql",
        // Or use the REST API endpoint
        // baseUrl: "your-wordpress-site.com",
        // protocol: "https",
        // hostingWPCOM: false,
        // useACF: true,
      },
    },
  ],
};

Run gatsby develop to verify that content appears in GraphQL Playground (http://localhost:8000/___graphql).

Step 3 – Pull Content From WordPress

Use Gatsby’s GraphQL layer to query posts, pages, and media:

{
  allWpPost {
    nodes {
      title
      excerpt
      slug
      date(formatString: "MMMM DD, YYYY")
      featuredImage {
        node {
          sourceUrl
        }
      }
    }
  }
}

Create React components (e.g., src/pages/blog.js) that map these nodes to pages or list views.

Step 4 – Design Your UI with React

Because Gatsby ships with React, you can:

Re‑use existing design systems (e.g., Tailwind CSS, Chakra UI).
Build reusable components (Header, Footer, Card).
Add client‑side interactivity with hooks (useState, useEffect).

Focus on performance: lazy‑load images, use gatsby-image (or the newer gatsby-plugin-image) for responsive, optimized pictures.

Step 5 – Replace WordPress Forms with FormCrab

WordPress contact forms often expose a raw mailto: link or require a server‑side handler. FormCrab eliminates the need for code or hosting while keeping your email address hidden from bots.

What FormCrab Gives You

Receive Messages, Hide Your Email – No more publishing raw addresses.
Unlimited Private Links – Share a single URL anywhere (GitHub README, Twitter bio, static blog).
No Code Required & Anti‑Spam – Built‑in protection against web scrapers.
Customizable GET Parameters – Pre‑fill fields, set subjects, redirect after submission.

Getting a Private Link

Sign up at formcrab.com.
Create a new form and copy the generated link: https://formcrab.com/f/{custom-link}.

Using GET Parameters for a Seamless Experience

Replace {custom-link} with your token in the examples below.

1. Auto‑fill Name

[Email us](https://formcrab.com/f/{custom-link}?name=Hugh)

2. Pre‑set Visitor Email

[Contact Support](https://formcrab.com/f/{custom-link}[email protected])

3. Custom Subject

[Report an Issue](https://formcrab.com/f/{custom-link}?subject=Urgent+Support+Request)

4. Predefined Message

[Inquiry](https://formcrab.com/f/{custom-link}?message=I+would+like+to+request+a+demo)

5. Custom Redirect (Next)

[Send and Return](https://formcrab.com/f/{custom-link}?next=https://yoursite.com/success)

How to embed in Gatsby

import React from "react";

const ContactButton = () => (
  <a
    href="https://formcrab.com/f/{custom-link}?subject=Website+Inquiry"
    target="_blank"
    rel="noopener noreferrer"
    className="btn-primary"
  >
    Get in Touch
  </a>
);

export default ContactButton;

No backend is required; form submissions land directly in your inbox, and you retain full control via the FormCrab dashboard.

Step 6 – Optimize SEO and Performance

Add gatsby-plugin-react-helmet for dynamic meta tags.
Generate a sitemap with gatsby-plugin-sitemap.
Enable a robots.txt file via gatsby-plugin-robots-txt.
Configure image thumbnails and lazy loading.

Run gatsby build && gatsby serve to verify the production bundle.

Step 7 – Deploy to a CDN

Gatsby outputs static files in the public/ folder. Deploy with one click to any static‑hosting platform:

Platform	One‑Click Deploy
Netlify	Connect your Git repo, set the build command `gatsby build`, publish directory `public`
Vercel	Same steps, automatic preview URLs
GitHub Pages	Push `public` to `gh-pages` branch (or use a CI workflow)

After deployment, verify that all pages render correctly, form links open the FormCrab modal, and redirects work as expected.

Step 8 – Go Live & Monitor

Update DNS to point your domain to the CDN endpoint.
Set up analytics (Google Analytics, Plausible, or Simple Analytics).
Monitor form submissions in the FormCrab dashboard.
Iterate – Add new content via WordPress, run gatsby develop locally, then push changes to Git to trigger a new build.

Final Thoughts

Moving from WordPress to Gatsby gives you speed, security, and developer flexibility. By coupling Gatsby with formcrab.com, you keep communication channels open without ever exposing your email address to bots, and you avoid the overhead of managing server‑side form handling.

Ready to make the switch? Start by cloning the starter, connecting your WordPress source, and adding a FormCrab link—your new, ultra‑fast website is just a few commands away. Happy building!