Build a website with Wordpress and Gatsby PART 1 — Foreword & Setting up

• Choose Wordpress: because of its flexible WYSIWYG block editor (Gutenberg).
• Choose Gatsby: it renders exactly what WP gives (thanks to WPGraphQL) + I feel that the site is very fast both in development mode and in production mode.
• Choose Tailwind CSS: to get one comprehensive style for the whole site. Change one for all.

The current version of Math2IT is 100% based on Wordpress. WP is really powerful and includes all the processes needed to run your website. However, the speed of a WP site is not that impressive if we compare it with static sites. One option is to use a static site to run your website at 100% (like my personal site, which is powered by 11ty, another SSG). This option has a weakness: you have to use Markdown files, and it's hard to find a WYSIWYG editor for non-technical people to edit the content. With the growth of technologies, especially in web development, we have the ability to create an A-Z like WP, but the published website is run through an SSG engine. It is fast like SSG but powerful like a CMS. However, it requires a lot of efforts so that we can create a working environment for both technical and non-technical users.

I chose Wordpress for the current version of Math2IT because it supports many blocks in its editor (and we can install/create many custom blocks ourselves if we want). Moreover, with the Advanced Custom Fields (ACF) plugin, we can create any kind of content for our blog. You can check out a WP theme I created for Math2IT here (I tested that it is compatible with WP version 5 and 6).

Thanks to GraphQL and WPGraphQL, we can transfer the data from Wordpress to a Gatsby site.

And why Gatsby? Because I feel the site is very fast in both production and development (unlike 11ty or Jekyll which take more time to build your site each time you make changes, that's my personal experience).

For example, to display 2 columns in a post, we can use the Shortcodes Ultimate plugin to create a block in WP and then get the same HTML result in Gatsby as follows,

<div class="su-row">
  <div class="su-column su-column-size-1-2">
    Column 1.
  </div>
  <div class="su-column su-column-size-1-2">
    Column 2.
  </div>
</div>

If you ask me why I use 11ty for my personal website instead of Gatsby, it's because of 11ty's flexibility when writing posts in Markdown style. Especially for images, I can insert any images with any custom classes in 11ty (thanks to the numerous plugins from markdown-it, a Markdown engine that 11ty uses to convert Markdown files into HTML files). In this post, you'll find all kinds of blocks in a post I create using 11ty. They are all written in a "Markdown style".

For example, to insert a custom size image into a markdown file,

![My home](./home.jpg){:.img-30}
_An image with 30% width of the website!_

So why not use 11ty for Math2IT in conjunction with Wordpress? That's because using WpGraphQL, all HTML tags and their classes are parsed into Gatsby before the building process. So we can add custom CSS to "display" this HTML content in the final result of Gatsby. We can do the same with 11ty (I think), but again, the advantage of Gatsby attracts me more. In other words: If I can make more customizations to the Markdown files in Gatsby (as with markdown-it in 11ty), I can use Gatsby instead of 11ty for my personal website.

Finally, I choose Tailwind CSS for the styles because of its predefined classes and also because of its cleaning process after creation. With the predefined classes (you can also create your own if you want), we have a comprehensive style for the entire site. You do not want the spacing between blocks to be small in this place and slightly larger in another, just because you manually set them in 2 different classes. A side reason is that Tailwind CSS is very popular (their marketing results), I want to learn it too. I am starting to get FOMO sick.

Export the site without spam comments, post revisions, inactive themes and cache and then download this backup as a .wpress file, say math2it.wpress.

Install NodeJS (you'll need it later anyway) and run below command,

npx wpress-extract math2it.wpress

You will have an extracted folder called math2it/. There should be a <filename>.sql file in there.

Go to the hosting panel, select your website (if you have multiple websites) and then select Backups > Select Files backups > Choose a date > Next step > Select your site > Download all files.

Unzip the dowloaded .zip file to a folder, say math2it/.

Do the same for the database file: Backups > Select Database backups > .... to get a <filename>.sql file.

For example, when I install Local, the default version is WP 6 but the backup I created is based on WP version 5.

In Local, click Open Site Shell and run the following command,

wp core update --version='5.8.4' --force

Then restart the site.

#!/bin/bash
echo "🔪 Kill port 4000"
kill $(lsof -t -i:4000)
echo "👉 Kill the old screen session name 'wp-local'"
screen -X -S wp-local quit
screen -S 'wp-local' -dm bash -c '/Applications/Local.app/Contents/MacOS/Local; exec sh'
echo "👉 Local starts running (but not completely) and the screen is detached!"

while ! nmap localhost | grep '4000'; do
  echo "🚧 Local is not yet listening on port 4000"
  echo "🔄 Wait for 3s for the next check!"
  sleep 3
  if netstat -tna | grep '4000'; then
    echo "🥳 Port 4000 is already open!"
    echo "👉 Start Math2IT local wordpress site..."
    local-cli start-site `local-cli list-sites | grep -iF 'math2it' | cut -c3-11`
    echo "👉  math2it.local is running"
    echo "\n"
    echo "🚀 Starting Gatsby develop..."
    # exit 1
  fi
done

✔ What would you like to call your site?
· math2it
✔ What would you like to name the folder where your site will be created?
· math2it
✔ Will you be using JavaScript or TypeScript?
· TypeScript
✔ Will you be using a CMS?
· WordPress
✔ Would you like to install a styling system?
· Sass
✔ Would you like to install additional features with other plugins?
· Add the Google Analytics tracking script
· Add responsive images
· Add an automatic sitemap
· Generate a manifest file

Do not worry if there are some who do not work yet!

{
  "folders": [
    {
      "path": "../MATH2IT/math2it-egg"
    }
  ],
  "settings": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    // "editor.formatOnSave": true,
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": false
    },
    "[javascriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": false
    },
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": false
    },
    "[typescriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": false
    },
    "[ignore]": {
      "editor.defaultFormatter": "foxundermoon.shell-format"
    },
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact"
    ],
    "[shellscript]": {
      "editor.defaultFormatter": "foxundermoon.shell-format"
    },
    "css.validate": false, // used for @tailwindcss
    "scss.validate": false, // used for @tailwindcss,
    "typescript.preferences.quoteStyle": "single",
    "[xml]": {
      "editor.defaultFormatter": "redhat.vscode-xml"
    }
  }
}

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
---
✔ Would you like to install them now? · Yes
✔ Which package manager do you want to use? · npm

/*
More: https://eslint.org/docs/rules/
0: "off",
1: "warn",
2: "error",
*/
rules: {
  "import/no-unresolved": 0,
  "jsx-a11y/accessible-emoji": 0,
  "jsx-a11y/iframe-has-title": 0,
  "no-const-assign": 1,
  "no-extra-boolean-cast": 1,
  "no-irregular-whitespace": 1,
  "no-unused-vars": 1,
  "prettier/prettier": 1,
  quotes: [1, "single"],
  "spaced-comment": [1, "always"],
}

const data: Queries.TypeGenWpMenuQuery = useStaticQuery(graphql`
  query TypeGenWpMenu {
    wpMenu(name: { eq: "indexMenu" }) {
      menuItems {
        nodes {
          ...
        }
      }
    }
  }
`);

Look at the usage (data: Queries.TypeGenWpMenuQuery), if you define any graphql query QueryABC {}, TypeGen will automatically generate a type for you as Queries.QueryABCQuery (we need "Query" at the end of the QueryABC) after saving the file. In order for TypeGen to recognize the query in a file, you must include that file in the "include" of tsconfig.json.

For problems with non-nullable types, see this section of the article above. This also gives you the ability to explicitly define types in your website or source code plugin.

import type { GatsbyConfig } from 'gatsby'

// YOU HAVE TO PUT THESE
import * as dotenv from 'dotenv'
dotenv.config({ path: __dirname + `/.env.${process.env.NODE_ENV}` })

// Use
const config: GatsbyConfig = {
  siteMetadata: {
    title: 'Math2IT',
    siteUrl: process.env.SITE_URL,
  },
  plugins: [
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        url: process.env.GRAPHQL_ENDPOINT_URL,
      },
    },
  ]
}