Recently wordpress.org has released the new updated version 5.4 of WordPress. With many outstanding features, such as improved task execution speed, page loading inside the dashboard.
Improve some features on Custom Gutenberg Blocks,… And as you can see, WordPress is now a Headless CMS , which makes it possible for us to link WordPress with many different platforms like Angular, Vue, React. , Gatsby, Next… Then with this article I introduce to you about Gatsby JS .
Contents
What is Gatsby Js?
Gatsby is a “static site generator” built from core ReactJS . It’s basically no different from the web written in React Js , with Gatsby platform , we will write code in JavaScript. Then when building the platform will bundle into HTML , CSS , JS files and the database taken from the api will be saved to the Json file . You can deploy to any static website hosting.
I use Netify in combination with Github to push the web up. Because Netify supports web hooks for when you publish articles from the WordPress dashboard. Then Netify will automatically execute the command to rebuild the website and public on hosting.
How to write a blog in Gatsby can do the following: write a blog post in md(markdown) format, put it in the posts folder, bundles it up and then push it to hosting. Or you can combine with other CMS like WordPress, Drupal, Contentful, etc. you can also combine with some CMS you build yourself as long as there is api to query data.
Advantages of Gatsby JS
If someone asked me what is the advantage of Gatsby? Then the first thing that comes to mind is speed and performance, good support platform, SEO Optimizer and finally PWA ( Progressive Web Apps ).
-
Speed and Performance : as I said Gatsby is a framework built from core React JS. And more specifically, a framework for making static web pages, for that reason, the loading speed of the web will be faster than other pages. Security is also higher, if you use a website written in Gatsby.
You will find that switching between pages in your website is also very fast because all the styles, html and javascript will be loaded on the first load. When a user clicks on an article on your site, the new content will be downloaded as JSON and displayed.
No need to reload the entire page, configuring the plugin allows to optimize image loading. And preload (preloading the content of the links users may visit) will give your website a super speed.
This is the result I captured from a page written in Gatsby
- Good support platform : like WordPress, Gatsby has an extremely diverse plugin system to support the devs.
- SEO Optimizer: As I said above, Gatsby has a diverse plugin system, so Gatsby has very good SEO support plugins.
- PWA ( Progressive Web Apps ): Gatsby provides a plugin to convert your website from SPA to PWA. Make your website downloadable into desktop and mobile apps.
Disadvantages of Gatsby JS
Every platform has its downsides, and so does Gatsby. In my opinion, it will have some disadvantages as follows:
- Difficult to access: it will be very difficult to use and access if you have never programmed.
- Since Gatsby is a static web framework , changing the content will have some limitations. But don’t worry too much because everything has a solution and a different way. I will explain more in future posts
What you need to learn Gatsby and WordPress
- Know how to install Node JS and use the npm mechanism to install packages
- Basic knowledge of React JS such as: React props, React states, api communication on React platform, etc.
- Knowledge of WordPress such as: Custom field, Custom Post Type, WordPress Api, …
Summary:
But so today I gave you a brief introduction to gatsby and what it can do. In the following articles, I will introduce in depth how to combine gatsby and wordpress .
Thank you guys
