Using Claude Code to Build a Drupal Site with Custom Twig Templates

A developer shared their experience using Claude Code to build a Drupal website with a custom approach they describe as "headless-ish HTML." They used Claude to create Twig files with raw HTML, preferring this method for greater control over the output.

Technical Approach

The developer had Claude craft Twig files that incorporate raw HTML code while still utilizing Drupal core functions like drupal_view and drupal_block. CSS was mixed directly into these templates for styling. The site structure was organized with many individual Twig files in the themes/custom/THEME/ directory, which the developer compared to their typical PHP application development methods.

Development Workflow

They used a local ddev environment extensively, noting that Claude was able to run ddev drush and other commands directly from the terminal. This setup facilitated configuration of views, taxonomies, content types, and site structures.

The process followed these steps:

• Start with Claude creating the HTML/CSS site first to make changes easier and faster
• Once the design was finalized, have Claude take that and create the Drupal site starting with a sub-theme
• Work with Claude to tackle specific areas rather than requesting broad fixes (e.g., "Let's review the XYZ content type and make sure it matches the HTML templates" instead of "Claude fix all the content types")

Practical Details

The developer left Twig debugging enabled on the Drupal website to see which Twig files were being used. They acknowledged that while some organization would be beneficial, the current structure served as a good starting point for a simple content site.

This approach allowed them to build a Drupal site that wasn't constructed "the Drupal way" but matched their preferred development patterns, making the process smoother than traditional Drupal development.