In this article, we’ll talk about what headless WordPress is<\/a> 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).<\/p>\n\n\n\n Let’s get to work!<\/p>\n<\/div>\n\n\n\n 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<\/a> and front ends of your website. <\/p>\n\n\n\n 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<\/a>, or set up a static website.<\/p>\n\n\n\n \ud83d\udc49 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:<\/p>\n\n\n\n In theory, a static WordPress setup<\/a> might also save you money on hosting since you can get away with using a less powerful server. <\/p>\n\n\n\n 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<\/em>). <\/p>\n\n\n\n That said, a static front end can be an excellent fit for simple websites. If you’re launching a personal blog<\/a> or brochure site, this setup can be a good option.<\/p>\n\n\n \ud83d\udca1 A quick note<\/strong>: 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.<\/em><\/p>\n\n\n<\/div><\/div>\n\n\n 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<\/a> because it works out of the box with the plugin we’ll feature. Here’s how to get started.<\/p>\n\n\n\n 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<\/a>. <\/p>\n\n\n\n For a headless WordPress setup, you’ll want to use the Amazon S3 tier<\/a>, which offers 12 months of hosting for free:<\/p>\n\n\n Signing up for your account should be fairly straightforward – click on the Get started with Amazon S3<\/em> button and fill out the required fields in the registration form.<\/p>\n\n\n\n Note that if you’re already logged into an Amazon account, the button will read Complete Sign Up<\/em> instead. The process is the same, you just won’t be asked to re-enter your email address and login credentials.<\/p>\n\n\n For this setup to work, you still need to install WordPress<\/a> 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.<\/p>\n\n\n\n There are several ways you can set up a local WordPress website<\/a>, including:<\/p>\n\n\n\n In this case, Local by Flywheel offers a more user-friendly approach. Download and install the software, then set up a new local website.<\/p>\n\n\n\n How to use Local to set up a site<\/a> \ud83d\udc48<\/p>\n\n\n\n Next, configure and customize your site however you want. Update your settings<\/a>, choose a theme<\/a>, 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.<\/p>\n\n\n\n To do so, go ahead and set up the Staatic plugin:<\/p>\n\n\nAn introduction to headless WordPress<\/h2>\n\n\n\n
\n
How to set up a headless WordPress website using AWS (in three steps)<\/h2>\n\n\n\n
\n
Step 1: Set up an AWS account<\/h3>\n\n\n\n
![\"The](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/02\/amazon-s3.png\")
<\/figure><\/div>\n\n\nStep 2: Generate a static copy of your website<\/h3>\n\n\n\n
\n