🌐 Personal Website — Astro + TailwindCSS + Headless WordPress

A fast, modern, and fully responsive personal website built using Astro and TailwindCSS on the frontend, and powered by a headless WordPress backend via GraphQL API.

🚀 Features

• ⚡️ Built with Astro for optimal performance and modern development.
• 🎨 Styled with TailwindCSS.
• ✍️ Dynamic content powered by WordPress (headless).
• 🔌 Fetches data using GraphQL.
• 🧩 Modular and maintainable structure.
• 📱 Fully responsive design.

🛠️ Technologies Used

• Frontend: Astro, TailwindCSS
• Backend: WordPress (headless)
• Data Layer: GraphQL API (via WPGraphQL plugin)
• Deployment: Github Actions

📦 Installation

1. Clone the repository

git clone https://github.com/bpato/bpato.com.git
cd bpato.com

2. Install dependencies

npm install

3. Set up environment variables

Create a .env file in the root directory with the following:

# Website domain to generate robots.txt and sitemaps
DOMAIN=https://maindomain.com

WP_DOMAIN=https://yourwordpressdomain.com/

# Optional
WP_API_CUSTOM=graphql

Ensure WPGraphQL plugin is active in your WordPress install.

4. Run the development server

npm run dev

Open http://localhost:4321 to see the site in action.

🧪 GraphQL Queries

This project uses GraphQL to fetch dynamic content such as:

• Posts
• Pages

You can explore and test queries using the built-in WPGraphQL GraphiQL IDE at:

https://yourwordpressdomain.com/graphql

📄 License

This project is licensed under the MIT License.