WordPress is a wonderful Content material Control Device (CMS). We will be able to succeed in nearly the rest with it. On account of its dynamic nature, we will exchange any content material with a click on of a button. And whilst that is superb, it additionally brings some risks, and it could actually get tough to take care of underneath heavy site visitors.

Changing your WordPress site into static would possibly clear up the ones issues.

What Static Web pages Are?

To provide an explanation for how static web pages paintings, first, we need to know how dynamic site works.

Each time we consult with a site, the server has to parse PHP recordsdata, question the database to fetch the information, and, after all, go back the rendered HTML to the browser.

Static web pages do all of the heavy lifting first – ahead of visiting the site, we save each web page as static HTML. Once we consult with the required web page, the server serves it as it’s.

The Professionals of Going Static

Velocity and Efficiency

Static web pages are fast and performant. Why? As a result of they’re simply static HTML. This implies the server should do just one factor – serve the site. It doesn’t must parse the rest or watch for knowledge from the database.

Additionally, static web pages are more straightforward to host on CDNs (even though Edge Cache works in a similar fashion), which puts all of the recordsdata as close to you as imaginable.

Total – static web pages carry out amazingly underneath heavy site visitors.

Safety

WordPress’ core is safe – it truly is. However the plugins and subject matters – no longer at all times. Additionally, everybody can attempt to get started guessing our login and password.

Total, I love to check WordPress with a area with many doorways and home windows. It’s as much as us to make a choice essentially the most safe ones, however nonetheless, if one door isn’t protected sufficient, a hacker can hack our site.

Changing your site to static eliminates maximum assault vectors. As it’s simply HTML, a hacker gained’t be capable to use inclined plugins or have the benefit of a susceptible password.

Peace of Thoughts

A standard WordPress setup is composed of many shifting portions – PHP and database servers, subject matters, or plugins – and each phase can wreck. With static, we take away maximum of them. Our server turns into more uncomplicated because it handiest serves HTML and our content material is unfold international because of CDN, which makes it DDoS-protected.

Because of this, the chance that one thing will wreck is far smaller than same old.

The Cons of Changing to Static

Workarounds

We’re used to such things as looking out the site, including feedback, or sending bureaucracy to determine of the field with WordPress. With static, it’s no longer that straightforward anymore. As a result of we transformed the whole lot to HTML, we misplaced the ones probabilities.

We need to use some third celebration equipment so as to add this capability again.

Construct procedure

We’re used to the brand new content material being to be had on our site after urgent the put up button. With the static method, we should convert our site on every occasion we need to replace it. So it could actually take a couple of mins between urgent the button and having it to be had for everybody.

Initial Steps

Earlier than we commence, we should care for some issues.

1. Create a Git Repository

We use GitHub on this instance, however you’ll be able to use every other Git answer (like GitLab or BitBucket). Presently, simply create an account (in case you don’t have one already) and create an empty repository.

After this, we need to create a record within the repo; another way, we gained’t be capable to attach it to Kinsta.

Add a file to your repository. A readme.md file in the main branch of a GitHub repository
Upload a record in your repository.

2. Attach This Repository With Static Web site Internet hosting

Move to MyKinsta, make a selection static websites from the sidebar, and make a selection Upload Web site.

Make a choice the repository you created, and don’t disregard to make a choice “Computerized deployments on dedicate.”

Kinsta's UI showing a new static site being created from a GitHub repository and its main branch.
Kinsta Static Web site Internet hosting setup.

Convert Your WordPress Site to Static

We will be able to use a couple of the right way to convert our WordPress website to static. On this article, we undergo two of them:

  1. The use of a WP plugin and Git
  2. The use of WP-CLI, CI/CD, and Git

The use of a Plugin and Git

Necessities:

Steps

  1. Open your website at the browser and set up the Merely Static plugin.
  2. Head to Merely Static > Settings > Deployment to set the deployment approach to the Native listing and set the native folder – you’ll be able to observe the top the placeholder will give you, as an example, /www/kinstaapi_533/public/public_static. Keep in mind that the plugin doesn’t gained’t create this folder for you – you should do it manually.
  1. Press the Generate Static Recordsdata button.

After a couple of mins, your entire static recordsdata can be within the folder specified within the earlier step.

Push Your Code To a Git Repository

  1. Create a repository in GitHub.
  2. Open a Terminal or Powershell, pass to the folder with the static recordsdata, and run:
git init
git far off upload beginning https://github.com/{username}/{repository_name}.git
git upload .
git dedicate -m "static content material"
git department -M major
git push --force -u beginning major

Those instructions attach the repository and push all of the static recordsdata to GitHub. Pushing the adjustments triggers an automated deployment as a result of we already hooked up this repository with Kinsta’s Static Web site Internet hosting.

Subsequent time you convert one thing on your WordPress, rebuild the entire site, and run:

git upload .
git dedicate -m "static content material"
git push --force -u beginning major

The Professional model of Merely Static provides a GitHub addon that automates the construct procedure. Nonetheless, it’s a paid plugin, and in some circumstances, doing it manually may well be a excellent sufficient answer.

The use of WP-CLI, CI/CD, and Git

This system makes use of the similar WP plugin as the process above, however in its Top class (paid) model, and makes use of a CI/CD pipeline from Good friend CI to push your code to a GitHub repository.

This method is extra sophisticated to arrange however calls for much less handbook paintings all over each deployment. Additionally, it’s extra extensible as you may have keep an eye on over each and every step. You’ll upload extra movements to the pipeline if you want.

Necessities:

  • Merely Static Professional (handiest the Professional model has the WP-CLI integration).
  • Your site needs to be publicly available (so it could actually’t be on a localhost), and the server calls for SSH get admission to and WP-CLI put in. Kinsta WordPress web hosting is an ideal have compatibility.
  • Your website’s codebase hosted in a GitHub repository
  •  A CI/CD instrument to orchestrate the whole lot. We use Good friend on this instance as a result of its friendliness and straightforwardness. However you’ll be able to use every other instrument, corresponding to GitHub Movements or GitLab CI/CD.

Steps:

  1. Open your WP website for your browser and set up the Merely Static Professional plugin.
  2. Head to Merely Static > Settings > Deployment to set the deployment approach to the Native listing and set the proper trail – you’ll be able to observe the top that the placeholder will give you, as an example, /www/kinstaapi_533/public/public_static.
  3. Keep in mind that the plugin doesn’t create this folder for you – you should do it manually.
  4. Head in your GitHub repository and create an get admission to token with write to get admission to your repositories. We’ll want it quickly.
  5. Log in in your account on Good friend, upload a brand new challenge, and attach it together with your repository.

Let’s create a pipeline on Good friend that does the next:

  1. Runs Merely Static WP-CLI command by the use of SSH for your server.
  2. Zips the whole lot.
  3. Obtain it to Good friend filesystem.
  4. Unzips the whole lot.
  5. Pushes the whole lot in your Git repository.

Buddy UI on the Actions tab showing the proposed workflow
An outline of the proposed Good friend’s workflow.
  1. First, we need to upload an motion known as SSH command.
  2. Within the Run CMDs tab, run:
wp simply-static run
cd public_static
zip -FSr ../static.zip .

This script converts our site to static and zippers it.

  1. Within the Goal tab, input your entire credentials (to find them at MyKinsta) and set the running listing to public.

Buddy's UI showing the Target tab setup
Good friend Goal setup.
  1. Subsequent, upload a Native Shell motion. Inside of it, run:
rm -rf *

This command guarantees there gained’t be any recordsdata we don’t want.

  1. To obtain the zip record from the server, upload a brand new motion (you’ll be able to do this via urgent the + at the listing of movements) and make a selection SFTP Obtain from the listing. Excluding the credentials, we need to go the trail to the zip record and test the overwrite choice.

Buddy's UI showing the Download action's setup
Good friend’s Obtain motion setup.
  1. Upload any other Native Shell motion to unzip all recordsdata and take away the zip record (we gained’t want it anymore). Run:
unzip -o static.zip
rm static.zip
  1. Move to the Ubuntu tab and make a selection Programs & Equipment set up unzip. To take action, run:
apt-get replace && apt-get set up -y unzip
  1. The remaining step calls for the use of the Git Push motion. You should use the GitHub Get admission to Token you configured in step one and its password. Additionally, don’t disregard to test Power Push and Push revision to the particular department.

Buddy's UI showing the Push action's setup
Good friend’s Push motion setup.

When you need to redeploy your site, press the Run button in Good friend, and the magic will occur. In the event you’d love to automate this procedure, there’s a plugin for WordPress you’ll be able to use.

Buddy UI on the Actions tab showing the proposed workflow
An outline of the proposed Good friend’s workflow.

Because of Good friend’s documentation, you’ll be able to take a look at how one can additional automate your workflow.

Different Tactics To Convert WP to Static

Static Web site Turbines

Many Static Web site Turbines can assist you to attach any CMS with an API (WordPress has integrated REST API and GraphQL to be had by the use of a plugin). You’ll use Astro, Eleventy, or every other.

Whilst this method will give you a lot more flexibility, it calls for extra paintings than the above answers.

Abstract

Is changing a WordPress website right into a static one a good suggestion? It is dependent. There are lots of components you must believe ahead of doing this. Needless to say, it’s a good suggestion to take into consideration it. As discussed ahead of – static web pages have numerous professionals, and no longer taking advantage of them could be a massive waste.

The publish Deploy a Static WordPress Web site to Kinsta for Unfastened seemed first on Kinsta®.

WP Hosting

[ continue ]