builtbylukas.dev

How to build a beautiful website from any WordPress blog

In this article, we will explore how to build a new frontend for your WordPress application. We will be using Astro and the WordPress API.

This article will cover the basic setup and how to work with the WordPress API. When we’re done with a basic version, I will show how I like to publish my pages for free using Cloudflare!

Advanced topics like parsing content, including custom components, SEO improvements and embedding PDFs will follow in a later post.

Why should I build an Astro frontend for my WordPress backend?

I can’t be the only one who strongly dislike php - especially when it’s dealing with WordPress. It’s not enjoyable for me and I much prefer the Javascript ecosystem.

This is why I like to leverage the power of Astro to quickly build new frontends in my favorite language, while allowing my clients to keep using their familiar WordPress CMS. By the way - a similar approach like this will work for any CMS! You just need to adapt the way you call their APIs.

Prerequisites

Any WordPress site will do - if you don’t have your own, you can use this API which provides some sample articles and pages on dinosaurs: https://norian.studio/dinosaurs/

It is also possible to install your own WordPress locally. I like to use “Local”.

Setting Up an Astro Project

Getting started with Astro is quick and straightforward. First, you’ll want to create a new Astro project using the official CLI tool. Run the following command in your terminal:

npx create-astro@latest

Follow the prompts to set up your project. I like to use TypeScript, but you can choose whatever you prefer.

Installing Tailwind CSS

To style your Astro project, install Tailwind CSS by running the following commands

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This sets up Tailwind with PostCSS and generates a tailwind.config.js file. Inside this file, configure the content array to include Astro files:

module.exports = {
    content: ["./src/**/*.{astro,html,js,jsx,ts,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
};

Adding Tailwind Typography

We will be getting the HTML directly from the WordPress API. To get nice typography styling out of the box, we are going to use the @tailwindcss/typography plugin.

npm install -D @tailwindcss/typography

Enable the typography plugin in tailwind.config.js:

module.exports = {
    plugins: [require("@tailwindcss/typography")],
};

Now, you can use the prose class in your Astro components to get nicely styled text. More on that later!


<article class="prose">
    <h1>Welcome to My Astro Blog</h1>
    <p>This is an example paragraph with improved typography.</p>
</article>

After the basic setup, it’s time to start working with the WordPress API to display some posts!

Fetch WordPress content via API

To fetch a page from the WordPress API using its slug, we can use the following piece of code:


const BASE_API_URL = "https://norian.studio/wp-json/wp/v2/";

async function getDino(slug) {
    // returns a list of pages with this slug - will be one or none
    const res = await fetch(`${BASE_API_URL}/dinos?slug=${slug}`);
    const [page] = await res.json();
    return page;
}

In most cases, after the base API url you will use the /pages or /posts endpoint to fetch pages or posts.

Let’s call this function inside our Astro component. I just placed it right into my src/pages/index.astro file.

---
const content = await getDino("rhizodus");
---
<main>
<article>
    <h1 set:html={page.title.rendered} class="prose" />
    <Fragment set:html={page.content.rendered} class="prose" />
</article>
</main>

Right away, we will see the page rendered! Notice how applying the prose-class formats our text nicely?

Generate pages for each dinosaur

Placing the following function into /pages/dinosaurs/[…slug].astro will generate dynamic routes for every slug in the WordPress API.

---
const { slug } = Astro.params;

// ...

export async function getStaticPaths() {
    let data = await fetch("https://norian.studio/wp-json/wp/v2/dinos");
    let posts = await data.json();

    return posts.map((post) => ({
        params: {slug: post.slug},
        props: {post: post},
    }));
}

const page = await getDino(slug);
---

Publishing the site to Cloudflare for free!

Now that you’ve built a beautiful (and still simple) frontend for your existing WordPress backend, you can publish it - totally for free and without rate limiting! I like to do this on Cloudflare. Sign up for free here.

Go to “Workers and Pages”. Create a new project. You can directly link your GitHub repository, if you have one. This option is really convenient as it automatically rebuilds your project every time you push to the repository. If you prefer to upload your files directly, you can do that as well. For this, you will first need to build your Astro project to generate a static page from it. This can be done easily with the following command:

astro check && astro build

Your page should go live shortly!

What’s next?

And that’s it for a basic site! Using the methods described above, you can build sections of your site that use specific API routes. You could generate a navigation page which lists all the pages, implement a search functionality and much more. Have some fun - I will post several follow-ups very soon detailing how to handle more advanced features like parsing content, including custom components, SEO improvements and embedding PDFs.

Sources