This is a comprehensive post describing step-by-step how I rebuild the Math2IT site using Wordpress as the backend (for the authors writing the blog posts) and displaying the content via Gatsby (a Static Site Generator engine) via GraphQL. The styles are the same as in version 3, but instead of Bootstrap this time I am using TailwindCSS.
<aside>
👉 The final source code: https://github.com/dinhanhthi/wordpress-gatsby
</aside>
<aside>
👉 Part 2: Build a website with Wordpress and Gatsby (part 2)
</aside>
🚨 Before you read
- I am not a professional developer of Wordpress or Gatsby or GraphQL or React. I am just a learner who knows what parts I need to get the job done. I learn when I build.
- I work with macOS, the steps you read in this post may differ on Windows and Linux. You can let me know if there are differences. Thanks a lot!
- Some Github URLs may be inaccessible, as I have not yet changed the visibility of the corresponding repositories to public. Please email me or wait until the URLs are public.
- I'll show you how to build the basic "backbone" of the website. As for the styles, you'll have to figure it out for yourself.
- The codes and instructions in this post depend heavily on the versions of the things being mentioned. If you have a different version, please check the migration instruction for that version before proceeding.
The versions of things I use in this post
- Wordpress: version 5 or 6 (I use mainly 6).
- Gatsby: version 4.21.0 (Gatsby CLI: 4.20.0)
- Local: version 6.4.2.
- NodeJS packages can be checked in this file.
How does it work after completion?
- An author goes to the WP admin page of Math2IT to create/modify their posts there. They can use any of the supported blocks (both WP standard blocks and custom blocks). They save their work.
- A pipeline detects the changes from Wordpress and rebuilds the Math2IT Gatsby site via GraphQL and publishes the new version to the web.
- The changes are updated and viewers can see the updates.
Why Wordpress + Gatsby + Tailwind CSS?