https://blog.simon-hu.org/tags/astro/ Recent content in Astro on Simon's Blog https://blog.simon-hu.org/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E https://blog.simon-hu.org/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E Hugo -- 0.163.3 en Thu, 23 Apr 2026 00:00:00 +0000 https://blog.simon-hu.org/posts/2026/04---april/2026-04-16-drupal-+-astro/ Thu, 23 Apr 2026 00:00:00 +0000 https://blog.simon-hu.org/posts/2026/04---april/2026-04-16-drupal-+-astro/ <p><img alt="a991be3e-f8f1-4fbf-b576-6988a4ae8b68" loading="lazy" src="https://blog.simon-hu.org/posts/2026/04---april/2026-04-16-drupal-+-astro/a991be3e-f8f1-4fbf-b576-6988a4ae8b68.png"></p> <h2 id="executive-summary">Executive Summary</h2> <p>This guide demonstrates how to build a decoupled Drupal site using <strong>Astro</strong> as the frontend. By separating backend content management from the presentation layer, you can leverage Drupal’s robust modeling while utilizing modern JavaScript frameworks for a faster, component-based user experience.</p> <blockquote> <p><strong>Step 1: Backend Setup (Drupal)</strong></p> <ul> <li><strong>Environment:</strong> Install Drupal using <strong>DDEV</strong>.<strong>Modules:</strong></li> <li>Enable <strong>JSON:API</strong> and <strong>Serialization</strong> core modules.</li> <li><strong>Content:</strong> Create a sample &ldquo;Article&rdquo; and verify the output at <code>https://[base-url]/jsonapi/node/article</code>.</li> </ul> </blockquote> <blockquote> <p><strong>Step 2: Frontend Setup (Astro)</strong></p>