Building a Website with Drupal

Articles #C12 through #C22 covered the purpose and configuration of each feature needed to build a website with Drupal. But explanations of individual features don't always make it clear how to actually build a site. This article steps back to consolidate those topics and lay out the bigger picture.

Concept of Drupal.

To create articles and pages in Drupal and build a site with navigation menus, side menus, footers, and list pages, you need to configure the basic settings for each feature provided in Drupal Core. These features are interrelated — you can't build the site you're aiming for without combining and configuring multiple features together.

The reason multiple features need to work together comes down to Drupal's concepts and rules. Understanding these, and knowing what each feature does and how to configure it, is what allows you to build a site that achieves your goals.

Beginner's Guide.

Part of the reason I'm writing this is that tutorials — not just for Drupal but for software in general — tend to explain things feature by feature, which makes it hard for first-time users to know where to start. Feature-based tutorials make sense once you're already using the tool, but reading them before you've touched it often leaves you unsure what to do — and many people give up at that point. A tutorial that works backward from concrete use cases might be a lot easier to follow for someone just starting out.

For example, here's how the steps for creating articles and category list pages in Drupal look when explained feature by feature.

  1. Content menu: Create articles and pages.
  2. Taxonomy: Create a vocabulary and configure terms.
  3. Content type settings: Add taxonomy as a field.
  4. Views: List articles and pages by specified conditions and publish them as pages or blocks.

But explanations at this level of individual features may not be enough to understand the concrete steps.

An example of explaining Drupal site-building by organizing the features and settings needed to achieve a specific goal

A concrete site-building example

Say you want to start a cooking blog. The steps would look something like this.

  1. Write recipe articles: Create articles for various recipes — Chinese, Western, Japanese, etc.
  2. Create category list pages: Create a list page for each cuisine category.
  3. Add to the navigation menu: Place the created list pages in a hierarchical navigation menu.

Doing this in Drupal from scratch involves the following steps.

  1. Create a content type called Recipe.
  2. Create a vocabulary called Recipe in Taxonomy and configure terms such as Chinese, Western, and Japanese.
  3. Add taxonomy as a field in the content type, setting the vocabulary to Recipe.
  4. Write articles using the Recipe content type.
  5. Configure Views to create category lists.
    •    Display format: List title, photo, article summary, publication date, and recipe term in a single-column grid.
    •    Filtering: Filter by the Recipe vocabulary.
    •    Display order: Newest first.
    •    Show 10 articles per page.
  6. Register the Views-created list page in the menu.
        •    If using SVG for the title, configure the theme's title settings.
  7. Verify the placement in Block Layout.

This kind of explanation, however, is rarely found.

A Google search turns up thorough explanations of each Drupal feature, but picturing the complete workflow — assigning taxonomy to a content type, filtering in Views, creating a list page — is a lot to ask of someone with no prior Drupal knowledge.

1. Background

Drupal provides thorough documentation for each feature — content types, taxonomy, Views, and so on. That information is valuable for experienced users, but it can feel impenetrable to beginners.

2. The problem

A concrete example: creating a blog site involves the following workflow:
    •    Assign taxonomy to a content type
    •    Filter in Views to create a list page

Grasping this full configuration workflow intuitively is a lot to ask of a beginner.

3. The solution

To close this gap, an approach that works backward from the desired goal is effective.
Explaining the required features and settings step by step from a concrete goal makes it much easier for first-time users and individuals to follow.

4. Purpose of these articles

The articles on this site aim to use this reverse-lookup approach to guide Drupal beginners toward achieving concrete building goals.

Article purpose.

I'm still new to Drupal and my knowledge has gaps, so parts of this article may be hard to follow. Even so, I want to provide a guide that takes first-time Drupal users beyond just installation — all the way to actually building a site and running it.

Drupal is mostly used in enterprise contexts, where site building is handled by developers and vendors. That means there's little perceived need for beginner tutorials aimed at individual users — which may be why such tutorials are so hard to find.

When I started learning Drupal, I found plenty of information about installation but very little about actually building and running a site. And I get the sense that not many individuals are running Drupal sites at all. This article is an attempt to address that gap.

Introduction.

This site is built with Drupal using the Bootstrap5 theme, taking advantage of the provided default settings. The setup is quite simple, but the process still involved a lot of configuration. Those settings are the foundation of site building — without understanding them, building a site isn't really possible.

When I talk about "understanding Drupal's concepts and rules," this is what I mean. One reason Drupal is said to be unfriendly to beginners is that site building requires understanding what each Drupal Core feature does and how to configure it. Recognizing why that configuration matters is the first step toward using Drupal effectively.

I hope this article proves useful for those planning to try Drupal, and for those who've installed it but haven't yet taken the next step.

Overview of settings.

Here's a rundown of what went into building this site.

1.Article creation.

Here's what went into creating articles.

1. Creating articles and pages

    1.    Create by selecting a content type
       •    At Home > Administration > Content, select a content type and create an article or page.
       •    A content type is the template used when creating articles or pages.
    2.    Configuring the content type
       •    Settings are done at Home > Administration > Structure > Content types.
       •    The elements published on a page (title, body, images, etc.) are called fields, and those are configured in the same place.

2. Categorizing and listing pages

    1.    Configuring taxonomy
       •    At Home > Administration > Structure > Taxonomy, configure vocabularies and terms.
       •    Using taxonomy makes it possible to categorize pages and generate lists.
    2.    Adding taxonomy as a field
       •    At Home > Administration > Structure > Content types, add taxonomy as a field.
    3.    Creating and categorizing articles and pages
       •    After completing the required setup, create and categorize articles and pages at Home > Administration > Content.

3. Why the settings matter

The basics of writing articles in Drupal start at Home > Administration > Content — but creating articles and pages for a specific purpose requires the following setup:
       •    Content type configuration (creating article templates)
       •    Taxonomy configuration (categorizing and listing articles)

This makes it possible to move beyond the default article format and create articles tailored to your purpose. Taxonomy configuration is essential for categorizing and listing articles after they're created.

Related articles

#C12 Drupal Admin Console.

•    An overview of the Drupal admin menu.
•    A guide to understanding where to perform required settings.

#C13 Drupal > Content.

•    An overview of the Content menu.
•    Covers settings and basic usage for writing articles.

#C14 Drupal > Structure.

•    An overview of the Structure menu.
•    Explains the Structure menu layout with a focus on content type settings.

#C15 Content and Structure.

•    Explains configuration items concretely using published articles on this site as examples.

#C16 Basics of creating page.

•    A summary walkthrough of the steps for creating articles.

2.Creating a category list.

Here's what went into consolidating written articles and creating category lists.

As the number of articles grows, organizing them by category becomes necessary. Views is the Drupal feature used to do this efficiently.
•    Views overview:
    •    A highly flexible feature with extensive configurability.
    •    Grasping the full picture can be challenging, but sticking to simple settings makes it relatively easy to use.
•    Key steps:
    1.    Configure taxonomy in articles.
    2.    Use Views with taxonomy as the filtering condition to organize articles.

This makes it possible to organize articles into a well-structured category list page. Using Views requires taxonomy to be configured and assigned to articles beforehand. This article also covers those steps.

Related articles

#C18 Taxonomy-1

•    An article covering the basics of Drupal taxonomy.

#C19 Taxonomy-2

•    Uses this site's taxonomy configuration as a concrete example of taxonomy in practice.

#C20 Views-1 Page

•    Explains how to specify taxonomy as the grouping condition when using Views.
•    A detailed walkthrough of configuring taxonomy and using Views to create a category list page.

#C21 Views-2 Block

•    Introduces creating not just pages but also blocks using Views.
•    A concrete example of using taxonomy-configured keywords to create a related articles block and place it in each article.

3.Creating a navigation menu.

Here's what went into creating a menu to place the category list in.

1. Creating menus

    1.    Menu types
       •    The default navigation menu, side menu, and footer are usable as-is, but new menus can be created as needed.
    2.    Where to configure menus
       •    Navigation menus, side menus, and footers are created at Home > Administration > Content > Block.
    3.    Block configuration
       •    Blocks, like content, require field configuration for what to display.
       •    Field settings are done at Home > Administration > Structure > Block types.

2. Placing navigation menu links

    1.    Adding links to the menu
       •    Once articles and category lists are created, add links to the navigation menu. This makes the site easier to navigate.
    2.    Creating menus as blocks
       •    The menus described in earlier articles are created using content blocks.

3. Placing menus

    1.    Place via Block Layout
       •    Place the created navigation menus, side menus, and footers on the site using Drupal's Block Layout feature.
       •    Menu placement can be freely changed by article content or language.
    2.    Place the required menu items
       •    Place the required menu items on articles and standalone pages to make the overall site easier to use.

Related articles

#C13 Drupal > Content.

•    An overview of the Content menu.
•    Used not just for creating articles but also for creating blocks.
•    (Note) Creating menu items via Content > Block is documented as supplementary information.

#C22 Block Layout

•    An article covering Block Layout.
•    Explains how to configure placement for navigation menus, side menus, footers, and more.
•    Also covers how to freely customize breadcrumbs and related article blocks placed in articles according to content.

4.Creating a navigation menu.

Here's what went into deciding the site layout and placing each feature.

1.    Basic placement
    •    Site layout — navigation menus, side menus, footer — is configured via:
Home > Administration > Structure > Block Layout
2.    Conditional menu switching
    •    To dynamically change menus based on article content or category, the following settings are needed:
    •    Language
    •    Content type
    •    Taxonomy
    •    URL alias rules
3.    Preparing the layout for publication
    •    Add menu items corresponding to the created articles and category list pages, and configure the layout for site publication.
    •    Block Layout enables show/hide settings based on specified conditions. Combining language, taxonomy, and URL aliases makes it possible to build a flexible site structure.

Related articles

#C22 Block Layout

Covers navigation menu, side menu, footer, and other menu placement. Also covers breadcrumb and related articles block configuration tailored to article content.

5.Contact form.

Here's what went into creating and placing the contact form.

1. Basic setup

    1.    Use the default form
       •    Use the contact form provided as a Drupal default feature.
       •    Add supplementary text as needed.
    2.    Adding supplementary text
       •    Create a block at Home > Administration > Content > Block.
       •    Place it at Home > Administration > Structure > Block Layout.

2. Spam prevention

    1.    Configuring Google reCaptcha
       •    Documents how to identify and address configuration errors when they arise.
    2.    Strengthening security
       •    Configure Google reCaptcha to reduce the risk of spam and malicious submissions from bots.

Related articles

#C08 Contact Form and SES.

•    A configuration guide for the contact form, including Google reCaptcha setup.
•    Also covers troubleshooting email configuration errors and detailed AWS SES setup.
•    The article is long due to the volume of content, but it covers everything needed to set up a contact form in Drupal.

#C13 Drupal > Content.

•    An overview of the Content menu. Covers not just article creation but also menu items and block creation.

#C22 Block Layout

•    A detailed guide to Block Layout. Covers menu placement, breadcrumbs, and related article block configuration.

Conclude.

Purpose of this article

This article summarizes the features and settings needed to create articles in Drupal, organize them, build a site structure, and publish it. I'm still new to Drupal and don't have complete knowledge — but I'm building and publishing the site through trial and error.

Drupal's difficulty and potential

Drupal is often said to have a steep learning curve for beginners — and there's some truth to that. But I don't think it's accurate to say individuals simply can't use Drupal just because it requires more baseline configuration than WordPress. With Drupal, individuals can absolutely build flexible, sophisticated websites.

Challenges beginners face

One of the main reasons Drupal is considered difficult for beginners, I think, is that it's hard to find a way into each feature. For example:
    •    Writing an article, adding tags, and organizing articles based on those tags.
    •    Using tags to list articles and creating a custom-designed list page.

When the path to doing these things isn't clear, the following tends to happen:
    1.    No opportunity to actually engage with Drupal's features.
    2.    Without hands-on experience, tutorials remain incomprehensible.
    3.    Site building stalls.

What these articles aim for

To help address this, I want to write articles that give beginners a way in — a starting point. By creating guides that make it easier to understand which feature to use and how, I hope to help more people discover what Drupal is capable of.

Discovering CivicTheme

I first used Drupal in July 2024, when I set up a local environment on my MacBook and installed it. Looking for an approachable theme, I landed on CivicTheme — a theme developed by Salsa Digital in Australia, used in universities, educational institutions, and government agencies in Australia and the US.

CivicTheme features

Close in concept to a distribution
•    CivicTheme is technically a Drupal theme, but its design is close to a distribution. This significantly reduces the effort required to build a site.

The extended GovCMS
•    An extended government version called GovCMS also exists, and CivicTheme is built on very strict rules intended for use by public institutions and large enterprises.

Usage examples
•    NASA's official website is also built with CivicTheme, which gives a clear illustration of why Drupal is adopted for large, high-profile public websites.

Learning Drupal with CivicTheme

CivicTheme lets you build a site without deeply understanding Drupal's concepts and rules. Just installing the theme gives you a working site without manual Drupal feature configuration. In this sense, CivicTheme draws on the same idea as WordPress themes — accessible enough for beginners to use smoothly.

drupal.org >  Civic Theme

Using CivicTheme provides more opportunities to work with the Drupal admin console, which naturally builds familiarity — making it a practical learning tool for beginners as well.

Publishing on Xserver

I already have a WordPress site built and published, currently hosted on Xserver Business Standard. I installed Drupal in that environment and published a site using CivicTheme.

Xserver Business Standard: features and limitations

Cost-effectiveness
•    Reasonably priced and affordable.

Shared server limitations
1.    MariaDB version constraint
   •    The current MariaDB 10.5.x does not support Drupal 11.x installation.
2.    Node.js version constraint
   •    Node.js is limited to 17.x, which means CivicTheme's recommended subtheme features and the Figma-based design feedback feature (which requires Node.js 18.x) cannot be used.

These constraints make it difficult to use some of CivicTheme's features. I've put CivicTheme on hold for now while considering next steps.

Xserver Business

CivicTheme's appeal and challenges

CivicTheme is a theme I'd recommend to anyone thinking about trying Drupal. That said, all its documentation is in English, and installation involves the following technical hurdles:
•    Patches need to be applied.
•    Because it uses dev modules rather than stable releases, composer.json needs to be modified.

※ This reflects the status as of September 2024, with CivicTheme 1.8x. Version 1.9x was released in December 2024, but patches are still required.

For these reasons, the initial installation may feel daunting. But once it's installed and you start using it, the excellent scaling, powerful information organization, and other Drupal advantages come through clearly — it's a great theme. I'd like to use it again when the opportunity comes and build a site with it.

Moving to the Bootstrap5 theme

Given the infrastructure requirements for CivicTheme, this site adopted Bootstrap5 as an alternative. The theme works with minimal setup, but building a site with the design and functionality you want still requires various customizations.

I've been documenting the settings made with this theme, recording the process of building a Drupal site in article form. I hope this record serves as a useful reference for others who want to do the same.

A note for Drupal beginners

CivicTheme was what first got me into Drupal and showed me what it could do. Drawing on that experience, I want to write articles that give people a way in — whether they're interested in Drupal but don't know where to start, or have hit a wall partway through building a site.

Next article.
Short break

After working through Drupal's rules and concepts, I'm stepping back to think about what comes next. As a change of pace, this article compiles Drupal core and module update notes.

Last update
Contributor
S.Takeda
Article

Powered by Drupal 11.4.2 and Bootstrap 5.0.4

Published AWS Jamstack by Drupal