Posted by
Liraz Postan
Migrating a WordPress site to a different provider might seem like a handful but more and more blogs are derailing from what used to be the most popular content management system online. As new technology begins to grow, so do the options, and in recent years, WordPress has faced its fair share of competitors, the most promising of which is Gatsby.
Whilst operating in a relatively similar fashion, there are various reasons why many site owners prefer Gatsby to WordPress.
From functionality and service to the quality of performance and available perks, here is a closer look at both WordPress and Gatsby, followed by a detailed guide on how to safely migrate a WordPress-based site to the Gatsby framework without losing SEO quality in the process.
Defining WordPress
For decades, WordPress has represented the number one content management system. As an open-source model, WordPress continued to deliver quality service for thousands of blogs and websites over the years, whilst offering a plethora of free content and SEO management tools, such as plugins and extensions.
Statistics note that around 29% of site owners still use WordPress, which makes the platform an obvious first choice. The reasons why WordPress is favored by many users is due to its simplified content uploading, and the precision in modifying all aspects of the content and its SEO. WordPress boasts a generous gallery of plugins, both free and paid for, yet, most users find the latter a much more functional option.
That said, the downsides to using WordPress are obvious as well. For one, the system is PHP-based and comes with extensive legacy code, which complicates the optimization process. Due to its various use cases, WordPress makes a simple site to configure but not a quick one, and as you know, the slower a site is, the less traffic it drives. Not just that, but Google’s leading ranking criteria, aside from quality content, is a website’s loading speed.
Some of the other reasons users steered clear of using WordPress include:
Problematic Content Manager
WordPress took some time to revamp their content editor, and even so, they failed to excel. The new content manager (Gutenberg) separates content by blocks, which many users found challenging, as the user experience is less than ideal. Well, I don’t know- I find it really good- when you get used to it.
Most users are installing the classic editor plugin to remain with what they know.
Writing PHP
To modify a WordPress site, modifications need to be written in PHP. Whilst custom modifications exist on WordPress, many users find these to be overly demanding and time-consuming. And as PHP is not the most popular language, except for WordPress sites, dealing with it sort of feels redundant.
Some users prefer using page builders that easily help customize and modify a site’s design with no code use. But still, with WordPress, you can’t really have ALL the features in the world or build a dream site with as many features as you want. A more complex site will probably find it hard to use WordPress as the front end.
Defining GatsbyJS
Many consider WordPress an outdated technology, but as competitors rose, GatsbyJS became one of the most suitable alternatives. Most site builders and users resort to sites using languages like JavaScript and React.js, which is exactly what Gatsby brings to the table. Unlike the open-source nature of WordPress, GatsbyJS is a static site generator, primarily built in React.
When users visit a Gatsby-based site, the platform does not render pages. Instead, GatsbyJS generates pages at compilation and then moves them all online. The system requires no servers or the maintenance thereof and is compatible with static files such as JS, HTML, and CSS. Finally, Gatsby does not use PHP at all, which comes as a great relief for former WordPress users.
The platform is not without its downsides, one of which is the inability to directly see the outcome of any site changes you make, as with Gatsby, everything has to be compiled first. To help with the issue, however, many rely on Gitlab CI/CD pipelines to compile a website first and land it online next. Gatsby allows users to make blog post templates and write all content in markdown.
Here are more key benefits of using Gatsby:
As a single-page app or SPA, Gatsby doesn’t require a clicked site page to load a brand new resource.All images used on the platform are automatically filtered of external traces, such as metadata, and are immediately resized, compressed, optimized, and lazy-loaded.Gatsby has the capacity to spot all links available on a certain page and load the data into the site cache.With Gatsby, the code used is simplified, bundled, minified, and alas, served.
Migrating WordPress Data to Gatsby Framework
When you are considering moving your entire content from WordPress to Gatsby, the most important aspect to consider is not to lose your existing SEO value.
Thankfully, Gatsby makes the reception of other platforms’ content fairly easy.
The first thing you will need to transfer your content is a source plugin. A source plugin will help Gatsby seamlessly and automatically populate its Graphql store, whilst granting you access to all input information. The source plugin can be modified to match your needs, and even make your platform open-source instead of static.
Graphql poses a refined solution in acquiring API data and significantly differs from its predecessor, REST API. Graphql is a complementary asset to the Gatsby platform, meant to be used as part of the system itself. Bypassing Graphql altogether is possible but highly disregarded as an option, as it won’t grant you access to various important features.
The next step to take is to facilitate the writing process and move everything to Markdown. Markdown, or .md files, enable users to write simple and plain text which can then be converted into HTML more easily. Even more, Markdown will deliver all .md files along with the Github code of the site and make the process version controlled. Some users might find the Gatsby Advanced Started (GAS) useful as well, as this project enables the creation of SEO-oriented Gatsby sites.
How to Transfer WordPress Posts into Markdown
Before anything else, you will need to export all viable WordPress articles. Once that is done, you will need to convert these into plain text, or Markdown. There’s a tool that does that, and it is called WordPress Export to Markdown. With this tool, you can extract all WordPress content, its tags, categories, and essential SEO aspects. The tool takes an extra step to convert not just article content but post images too.
Once obtained, the files are ready to land in the project content folder. The next time you run Gatsby you will notice only an inkling of articles, but once you build the site, all content will be represented as acquired.
How to Originate Posts and Pages with Gatsby
Gatsby’s performance is similar to PHP used in WordPress. However, as Gatsby uses React in its entirety, it places the language compounds under the pages’ folders, thus automatically turning them to site pages. This feature is ideal for one-dimensional page content, like ‘Index’ and ‘About Me’.
In terms of dynamic content, like categories or blogposts, users are welcome to rely on Gatsby’s ready-to-go templates for creating specific pages. Those who will use GAS will already have the post templates at hand, along with their tags and categories. Feel free to estimate your content yet again, and make it more dynamic and thus more compatible with Gatsby. All changes you do will show in your browser at once, which makes Gatsby quite friendly for prompt iteration.
Remember, the essence of Gatsby lies in its gatsby-node.js file. Here, you can estimate both template and page behaviors, as well as the slug and the elements and extra data to use. The file is also detrimental to consider as it helps you populate the nodes, or in other words, the data is stored in your GraphQL.
How to Style a Gatsby Site
In terms of writing site styles, Gatsby offers many viable options, such as .css files, Sass, CSS-in-JS, and more. Here are a few tips on how to design your Gatsby site:
- Explore available design resources, such as Ant, MaterialUI, and Materialize.
- Be deployment-ready! Static sites like Gatsby make site deployment super-easy and affordable. You are welcome to use a number of free and fast tools to do that, like Netlify, AWS Amplify, Now, and Surge.
- Optimize, optimize, optimize! Using Gatsby means having a faster site, and you can always use the platform to make it even speedier, SEO-boosted, and accessible. One of the best optimizing tools is Lighthouse, as it does everything automatically: auditing, metrics, web practices, detailed data, and even helpful links. You can run your Lighthouse audit via Google, Firefox, or use the Lighthouse CLI option.
How to Keep Your Gatsby Website Working Fast
Once all content has been migrated, you can make your Gatsby site faster by:
- Processing all Gatsby data through GraphQL.
- Avoid using heavy libraries, like moment.js, as they can make the site slower.
- Trust your server to modify dates, send that data to your pages, and do other heavy-duty tasks.
- Manage less data by using GraphQL. This way, you will only access the data you need and will avoid piling up excessive data amounts by mistake.
- Make it accessible. Your users won’t interact with your site as you do, so ensure the site covers all categories of users by incorporating a quality a11y, which can also result in improved HTML and optimized SEO scores. To fix a11y issues, you can use relevant tools, like Axe.
How to Maintain High-Quality SEO
By understanding the basics of how Google ranks sites, you will be able to get your Gatsby site on a roll. To do that, pay attention to the following aspects:
-
Stellar and relevant content - Greater accessibility to users
- A faster running site
- Building links, or showcasing your site on other domains
A Simplified Guide on Migrating from WordPress to Gatsby
To summarize and facilitate the process, here is a step-by-step guide to fully migrating your site from WordPress to GatsbyJS.
- Download the XML from WordPress, found in Tools > Export.
- Use a tool to convert the XML to Markdown or plain text, which will sometimes do over half the job of converting blog posts.
-
Download all images and server content. Pull the images from the WordPress uploads to an image folder. - Fix broken lists and indent code blocks to assimilate to the Gatsby style.
- Save thumbnails and move them to a respective folder for reusing.
- Connect to Netlify to set up automatic deployment. If written in JavaScript, migrate it to typescript to enable it.
-
Change the styling options so they can use CSS-in-JS. Update the style and layout. - Run updates so the blog content falls in the ‘/blog/’ category.
- Use redirect for all URLs.
- Use React Context API as a wrapper to create a ***** mode.
- Migrate WordPress comments to Gatsby using a manual or automated importer.
Once all these steps are covered, you are left with building the pages, mastering GraphQL, making proper queries, and cleaning up small messes where required.
How Long Will the Migrating Process Take?
Migrating all content from WordPress to Gatsby will depend on the content volume you have at your disposal, as well as your personal efforts. Ideally, you should be able to transfer all content in no more than two weeks. However, keep in mind that if you are new to React, you will need time to adjust to it.
Once you get the hang of it, you will enjoy the perks that come with Gatsby, such as less HTML havoc within your MySQL database, and files that are easy to access, manage, edit, read, backup, and share with others.
One Last Thing…
Whilst managing Gatsby requires a set of skills and a background in CSS, HTML, JavaScript, Node.js, React, ES6, and GraphQL, to name a few, start slowly and learn each technology as it comes.
Even if the process poses a challenge, ultimately, you can follow the Gatsby Getting Started Tutorial for an even more detailed guide on the migration process.
Let’s get coding, shall we?
About The Author
