Build a static site with WordPress and Astro - (r)

-sidebar-toc>

The purpose of WordPress as headless CMS

WordPress is a content repository that provides data to the frontend, which presents the information to users via an API. This architecture enhances flexibility by enabling you to repurpose information for multiple purposes, giving WordPress users a familiar content managing experience.

Separating the frontend from the backend can also provide more freedom in design for frontends and moving content. In addition, the ability to make content accessible through APIs future-proofs the content.

Set up your development environment

There are three steps that you have to follow in order to establish your home environment:

1. Install Astro.
2. Install your WordPress website.
3. Make an WordPress staging environment.

Prerequisites

For this guide be sure to have the following items in your possession:

Install Astro

1. To help your project, create an additional directory and go to it.
2. Start a new project by using the following command in your terminal

NPM create Astro@latest

The process produces prompts for configuration. Create them according to your requirements.

1. After the project has been successfully developed, you can run the project.     npm run dev     to launch the local development server on http://localhost:4321/.

Set up an WordPress site on

1. In Your My Dashboard, select WordPress Sites and Create a site.
2. Click the Installation WordPress option and click to continue.
3. Give an Name for the site then pick the Data center location Click Continue.
4. Fill in the rest of the information, and click Continue.
5. When your site has been created after which you will see the message "Your site is now created!"

Set up a WordPress staging environment

Every WordPress installation has the option of establishing a free staging environment separate from the actual web site in use. This can be useful for testing new WordPress versions, plugins, code, and general development work.

1. From the menu bar then click     Live    and then     Create New Environment    .

1. Select Standard environment and click Continue.
2. Select Clone to copy an existing environment, provide an Environment name, choose Live for Environment to clone, and click Continue.
3. Once WordPress is installed, you'll locate the WordPress staging area on the     Live     menu.

Integrate WordPress with Astro

To integrate WordPress with Astro You must

• Install WPGraphQL.
• Connect Astro to WordPress.

Install WPGraphQL

Install the WPGraphQL plugin to your WordPress site prior to using GraphQL to connect Astro with it.

1. On the My dashboard, select the site that you wish to have. WordPress site.
2. From the menu bar click     Staging    and then     Open WP Administration    in the upper-right corner.

1. Provide the credentials that you created when creating your WordPress site.
2. Go to the Plugins menu at the bottom of the navigation bar to the left.
3. Click Add New Plugin to include WPGraphQL to your plugin. WPGraphQL plugin.
4. Search for "WPGraphQL," click     Install New    to install to install     WPGraphQL    the plugin and select it, and then     Active    .

1. For a test to ensure to ensure that the WPGraphQL plugin you installed works as expected, open your GraphQL menu in the navigation bar and click GraphiQL to open the IDE.
2. Use the following code in the GraphiQL Editor and press     Run    on the top left for on the left to execute GraphQL query:

 posts Posts
nodes 
 slug
 excerpt
 title
 
 

This GraphQL query effectively retrieves slugs, excerpts, and titles of the posts on the WordPress site.

The left hand part of the GraphiQL IDE, you can see the list of posts returned by running this GraphQL query. Your WordPress GraphQL endpoint is accessible at https://your_wordpress_staging_url/graphql.

Connect Astro to WordPress

To connect Astro to WordPress to connect Astro, follow these directions:

1. Create a folder named graphql within your Astro project's Src folder.
2. Create wordPressQuery.ts file wordPressQuery.ts file inside the graphql folder.
3. Use the following code inside your     wordPressQuery.ts     file. Be sure to replace it.     https://your_wordpress_staging_url/graphql    by using you WordPress staging URL for your WordPress staging.

interface gqlParams 
 query: String;
 variables? : object;
 
 
 export async function wpquery( query, variables =  : gqlParams) 
 const res = await fetch('https://your_wordpress_staging_url/graphql', 
 method: "post",
 headers: 
 "Content-Type": "application/json",
 
 ,
 
 body: JSON.stringify(
 query,
 variables,
 ),
 );
 
 if (!res.ok) 
 console.error(res);
 return ;
 
 
 const  data  = await res.json();
 return data;
 

The code defines an interface called gqlParams as well as an asynchronous function called wpquery which allows GraphQL queries for the WordPress website.

Design your website with Astro and WordPress

1. To create a new static page in Astro Create a new file named blog.astro in the src/pages directory.
2. Paste the following code in the new file

---
 import Layout from "../layouts/Layout.astro";
 import  wpquery  from "../graphql/wordPressQuery";
 
 const data = await wpquery(
 query: `
 
 posts
 nodes
 slug
 excerpt
 title
 
 
  
 `,
 );
 ---
 
 
 
 Blog Posts
 
 
 data.posts.nodes.map((post: any) => (
 
 
 
 >
 ))
 
 
 
 
 main 
 margin: auto;
 padding: 1rem;
 width: 800px;
 max-width: calc(100% - 2rem);
 color: white;
 font-size: 20px;
 line-height: 1.6;
 
 
 h1 
 font-size: 4rem;
 font-weight: 700;
 line-height: 1;
 text-align: center;
 margin-bottom: 1em;
 
 

This example code shows how to make use of the wpquery function to pull data from the WordPress website using GraphQL and display it on the Astro site.

1. Utilization     npm run dev    for the launch of your local development server. You can also view the latest WordPress blog entries on your Astro website.     http://localhost:4321/blog    .

To handle dynamic routing for blogs You must use the combination of Astro's dynamic routes and WordPress GraphQL's query variables. When you pass the ID of your post or slug into a query variable that allows you to dynamically create the page content for each blog post. This allows for a more customized user experience for your website.

Set up your static site

1. On the My dashboard, click the Static Websites taband after that click Add Site. Add site.
2. Authorize your Git service provider.
3. Select the GitHub Repository and a Default branch. Give the Display namefor your static site and select the automatic deployment option in the commit box. This allows the automatic publication of any new modifications made to the repository. Simply click Continue.
4. Within the Settings for building section, automatically completes each field. You can leave everything in the same way and then click Create Site.
5. Log into the content of your Astro website by visiting the URL which appears as the domain on the Overview page of the site you have deployed. You can access blog posts via https://your__site_url/blog.

Summary

There's more you can do using Astro as well as WordPress. The WordPress API could be utilized to retrieve various types of data from your site and come up with unique uses for Astro.

   What's your take on Headless WordPress as well as Astro? Have you explored their potential in creating innovative solutions? Do share your thoughts in the comment section below.

Jeremy Holcombe

Content & Marketing Editor at , WordPress Web Developer, and Content writer. In addition to all things WordPress I like playing golf, at the beach, as well as movies. I also have tall people difficulties ;).

•                 Website                                          
•                 LinkedIn