We Migrated from WordPress to Astro 5.0 and Cut Page Load Times by 60%

\n// wp-to-astro-export.mjs\n// Exports all published WordPress posts to Astro content collection markdown files\n// Requires: node >= 20.11, WordPress REST API enabled, application password for auth\n\nimport fs from 'fs/promises';\nimport path from 'path';\nimport { fileURLToPath } from 'url';\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url));\n\n// Configuration - replace with your WordPress and Astro config\nconst WP_BASE_URL = 'https://old-wp-site.example.com';\nconst WP_API_BASE = `${WP_BASE_URL}/wp-json/wp/v2`;\nconst WP_USER = 'migration-bot';\nconst WP_APP_PASSWORD = process.env.WP_APP_PASSWORD; // Store in env var, never hardcode\nconst ASTRO_CONTENT_DIR = path.join(__dirname, '../src/content/blog');\nconst POSTS_PER_PAGE = 100; // Max allowed by WordPress REST API\nconst RATE_LIMIT_RETRY_MS = 1000;\nconst MAX_RETRIES = 3;\n\n// Validate environment variables\nif (!WP_APP_PASSWORD) {\n  throw new Error('Missing WP_APP_PASSWORD environment variable. Set it before running: export WP_APP_PASSWORD=\\\"xxxx xxxx xxxx xxxx\\\"');\n}\n\n// WordPress REST API auth header\nconst authHeader = {\n  Authorization: `Basic ${Buffer.from(`${WP_USER}:${WP_APP_PASSWORD}`).toString('base64')}`,\n};\n\n// Fetch all published posts with pagination\nasync function fetchAllPosts() {\n  const allPosts = [];\n  let page = 1;\n  let hasMore = true;\n\n  while (hasMore) {\n    let retries = 0;\n    let response;\n\n    // Retry logic for rate limits and transient errors\n    while (retries < MAX_RETRIES) {\n      try {\n        response = await fetch(\n          `${WP_API_BASE}/posts?per_page=${POSTS_PER_PAGE}&page=${page}&status=publish&_embed`,\n          { headers: authHeader }\n        );\n\n        if (response.status === 429) {\n          const retryAfter = response.headers.get('retry-after') || RATE_LIMIT_RETRY_MS;\n          console.warn(`Rate limited. Retrying after ${retryAfter}ms`);\n          await new Promise(resolve => setTimeout(resolve, Number(retryAfter)));\n          retries++;\n          continue;\n        }\n\n        if (!response.ok) {\n          throw new Error(`Failed to fetch page ${page}: ${response.status} ${response.statusText}`);\n        }\n\n        break;\n      } catch (error) {\n        retries++;\n        console.error(`Attempt ${retries} failed for page ${page}: ${error.message}`);\n        if (retries >= MAX_RETRIES) throw error;\n        await new Promise(resolve => setTimeout(resolve, RATE_LIMIT_RETRY_MS * retries));\n      }\n    }\n\n    const posts = await response.json();\n    if (posts.length === 0) {\n      hasMore = false;\n      break;\n    }\n\n    allPosts.push(...posts);\n    console.log(`Fetched page ${page}, total posts so far: ${allPosts.length}`);\n    page++;\n  }\n\n  return allPosts;\n}\n\n// Convert WordPress post to Astro content collection markdown\nfunction postToMarkdown(post) {\n  // Extract embedded featured image if available\n  const featuredMedia = post._embedded?.['wp:featuredmedia']?.[0];\n  const featuredImageUrl = featuredMedia?.source_url || null;\n  const imageAlt = featuredMedia?.alt_text || post.title.rendered;\n\n  // Format date to ISO 8601 for Astro\n  const publishDate = new Date(post.date).toISOString().split('T')[0];\n\n  // Frontmatter for Astro content collection\n  const frontmatter = [\n    `---`,\n    `title: \"${post.title.rendered.replace(/"/g, '\\\\\"')}\"`,\n    `publishDate: ${publishDate}`,\n    `description: \"${post.excerpt.rendered.replace(/<[^>]*>/g, '').replace(/"/g, '\\\\\"').trim()}\"`,\n    `slug: \"${post.slug}\"`,\n    `featuredImage: ${featuredImageUrl ? `\"${featuredImageUrl}\"` : null}`,\n    `imageAlt: \"${imageAlt.replace(/"/g, '\\\\\"')}\"`,\n    `categories: ${JSON.stringify(post.categories || [])}`,\n    `tags: ${JSON.stringify(post.tags || [])}`,\n    `wordpressId: ${post.id}`,\n    `---`,\n  ].join('\\n');\n\n  // Clean up WordPress HTML content (remove shortcodes, extra breaks)\n  const content = post.content.rendered\n    .replace(/\[.*?\]/g, '') // Remove shortcodes\n    .replace(//g, '\\n') // Convert  to newlines\n    .trim();\n\n  return `${frontmatter}\\n\\n${content}`;\n}\n\n// Main migration function\nasync function main() {\n  try {\n    // Create Astro content directory if it doesn't exist\n    await fs.mkdir(ASTRO_CONTENT_DIR, { recursive: true });\n    console.log(`Exporting posts to ${ASTRO_CONTENT_DIR}`);\n\n    const posts = await fetchAllPosts();\n    console.log(`Total published posts fetched: ${posts.length}`);\n\n    // Write each post to a markdown file\n    for (const post of posts) {\n      const filename = `${post.slug}.md`;\n      const filePath = path.join(ASTRO_CONTENT_DIR, filename);\n      const markdown = postToMarkdown(post);\n\n      await fs.writeFile(filePath, markdown, 'utf-8');\n      console.log(`Wrote ${filename}`);\n    }\n\n    console.log('Migration complete! All posts exported to Astro content collections.');\n  } catch (error) {\n    console.error('Migration failed:', error.message);\n    process.exit(1);\n  }\n}\n\nmain();\n

\n// astro.config.mjs\n// Astro 5.0 configuration for migrated WordPress site\n// Integrations: content collections, sitemap, RSS, image optimization, markdown processing\n\nimport { defineConfig } from 'astro/config';\nimport contentCollections from '@astrojs/content-collections';\nimport sitemap from '@astrojs/sitemap';\nimport rss from '@astrojs/rss';\nimport remarkToc from 'remark-toc';\nimport remarkCodeTitles from 'remark-code-titles';\nimport rehypeAutolinkHeadings from 'rehype-autolink-headings';\nimport { sharp } from 'astro-sharp-integration';\nimport cloudflare from '@astrojs/cloudflare';\n\n// Validate required environment variables\nif (!process.env.CLOUDFLARE_API_TOKEN) {\n  throw new Error('Missing CLOUDFLARE_API_TOKEN for deployment. Set it in .env file.');\n}\n\nexport default defineConfig({\n  // Site configuration\n  site: 'https://migrated-site.example.com',\n  base: '/',\n  trailingSlash: 'always',\n\n  // Integrations\n  integrations: [\n    // Content collections for type-safe WordPress content\n    contentCollections({\n      collectionsDir: './src/content',\n      schema: {\n        blog: ({ z }) =>\n          z.object({\n            title: z.string(),\n            publishDate: z.string().regex(/^\\d{4}-\\d{2}-\\d{2}$/),\n            description: z.string().optional(),\n            slug: z.string(),\n            featuredImage: z.string().url().optional(),\n            imageAlt: z.string().optional(),\n            categories: z.array(z.number()).optional(),\n            tags: z.array(z.number()).optional(),\n            wordpressId: z.number(),\n          }),\n      },\n    }),\n\n    // Sitemap generation for SEO\n    sitemap({\n      filter: (page) => !page.includes('/admin'),\n      serialize: (item) => ({\n        ...item,\n        lastmod: new Date().toISOString(),\n        changefreq: 'weekly',\n        priority: item.url === '/' ? 1.0 : 0.7,\n      }),\n    }),\n\n    // RSS feed for blog posts\n    rss({\n      title: 'Migrated Blog - Astro 5.0',\n      description: 'Our blog migrated from WordPress to Astro 5.0',\n      site: 'https://migrated-site.example.com',\n      items: import.meta.env.DEV\n        ? []\n        : await import('./src/utils/rss-items.js').then(m => m.getRssItems()),\n      customData: `en-us`,\n    }),\n\n    // Markdown processing plugins\n    remarkToc({ maxDepth: 3 }),\n    remarkCodeTitles(),\n    rehypeAutolinkHeadings({ behavior: 'append' }),\n\n    // Sharp image optimization integration\n    sharp({\n      formats: ['webp', 'avif'],\n      quality: 80,\n      breakpoints: [320, 640, 960, 1280, 1920],\n      cacheDir: './node_modules/.cache/sharp',\n    }),\n  ],\n\n  // Adapter for Cloudflare Pages deployment (static + edge SSR if needed)\n  adapter: cloudflare({\n    mode: 'static',\n  }),\n\n  // Build configuration\n  build: {\n    format: 'directory',\n    assets: 'dist/assets',\n    incremental: true,\n  },\n\n  // Image configuration\n  image: {\n    domains: ['migrated-site.example.com', 'cloudflare-r2.example.com'],\n    remotePatterns: [\n      {\n        protocol: 'https',\n        hostname: 'cloudflare-r2.example.com',\n        pathname: '/images/**',\n      },\n    ],\n  },\n\n  // Markdown configuration\n  markdown: {\n    syntaxHighlight: 'shiki',\n    shikiConfig: {\n      theme: 'dracula',\n      langs: ['javascript', 'typescript', 'php', 'css', 'html'],\n    },\n  },\n\n  // Error handling configuration\n  vite: {\n    build: {\n      failOnError: true,\n    },\n    ssr: {\n      external: ['wordpress-rest-api'],\n    },\n  },\n});\n

\n// src/components/CommentSection.tsx\n// Astro 5.0 island component for post comments, hydrated only on client when visible\n// Uses React 18, client:visible directive for partial hydration\n\nimport React, { useState, useEffect, useCallback } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\n\ninterface Comment {\n  id: number;\n  author: string;\n  content: string;\n  date: string;\n}\n\ninterface CommentSectionProps {\n  postSlug: string;\n  wordpressPostId: number;\n}\n\n// Fallback UI for error boundary\nconst ErrorFallback = ({ error, resetErrorBoundary }: { error: Error; resetErrorBoundary: () => void }) => (\n  \n    Failed to load comments\n    {error.message}\n    Retry\n  \n);\n\nconst CommentSection: React.FC = ({ postSlug, wordpressPostId }) => {\n  const [comments, setComments] = useState([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState(null);\n  const [newComment, setNewComment] = useState({ author: '', email: '', content: '' });\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  // Fetch comments from Cloudflare Worker API (replaces WordPress comments)\n  const fetchComments = useCallback(async () => {\n    setIsLoading(true);\n    setError(null);\n\n    try {\n      const response = await fetch(\n        `https://comments-api.example.com/comments?postSlug=${postSlug}`,\n        { headers: { 'Content-Type': 'application/json' } }\n      );\n\n      if (!response.ok) {\n        throw new Error(`Failed to fetch comments: ${response.statusText}`);\n      }\n\n      const data = await response.json();\n      setComments(data.comments || []);\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error('Unknown error loading comments'));\n    } finally {\n      setIsLoading(false);\n    }\n  }, [postSlug]);\n\n  // Submit new comment to Cloudflare Worker\n  const handleSubmitComment = useCallback(async (e: React.FormEvent) => {\n    e.preventDefault();\n    setIsSubmitting(true);\n    setError(null);\n\n    try {\n      // Validate input\n      if (!newComment.author || !newComment.email || !newComment.content) {\n        throw new Error('All fields are required');\n      }\n      if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(newComment.email)) {\n        throw new Error('Invalid email address');\n      }\n\n      const response = await fetch('https://comments-api.example.com/comments', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({\n          ...newComment,\n          postSlug,\n          wordpressPostId,\n          date: new Date().toISOString(),\n        }),\n      });\n\n      if (!response.ok) {\n        throw new Error(`Failed to submit comment: ${response.statusText}`);\n      }\n\n      // Reset form and refetch comments\n      setNewComment({ author: '', email: '', content: '' });\n      await fetchComments();\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error('Unknown error submitting comment'));\n    } finally {\n      setIsSubmitting(false);\n    }\n  }, [newComment, postSlug, wordpressPostId, fetchComments]);\n\n  // Fetch comments on mount\n  useEffect(() => {\n    fetchComments();\n  }, [fetchComments]);\n\n  if (isLoading) {\n    return Loading comments...;\n  }\n\n  return (\n    \n      \n        Comments ({comments.length})\n\n        {error && (\n          \n            {error.message}\n          \n        )}\n\n        {/* Comment list */}\n        {comments.length > 0 ? (\n          \n            {comments.map(comment => (\n              \n                \n                  {comment.author}\n                  \n                    {new Date(comment.date).toLocaleDateString('en-US', {\n                      year: 'numeric',\n                      month: 'short',\n                      day: 'numeric',\n                    })}\n                  \n                \n                \n              \n            ))}\n          \n        ) : (\n          No comments yet. Be the first to comment!\n        )}\n\n        {/* Comment form */}\n        \n          Leave a Comment\n          \n            Name\n             setNewComment({ ...newComment, author: e.target.value })}\n              required\n            />\n          \n          \n            Email (not published)\n             setNewComment({ ...newComment, email: e.target.value })}\n              required\n            />\n          \n          \n            Comment\n             setNewComment({ ...newComment, content: e.target.value })}\n              rows={4}\n              required\n            />\n          \n          \n            {isSubmitting ? 'Submitting...' : 'Submit Comment'}\n          \n        \n      \n    \n  );\n};\n\nexport default CommentSection;\n

\n// src/content/config.ts\nimport { defineCollection, z } from 'astro:content';\n\nconst blogCollection = defineCollection({\n  schema: z.object({\n    title: z.string(),\n    publishDate: z.string(),\n    description: z.string().optional(),\n  }),\n});\n\nexport const collections = {\n  blog: blogCollection,\n};\n

\n---\nimport ContactForm from '../components/ContactForm.tsx';\n---\n\n\n\n

\n// astro.config.mjs image config\nimage: {\n  domains: ['cloudflare-r2.example.com'],\n  remotePatterns: [{\n    protocol: 'https',\n    hostname: 'cloudflare-r2.example.com',\n    pathname: '/images/**',\n  }],\n},\n