With a headless WordPress setup, you can separate the back and front ends of your website. You can use this approach to generate static copies of your site, which makes for much faster loading times.
In this article, we’ll talk about what headless WordPress is and how it works. Then we’ll show you how to implement a basic setup that uses static copies of your website via Amazon Web Services (AWS).
Let’s get to work!
An introduction to headless WordPress
Usually, when you make changes to your site on the back end (or admin dashboard), you see the corresponding results on the front end (meaning the live pages visitors have access to). In this traditional model, WordPress serves both the back and front ends of your website.
When we talk about headless WordPress, we’re referring to a setup in which you’re not using WordPress to generate the front end of your site. Instead, WordPress acts only as the back end. For the front end, you can use any other platform that connects with WordPress via its API, or set up a static website.
For this article, we’re going to work with a static WordPress setup for the front end. The two primary advantages of this methodology are:
- Static websites are highly secure since there aren’t any moving parts for hackers to take advantage of.
- Non-dynamic pages load much faster since they don’t need to pull information from databases or load scripts. Of course, another way to achieve this is with WordPress page caching.
In theory, a static WordPress setup might also save you money on hosting since you can get away with using a less powerful server.
However, it’s not an approach that works with all types of projects. For instance, with this solution, it’s more complicated to include dynamic elements such as contact forms or site search (though it is possible, with the right setup).
That said, a static front end can be an excellent fit for simple websites. If you’re launching a personal blog or brochure site, this setup can be a good option.
A quick note: Some people don’t consider a static WordPress site to be a true headless WordPress setup because it’s not using the REST API and the design is still somewhat attached to the backend (via the theme). However, it’s the simplest example of this type of setup, which is why we chose to focus on this approach for the tutorial.
How to set up a headless WordPress website using AWS (in three steps)
In theory, you can host a static copy of your website with any provider you want. However, for this example, we’re going to use AWS because it works out of the box with the plugin we’ll feature. Here’s how to get started.
Step 1: Set up an AWS account
Getting started with AWS requires a little more legwork than a traditional web host. However, using this platform can be incredibly cheap for static websites. In fact, it may cost you as little as $0.50 a month.
For a headless WordPress setup, you’ll want to use the Amazon S3 tier, which offers 12 months of hosting for free:
Signing up for your account should be fairly straightforward – click on the Get started with Amazon S3 button and fill out the required fields in the registration form.
Note that if you’re already logged into an Amazon account, the button will read Complete Sign Up instead. The process is the same, you just won’t be asked to re-enter your email address and login credentials.
Step 2: Generate a static copy of your website
For this setup to work, you still need to install WordPress somewhere so you can use it as the back end of your site, as well as to generate static content for the front end. To avoid paying for two different hosting providers, one solution is to create a local WordPress installation.
There are several ways you can set up a local WordPress website, including:
- Creating a full local WordPress environment using a tool such as XAMPP
- Using software such as Local by Flywheel to set up local WordPress installations
In this case, Local by Flywheel offers a more user-friendly approach. Download and install the software, then set up a new local website.
How to use Local to set up a site ?
Next, configure and customize your site however you want. Update your settings, choose a theme, and write up your pages and posts. When you’re happy with it, you’ll be ready to create a static copy to use for the front end of your site.
To do so, go ahead and set up the WP2Static plugin:
There are several other plugins you can use to achieve the same goal. However, WP2Static works seamlessly with multiple platforms out of the box, including AWS, Netlify, GitHub Pages, and more.
Once the plugin is ready, you can access its settings from the WP2Static tab in your dashboard. It opens directly to the Deploy static website tab, which is precisely where you want to be:
Here, add the URL visitors will use to access your website in the Destination URL field (this will be determined by your Amazon S3 configuration). Then, select Amazon S3 from the dropdown at the top of the screen:
Before you deploy your website, you need to configure a few settings and connect AWS to your website, which you’ll do in the next step.
Step 3: Auto-deploy static pages to AWS
Once you select the Amazon S3 option, several new fields will appear:
Before you can begin deployment, you’ll need to enter both your access key ID and secret access key. Keep in mind, the access key ID you use needs to have the correct permission levels for the deployment to work. Here’s a quick guide on how to obtain both keys from your AWS account.
Once you’ve pasted your keys into their respective fields, select the region your AWS bucket was created in and enter its name as it appears in your AWS console:
Finally, scroll to the bottom of the page and click on the Start static site export button. The process might take a while depending on how large your website is. Once it’s done, you should be able to access the live static version of your website.
Conclusion
If you want to set up a static website with a headless WordPress setup, you can do so using the WP2Static plugin. It works with AWS and several other platforms out of the box, and you can generate and deploy a static copy of your site in minutes.
If you’d rather stick with a more traditional WordPress setup while still using AWS, you can check out our guide to installing vanilla WordPress on AWS.
Do you have any questions about how to use headless WordPress with AWS? Let’s talk about them in the comments section below!
Free guide
5 Essential Tips to Speed Up
Your WordPress Site
Reduce your loading time by even 50-80%
just by following simple tips.
Keep reading the article at ThemeIsle Blog. The article was originally written by John Hughes on 2020-04-30 06:01:00.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.