A production-ready Astro blog with excellent SEO, performance, and developer experience.

• ⚡️ Lightning Fast - Zero JavaScript by default, perfect Core Web Vitals
• 🎨 Tailwind CSS v4 - Modern styling with minimal bundle size
• 📝 MDX Support - Write content with components
• 🔍 SEO Optimized - JSON-LD structured data for rich snippets
• 📱 Responsive - Mobile-first design
• 🚀 GitHub Pages - Automated deployment via GitHub Actions
• 📰 RSS Feed - Automatic RSS generation
• 🗺️ Sitemap - Auto-generated sitemap for search engines
• 🖼️ Image Optimization - Automatic image optimization with Astro
• ⌨️ TypeScript - Full type safety

• Astro - Static site generator
• Tailwind CSS v4 - Utility-first CSS
• MDX - Markdown with JSX
• TypeScript - Type safety

• Node.js 18+
• npm or yarn

1. Clone the repository:

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

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open http://localhost:4321 in your browser

/
├── public/
│   ├── favicon.svg
│   ├── robots.txt
│   └── og-image.jpg
├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   ├── Footer.astro
│   │   ├── Prose.astro
│   │   └── Seo.astro
│   ├── content/
│   │   ├── blog/
│   │   │   └── hello-world.mdx
│   │   └── config.ts
│   ├── layouts/
│   │   ├── BaseLayout.astro
│   │   └── PostLayout.astro
│   ├── pages/
│   │   ├── blog/
│   │   │   ├── [...slug].astro
│   │   │   └── index.astro
│   │   ├── index.astro
│   │   ├── about.mdx
│   │   ├── projects.astro
│   │   ├── contact.astro
│   │   ├── 404.astro
│   │   └── rss.xml.ts
│   └── styles/
│       └── global.css
├── .github/
│   └── workflows/
│       └── deploy.yml
├── astro.config.mjs
├── tailwind.config.js
├── postcss.config.cjs
├── tsconfig.json
└── package.json

Edit astro.config.mjs to configure your site:

export default defineConfig({
  site: 'https://yabood.com', // Your domain
  // For GitHub Pages project sites, add:
  // base: '/repo-name',
});

This site is configured to deploy automatically to GitHub Pages when you push to the main branch.

1. Enable GitHub Pages in your repository settings:

   • Go to Settings → Pages
   • Source: GitHub Actions

2. For Custom Domain:

   • Add a CNAME file in the public directory with your domain
   • Configure DNS settings with your domain provider

3. For Project Pages (username.github.io/repo):

   • Update astro.config.mjs:

   site: 'https://username.github.io',
   base: '/repo-name',

Create new blog posts in src/content/blog/:

---
title: 'My New Post'
description: 'A description of my post'
pubDate: 2025-08-11
tags: ['astro', 'blogging']
heroImage: '/blog-image.jpg'
---

Your content here...

Pages can be created as .astro or .mdx files in src/pages/.

The site automatically generates:

• Meta tags for SEO
• Open Graph tags for social sharing
• Twitter Card tags
• JSON-LD structured data for:
  • Blog posts (BlogPosting)
  • Website (WebSite)
  • Breadcrumbs (BreadcrumbList)
  • Author (Person)

Target metrics:

• Lighthouse Score: 95+ (all categories)
• First Contentful Paint: < 1s
• Largest Contentful Paint: < 2.5s
• Cumulative Layout Shift: < 0.1

Contributions are welcome! Please feel free to submit a Pull Request.

MIT

Yousif Abood

• Website: yabood.com
• GitHub: @yabood
• Twitter: @yabood