This article will guide you how to easily convert WordPress websites into static websites with powerful tools. We will focus on the process of migrating from WordPress to a static website generator and explore some alternatives, including using headless CMS. Why do you need to perform this kind of migration? Because you can significantly increase your website speed, improving search engine rankings, reducing (or even eliminating) hosting fees, and significantly enhancing security.
Key points:
Advantages of static websites:
Significant speed improvements are not the only advantage, and converting a dynamic WordPress (WP) website to a static website can also bring the following benefits:
"Is WordPress safe?" The answer is complicated...
WordPress developers follow good standards and security practices, although long-term support (LTS) is still very lacking. However, due to its architecture itself, there are some things that are beyond the control of the WP security team and are directly responsible for:
All of this is a continuous process, and plugins are not trivial threats, especially unmaintained plugins. These plugins often have security vulnerabilities that can be exploited by attackers to control WordPress installations. This is exactly why Automattic has spent years supporting some plugins on WordPress.com, a commercially hosted version of WordPress. With a considerable amount of conscious effort, WordPress can be safe. While you can argue that these are the efforts any good developer should put in, it is also certain that you can relieve these burdens by converting your WP website to a static website while redefining its architecture and eliminating it forever almost without any simultaneous elimination of the virtual reality that is, All potential points that may become security threats. After all, attackers don't do much with ordinary HTML, CSS files, and flat images. However, you still need to be aware of cross-site scripting and cross-site request forgery. ?♂️ Preparation: Static website generator is available
Source: Netlify
We briefly reviewed the static website generator (SSG) in the article "100 Jamstack Tools, APIs and Services Help Your Website", and there are a large number of SSGs not covered here, So be sure to check out StaticGen for more information. Some SSGs are specifically targeted at WordPress, such as WP2Static, but we will focus on a more general SSG, namely Gatsby.js—"React-based free open source framework that helps developers build super-fast websites and applications. ”.
WordPress MigrationI must admit that although I hope the process is very simple, there are some things that can make it more tedious and time-consuming, such as existing plugins you may have installed (the fewer plugins are better) and your format How to translate articles (simple the better). Think of this as a guide that may need to be adjusted to your specific situation. Essentially, we will do the following:
Set Gatsby.js
These launchers can directly provide you with a fully functional React-driven progressive web application (PWA), all of which are already included:
Super fast loading time (pre-rendered HTML, JS automatic block loading)
You first need to install Gatsby.js and Node.js so that you can use the gatsby CLI and Node.js package manager npm. For Node.js, just download and install, and for Gatsby.js, see Getting Started or Setting Up Your Development Environment. Once you solve this problem, this is how you start your project (remember you can clone gatsby-material-starter as well):
gatsby new YourProjectName https://github.com/Vagr9K/gatsby-advanced-starter npm run develop # 或 gatsby develop
The configuration of advanced (example) and Material (example) launchers is almost the same.
As mentioned earlier, Netlify CMS is supported out of the box, you can enable it by editing static/admin/config.yml as shown below:
backend: name: github branch: master repo: your-user/your-repo
You can also integrate Netlify CMS with GitLab or Bitbucket (see backend configuration).
In some cases, you can simply convert an exported XML file containing all articles and pages into a Markdown file using ExitWP. However, depending on your WP setup and tweaking, this process may require some tricks; but it is still possible and worth it. Tania Rascia provides a good overview of how she handles this process in her article The End of an Era: Migrating from WordPress to Gatsby.
Given that Gatsby.js is a React application, becoming a React developer or at least an experienced JavaScript programmer will go a long way toward making your Gatsby tight customization. It will also be very convenient to understand some GraphQL when queries and mining data, especially if these pages are no longer served by the MySQL database. Fortunately, the documentation for Gatsby.js is very well-developed. Here are some useful resources:
Create pages programmatically through dataSafety, in place at once!
Even if your WordPress administrator is on the internet (the .htpasswd file can do a lot for you), even if it is not patched, even if your WP backup is tampered with, none of these will affect the static you have deployed Page , because the front end has been "separated" from it. Don't get me wrong, even if you're running WordPress on a local LAN (LAN) behind a firewall, you should update it regularly. Due to the major and sudden PHP or WP upgrade, I've seen my website get tampered with or stopped working more than I'm willing to admit. However, if your website is static, these security issues no longer exist!
Lost my head: Headless CMS
If you have done this, you may no longer need to use WordPress. While you can keep the administrator to generate new articles and pages, another workflow is to use another headless CMS to generate static files for you and sync them to your repository, all of which are done automatically in one step . This is "headless CMS" - a content management system that still runs somewhere as a backend instance, but is completely separate from the actual live website. WordPress is a common headless CMS option for static websites and is actually probably the most common choice for large-scale SSG deployments. While migration methods can cover many situations, you may have too much legacy content or too much content flow built into WordPress, so a full migration may not be possible immediately. This is especially true for large content operations and digital media businesses. However, if you need to manage less history, it’s a good idea to look at a more modern approach to content management – moving away from dynamic service websites is a good time to make such changes. The migration we have implemented supports Netlify CMS, although we won't cover how to use headless CMS here. This is a topic we will introduce in another article in the near future.
Dig in depth
In such articles, we can only cover so much, so here are some additional resources on migrating WP using SSG.
The official documentation center and blog are very comprehensive and well written. Here are some WP-related articles:
Hugo is based on the Go programming language and is another large SSG name that offers a large number of templates available and is a reliable option you might consider for Gatsby.js. There are some tools to migrate WordPress to Hugo. If you look at these guides, you will find that while it is less flexible, the process should be much simpler than Gatsby.js:
If you manage to set up a Ruby environment, Jekyll (which can convert your plain text to SSG for static websites and blogs ) is even easier to use, although it will only generate static pages, not like Web applications like Gatsby.js. Like Gatsby, you can generate Markdown from WP using Python-based ExitWP. You can also use the Windows-based executable wpXml2Jekyll to generate Jekyll-ready Markdown files from WP XML. Some useful articles:
Conclusion and thoughts: Is the king dead?
For me, it is very important to be at ease, and this is one of the main reasons why I stopped developing WordPress websites many years ago. What I hate is that the error can appear at any given time (zero day or otherwise) and it can endanger my work if it is not patched in time. Trust me, because of the main and sudden PHP or WP upgrade, I've seen my website tampered with or stopped working more than I'm willing to admit. However, if your website is static, these security issues no longer exist!In my opinion, WordPress has reached its "oil peak" situation in 2012 (see Google Trends: WordPress 2004-to-present). If it doesn't adapt very quickly, it will only continue to lose market share, which is beneficial to technologies that can do faster and safer work in better integrated processes. Matt Mullenweg, creator of WP and CEO of Automatic, acknowledged this as he began to encourage developers to “delve into JavaScript” and boldly abandoned WP’s PHP backend for JavaScript by introducing Calypso (read his reflection on the process). This brings shockwaves (even panic) to the community, and it is rumored that WordPress will give up PHP altogether. Gutenberg is just another step in this direction. If it manages to reshape itself, the king may eventually retain its crown. If not, hey, powering nearly a third of the internet is not easy – long live the king! ?
Read article on how SitePoint migrated its front-end to Gatsby, powered by WordPress headless CMS in 2020.
Jamstack Basics
Learn from Jamstack. Our collection of Jamstack basics helps you take the first step in Jamstack, and we are constantly adding content to it. We will provide you with the tutorials you need to become a professional. You can always refer to our index as it will be updated at the end of our Jamstack introduction: ➤
FAQs on Migrating WordPress to Static Website Builder (FAQ)
Migrating WordPress to a static website generator has several benefits. First, static websites are usually faster than WordPress websites because they don't need to process PHP or extract data from a database. This can significantly improve the loading speed of your website, which is crucial for SEO and user experience. Secondly, static websites are safer because they do not have databases that can be hacked. Finally, static websites are cheaper to host and easier to maintain, making them ideal for small businesses and personal blogs.
To ensure a smooth migration, it is crucial to plan ahead. First back up your WordPress site so you can roll back if any issues arise. Then, select the static website generator that suits your needs. Some popular options include Jekyll, Hugo and Gatsby. Once the generator is selected, you can export WordPress content using plugins like Simply Static or WP2Static. After exporting, you need to set up a new static website and import your content. Finally, thoroughly test your new website to make sure everything works properly.
Unfortunately, you cannot use your WordPress theme directly in the static website generator. However, you can recreate your topic using the static website generator's template system. This requires some knowledge of HTML, CSS and possibly JavaScript. Alternatively, you can choose a prefabricated theme that is very similar to your WordPress theme.
When migrating to a static website generator, you will lose the functionality provided by the WordPress plugin. However, many static website generators have their own plug-ins or extensions that can provide similar functionality. You need to manually research and install these plugins after the migration.
Yes, you can still use CMS in static website generator. Some popular options include Netlify CMS, Forestry, and Contentful. These CMSs allow you to manage your content in a user-friendly interface similar to WordPress. However, they generate static files that can be served by your static website generator.
Processing forms on static websites can be a bit tricky because static websites do not have a backend to handle form submissions. However, you can use third-party services such as Formspree or Netlify Forms to process form submissions. These services provide a URL that you can use as an action property in a form, and they will process the form submission and send data to you.
As with forms, comments can also be a challenge on static websites, as they don't have a backend to store and retrieve comments. However, you can use third-party services like Disqus or Commento to process comments. These services provide a JavaScript snippet that you can add to your website and they will handle the comments feature.
Yes, you can migrate your WordPress website to a static website generator without losing SEO. The key is to make sure your new static website maintains the same URL structure as your WordPress website. This way, search engines can still recognize your page and keep it ranked. Additionally, static websites are often faster than WordPress websites, which can actually improve your SEO.
Yes, most static website generators have a built-in development server that allows you to preview it before publishing your website. This is a great way to test your website before it goes live and make sure everything works properly.
Updating a static website is slightly different from updating a WordPress website. Instead of logging in to the backend to make changes, you need to update the source files of the website and then rebuild the website. This process can be automated using continuous integration/continuous deployment (CI/CD) services such as Netlify or Vercel.
The above is the detailed content of How to Migrate from WordPress to a Static Site Generator. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
