Make a static web site using WordPress and Astro - (r)

-sidebar-toc>

The goal of WordPress is to be a headless CMS

WordPress is a database of content that provides data to the frontend, which provides the data to the user via an API. The architecture is flexible, permitting you to reuse information for multiple purposes, giving WordPress users an easy content managing experience.

Separating the frontend from backend could also give more freedom in design for frontends and moving content. Furthermore, the capacity to provide content via APIs can help ensure the future of content.

Set up your development environment

There are three steps that you must follow for establishing your home environment:

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

The prerequisites

To follow this guide, be certain that you have these items at hand:

Install Astro

1. To help your project, create an additional directory and go to it.
2. Begin a new project entering the following commands in your terminal

The NPM created Astro@latest

The process creates instructions for setting up. Create them according to the specifications of you.

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

Set up an WordPress website on

1. In Your My Dashboard, go to WordPress Sites and create a new site..
2. Click the Install WordPress option and click to proceed.
3. Choose a name for the website and then select the Data center location Select Continue.
4. Complete the remainder of the information, and click Proceed.
5. Once your website has been built, you will receive the message "Your website is now in the process of being made!"

Set up an WordPress staging environment

Every WordPress installation has the option of creating a staging environment separate from the actual website that is in use. This is useful when test the latest WordPress versions and plugins, as well as code as well as general work on development.

1. On the menu bar, click Live after which click create a new Environment .

1. Choose Standard Environment and click to continue.
2. Select Clone to duplicate an environment that is already in place, enter an Environment name, then select Live for Environment to clone, and click to continue.
3. Once WordPress is installed, it will be visible in the WordPress staging area in the Live menu.

Integrate WordPress into Astro

In order to integrate WordPress to Astro It is necessary to

• Install WPGraphQL.
• Connect Astro to WordPress.

Install WPGraphQL

Install the WPGraphQL plugin on your WordPress website before making use of GraphQL to connect Astro to it.

1. In the My dashboard Select the website you would like to host. WordPress site.
2. From the menu bar click Staging followed by Open WP Administration at the top-right corner.

1. Provide the credentials that you created when creating your WordPress site.
2. Go to the plugins menu at on the left side of the bar, to the left.
3. Simply click Add New plugin to add WPGraphQL to your plugin. WPGraphQL plugin.
4. Look up "WPGraphQL," click Install New to install install WPGraphQL and the plug-in, and then select it and then activate it. .

1. To test that the WPGraphQL plugin is working according to your expectations, go to the GraphQL menu on the navigation bar. Click GraphiQL to open your IDE.
2. Utilize the following code within the GraphiQL Editor. Press Run on the top left for on the left side to run the GraphQL query:

post nodes Posts Nodes Slug excerpt title

This GraphQL query efficiently retrieves slugs, excerpts as well as the 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 the GraphQL query. Your WordPress GraphQL endpoint is accessible at https://your_wordpress_staging_url/graphql.

Connect Astro to WordPress

To connect Astro to WordPress for a connection to Astro to WordPress, follow these steps:

1. Make a folder called graphql inside your Astro Project's Src folder.
2. Create wordPressQuery.ts file. wordPressQuery.ts file inside the graphql folder.
3. You can use the following code in the wordPressQuery.ts file. Be sure to replace the code. 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 creates an interface called gqlParams and also unasynchronous feature known as wpquery which lets you use GraphQL queries to be made on your WordPress website.

Design your website with Astro and WordPress

1. To make a static webpage in Astro Make a new page called blog.astro in the pages/src directory.
2. Copy and paste the following code into the file you just created.

--- 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 code example shows how to make use of the WPQUERY function to extract data from the WordPress website using GraphQL and display it on the Astro site.

1. Make use of NPM run dev to start the installation of your development server locally. It is also possible to look up the most current WordPress blog entries on the Astro website. http://localhost:4321/blog .

To manage dynamic routing for blogs, it is necessary to use the mix with Astro's dynamic routes and WordPress GraphQL's query variables. In the event that you enter the post's ID or the slug to an query variable, this permits you to create the page content for each blog post. This will result in a better customized user experience for your site.

Create your static website

1. When you are on the My Dashboard Click on the Static Websites taband then click Add Site. Add the site.
2. Autorize the Git service supplier.
3. Choose one of the GitHub Repository and then a Branch named Default. Give the display namefor your site's static URL and choose the automatic deployment option in the commit box. This will enable the publication of any changes added in the repository. Click to to continue.
4. In the Settings for building section, automatically completes each field. Then, you can complete everything the same manner and press to create the site..
5. You can access the contents of your Astro website by visiting the URL that appears as your URL on the Overview page of your site that you've set up. You can access blog posts via https://your__site_url/blog.

Summary

You'll be able to do more by using Astro as well as WordPress. The WordPress API can be used to pull different kinds of information from your site and develop new applications to Astro.

     What's your take on Headless WordPress along with Astro? Have you explored their potential to create innovative solutions? Do share your thoughts by commenting below.

Jeremy Holcombe

Content & Marketing Editor , WordPress Web Developer, and Content writer. Alongside everything WordPress I love playing golf, at the beach, and also watching films. Also, I have height difficulties ;).

•       Website
•       LinkedIn

This post was first seen on here