#C23 Drupal website creation

In the articles so far (#C12 to #C22), we have been explaining the uses and settings of the various functions required for building a website using Drupal. However, it can be difficult to understand how to build a website specifically just from the individual function explanations. So, we would like to summarise these contents and organise the overall picture.

Concept of Drupal.

In order to create articles and pages in Drupal and build and lay out the necessary website functions, such as navigation menus, side menus, footers, and list pages, you need to make basic settings for each of the functions provided in Drupal Core. Because these functions are interrelated, you will not be able to build your website in the way you want unless you set up multiple functions in combination.
The need to link multiple functions in this way is due to the concepts and rules of Drupal. By understanding these and grasping the uses and settings of each function, you will be able to build a website that meets your objectives.

Beginner's Guide.

The reason for writing this article is that, not just with Drupal, tutorials for programming-related topics tend to focus on explaining the functionality, and it can be difficult for first-time users to understand where to start. You can understand the functionality of a tutorial by reading it after you've actually used it, but if you read it before using it, you may not know what to do and give up on using it. Therefore, I think that if there were a tutorial that went from specific examples of use, it would be easier for first-time users to understand.

For example, if we explain the steps for creating articles and pages in Drupal and creating list pages by category, it would look something like this

  1. Content menu: You can create articles and pages.
  2. Taxonomy: You can create vocabularies and set terms.
  3. Content type settings: You can set taxonomies as fields.
  4. Views: You can list articles and pages by specifying conditions, and publish them on pages and blocks.

However, it may be difficult to understand the specific procedures just from the descriptions of each function.

An example of how to organise the functions and settings needed to create the target pages and build the site, and then build the website using Drupal

An example of how to build a specific site

For example, if you want to start a cooking blog, the process would be as follows

  1. Write recipe articles: Create various recipe articles, such as Chinese, Western, and Japanese.
  2. Create list pages by category: Create list pages that group articles by cooking category.
  3. Place them in the navigation menu: Place the list pages you have created in the navigation menu in a hierarchical structure.

If you were to do this from scratch in Drupal, the steps would be as follows.

  1. Create a content type called ‘recipe’.
  2. Create a vocabulary called ‘recipe’ in the taxonomy, and set terms such as ‘Chinese’, ‘Western’, and ‘Japanese’.
  3. Set the taxonomy as the content type field, and set the vocabulary to ‘recipe’.
  4. Write articles using the ‘recipe’ content type you created.
  5. Set up a view to create a list by category.
    • Display method: List titles, photos, article summaries, publication dates, and recipe terms in a single column in grid format.
    • Filtering: Use the ‘recipe’ vocabulary.
    • Display order: Newest first.
    •    Display 10 articles per page.
  6. Register the list page created in the view in the menu.
    •    If you are using SVG for the title, set the theme title.
  7. Check the display position in the block layout.

However, you don't often see explanations like this.

If you search on Google, you will find very detailed explanations of each function of Drupal, but I think it would be difficult for someone without knowledge of Drupal to imagine the process of creating the blog above, which involves assigning a taxonomy to a content type and creating a list page by filtering it in a view.

1. Background
Drupal provides very detailed explanations of each function (content types, taxonomies, views, etc.). This information is useful for experienced users, but beginners may find it difficult to understand.

2. Problem
As a concrete example, the following steps are involved in creating a blog site:
• Assigning a taxonomy to a content type
• Creating a list page by filtering with a view
It is thought that it would be difficult for beginners to intuitively understand this series of settings.

3. Solution
In order to bridge this gap, an approach that explains things in reverse order, starting from the ‘objective you want to achieve’ is effective.
By explaining the necessary functions and settings in stages based on specific goals, it becomes easier to understand even for those who are new to Drupal or individual users.

4. Purpose of this article
The articles on this site use this reverse lookup approach to guide Drupal beginners in achieving their specific construction goals.

Article purpose.

I've only just started using Drupal, so my knowledge is limited, and there may be parts of this article that are difficult to understand. Nevertheless, I would like to provide a guide that will help people who are using Drupal for the first time to actually build a site and get to the point of managing a site using Drupal, rather than just installing it.

Drupal is mainly used by companies, and the people who use it to build sites are mainly developers and vendors. As a result, I think that there is little need for basic tutorials aimed at individual users, and as a result, I think that there are almost no tutorials for beginners.

When I started using Drupal and looked for information, I noticed that there was a lot of information about the installation process, but very little about actually building and managing a site. I also feel that there are not many people who use Drupal to manage their own sites. This article is intended to present a solution to these issues.

Introduction.

This site was built by installing the Bootstrap 5 theme on Drupal and making use of the basic settings that are provided. It has a very simple structure, but even so, we made a lot of settings during the site building process. These settings form the basis of site building, and if you don't understand them, you won't be able to build a site.

What I often refer to as ‘understanding Drupal concepts and rules’ refers to this. One of the reasons why Drupal is not suitable for beginners is that you need to understand the uses and settings of the functions provided in Drupal Core when building a site. Understanding the necessity of these settings is the first step to mastering Drupal.

We hope that this article will be a useful reference for those who are thinking of using Drupal, or who have already installed it but have not yet started using it.

Overview of settings.

Let's write down what we are doing to build this site.

Article creation.

Let's write down what you did to create the article.

Creating articles and pages

  1. Home > Administration > Content > Select a content type and create an article or page
  2. Content types are templates for creating articles and pages
  3. Content type settings are made at Home > Administration > Structure > Content types
  4. The items that can be published on a page are fields, and these settings are made at Home > Administration > Structure > Content types
  5. To sort and list pages, set vocabulary > terms in Home > Administration > Structure > Taxonomy
  6. To include terms set in Taxonomy in content, set Taxonomy in the fields of content types in Home > Administration > Structure > Content types.
  7. If the content type has the necessary functions, create articles and pages in Home > Administration > Content and categorise them.

The basic process for writing articles in Drupal is to go to Home > Administration > Content, but you will also need to set the content type that corresponds to the template. This will allow you to create articles in the format you want, rather than the format that is set by default. You will also need to set up taxonomy so that you can sort and list articles after they have been created.

The article summarising this content is as follows.

#C12 Drupal Admin Console.

This is an overview of the Drupal admin menu. First, you will understand where to make the necessary settings.

#C13 Drupal > Content.

This is an overview of the content menu. This is the menu for writing articles, and it summarizes the things you need to understand in order to make your articles the way you want them.

#C14 Drupal > Structure.

This is an overview of the site construction menu. It explains the structure of the site construction menu, focusing on the settings for content types, which are the templates for writing articles, and helps you understand where to make the settings necessary for building a site with Drupal.

#C15 Content and Structure.

This explains the settings items with reference to the articles that have actually been created and published on this site.

#C16 Basics of creating page.

This is a summary of the explanations for creating articles that you will actually use.

Creating a category list.

Let's write down what we did to compile the articles we wrote and create a category list.

Create a page listing the pages you have created, and create a category list page

  1. The category list page is set up in Home > Administration > Site building > Views.
  2. Taxonomy also generates a page listing, so it can also be used as a category list
  3. Views can create pages and blocks
  4. Once you have articles, pages, list pages, etc., set up links in the navigation menu

As you create articles and the number of articles increases, you will need to sort and organise them into categories. Drupal has a view function that allows you to sort and organise articles in this way. It is a very flexible and freely configurable function, so the difficulty level increases if you try to understand the full picture, but if you set up a taxonomy for the articles and organise the articles using the taxonomy as a basis, you can build it simply by understanding the configuration items. In order to use views, you need to set up a taxonomy and assign the configured taxonomy to the articles, so we have included this in the article.

The article summarising the above content is as follows.

#C18 Taxonomy-1

This page provides an overview of the basics of Drupal taxonomy.

#C19 Taxonomy-2

This page provides an overview of the use and configuration of taxonomy on this site as an example of its practical use.

#C20 Views-1 Page

Since the criteria for organising articles in the page views is specified in the taxonomy, you should first understand the taxonomy and complete the settings, and then organise the articles in the views. This page summarises the settings for creating a category list page in the view settings.

#C21 Views-2 Block

views can be used to create blocks as well as pages. This page summarises an example of organising articles using related keywords set in the taxonomy, and creating a block of related articles to be placed on each article.

Creating a navigation menu.

Let's write down what we did to create the menu that displays the category list.

Creating menus

  1. The navigation menu, side menu and footer can be left as they are by default, but you can create them as necessary
  2. The navigation menu, side menu and footer can be created in Home > Administration > Content > Blocks
  3. Blocks, like content, require field settings to be displayed
  4. Block field settings are made in Home > Administration > Site Building > Block Types

Once you have finished creating the articles and category lists, you can add links to the navigation menu and structure the site so that you can navigate around it. The articles are arranged in reverse chronological order, and the menu is created using content blocks. The navigation menu, side menu, footer, etc. that you have created are arranged within the site using a block layout. You can change the arrangement of the menu as you like, depending on the content of the article or the language. This article is a collection of articles that arrange the menu items required for the site in articles and standalone pages.

#C13 Drupal > Content.

This is a general explanation of the content menu. This is the menu for writing articles, but you can also create blocks here. Although they are not grouped together with the articles, menu items are created in Content > Blocks.

#C22 Block Layout

This is a summary of the block layout settings, which allow you to freely set the placement of menus such as the navigation menu, side menu, and footer, as well as breadcrumbs and related articles to be placed in articles.

Creating a navigation menu.

Let's write down what we did to decide on the site layout and arrange the functions.

Layout

  1. The layout of the site, including the navigation menu, side menu and footer, is set in Home > Administration > Structure > Block layout
  2. To change the menu according to the content or category, you need to set rules for languages, content types, taxonomies and URL aliases

We will set up the layout to publish the site by placing menu items on pages such as the article and category list pages that have been created so far. We will set up the block layout function as a feature that brings together the site structure as a layout. The block layout can be set to show or hide specific menu blocks, etc., depending on the specified conditions, so we will construct the layout by combining languages, taxonomies and URL aliases.

#C22 Block Layout

This page explains how to set up block layouts, which allow you to freely set the placement of menus such as the navigation menu, side menu and footer, as well as breadcrumbs and related articles to be displayed with articles.

Contact form.

Let's write down what we did to create and place the contact form.

Contact form

  1. The contact form is provided by default, so we will use it as it is, but we will add a supplementary statement
  2. To add a supplementary statement, create it in Home > Administration > Content > Blocks, and then place it in Home > Administration > Structure > Block layout

Drupal has contact form functionality by default. This site is using it as it is. If you install a contact form, you will become a target for spam and virus transmission using bots, so we will set up reCaptcha provided by Google. We have summarised the causes and solutions for errors in contact form settings, reCaptcha settings, and setting errors.

I'm using the contact form by default, but I want to add some supplementary explanation text, so I've created a block and displayed it using block layout. I haven't put it together as an article, but I've put together the basic settings in the content and block layout articles.

#C08 Contact Form and SES.

This article explains how to set up a contact form, including Google reCaptcha settings. I made a mistake in the email settings and got an error, so I set up SES on AWS to fix it. The article is longer than I originally planned because I had to set up things that weren't in the original plan, but it does cover everything you need to know to set up a contact form in Drupal.

#C13 Drupal > Content.

This is a general explanation of the content menu. This is the menu for writing articles, but you can also create blocks here. Although they are not articles, menu items are created in ‘Content > Blocks’.

#C22 Block Layout

This is an overview of block layout settings, which allow you to freely set the placement of menus such as navigation menus, side menus, and footers, as well as breadcrumbs and related articles to be placed within articles.

Conclude.

This article summarises the functions and settings required to write articles in Drupal, organise and compile articles, and publish them as a website. I have only recently started using Drupal, and I don't yet have much knowledge of it.

Despite this, I have built and published a website using Drupal, albeit in a clumsy way. It is said that Drupal has a high barrier to entry for beginners, and that is certainly true, but it is not impossible for individuals who want to build a website using a CMS like WordPress to use Drupal.

The main reason why Drupal is said to have a high barrier to entry for beginners is that it can be difficult to find a way to get started with Drupal and try out its various functions. I think that this is because it is difficult to find a way to achieve this when you want to write an article, include a tag element on the article page, and create a page that lists the articles in the desired design, and because you cannot find a way to do this, you cannot use the various functions of Drupal, and even if you look at the tutorials without actually using them, you cannot understand them, and you cannot progress with the site construction.

I hope to write articles that help people find this opportunity.

The first time I used Drupal was in July 2024, when I installed Drupal locally on my MacBook and selected and used a theme that was easy to understand. The first theme I selected and used was called CivicTheme, which was developed by an Australian company called Salsa Digital and is actually used by educational institutions such as universities and government agencies in Australia and the United States.

CivicTheme is not so much a theme as it is a concept similar to a distribution in the Drupal software classification. As stated on the official website, there is also a theme called GovCMS that is designed for use by government agencies, and it is an example of Drupal use that actually supports the use of government agencies that is often cited as an example of Drupal use. CivicTheme is actually used by building it using the Drupal Admin console, so it is a Drupal theme is a Drupal theme, but the site has been designed so that even those with little IT literacy can build a website, and the concept is similar to that of a WordPress theme. After installing the theme, you can build a website without having to configure the Drupal functions that we have written about on this site.

This is a theme that is very strictly regulated, and if you look at the examples of use, you will see that the NASA website is created using this CivicTheme. This is a clear case that reflects the characteristics of Drupal, which is used on the websites of large companies and governments that are large in scale and have a public nature.

drupal.org >  Civic Theme

CivicTheme is a theme that allows you to build a website with Drupal without having to be aware of Drupal concepts and rules, so after installing the theme, you can build a website without referring to the tutorial too much, and you will have many opportunities to use it, which will help you to understand the Drupal admin functions. This will allow you to use Drupal to build a website, and you can actually think about publishing a website.

I have actually built and published a website using WordPress, and I use Xserver's Business Standard. I have an account with Xserver's Business Standard, and I have installed Drupal and CivicTheme and published them.

Xserver's Business Standard is very reasonably priced, but as it is a shared server, there are limits to the server settings. There are two limits to Xserver's Business Standard, one of which is that the DB provided is MariaDB 10.5xx, and the version of Node.js is up to 17.xx, so it is not possible to install cannot be installed, and the use of sub-themes recommended by CivicTheme and the use of Node.js 18.xx to register designs in Figma and provide feedback to Salsa Digital as stated in the terms of use, which cannot be done on the server, so we have temporarily suspended the use of CivicTheme.

Xserver Business

I installed Drupal and the first theme I came across was the CivicTheme, a theme that can be used without requiring much Drupal knowledge. I think that the fact that I was able to build a website using Drupal and understand Drupal's functions and usage by using it was a big thing.

This theme is recommended for those who are thinking of using Drupal in the future, but the instructions are all in English, and the initial installation is a little difficult for beginners, as you need to apply a patch and use Dev modules for the configuration elements instead of Stable, and you need to rewrite the ComposerJson settings. Once the installation is complete and you try using it, you will find that it is an excellent theme that allows you to experience the benefits of Drupal, such as scaling and the ability to organise vast amounts of information. I would like to use it again to build a website if I get the chance.

For this reason, I reconsidered the theme I was using and chose the Bootstrap 5 theme that I am using on this site. Because the Bootstrap 5 theme only requires a minimum of settings, you will need to make various settings in order to build a website in the form you want, including the design. I have summarised the settings I have made so far, and I have written an article about the process of building a website using Drupal.

Just as CivicTheme was the starting point for my first experience of Drupal, I hope that this article will provide a starting point for those who want to use Drupal but don't know where to start, or those who have given up on building a website.

Short break

I've been writing articles about rules and concepts related to Drupal functions, but I think I'll reset and think about the content of the next article. I'll also summarise the update status of Drupal itself and the update status of modules, as a change of pace.

Post
2024-11-29
Contributor
S.Takeda
Article
Related articles.

This is a related article on Drupal and web development. Please take a look if you like.

#C06 Installing Lightsail and Drupal.

The installation is easy to complete, as the virtual server called Lightsail and the optimised Drupal are installed at the same time.

#C26 Civic Theme

This is an article about Civic Theme, which sparked my interest in Drupal and led me to build and publish a website.

#C16 Basics of creating page.

I've been writing a series of articles on the basic concepts of Drupal that are necessary for creating pages, but since it's become a lot of articles and it's hard to understand, I'm going to organise them.

Side Bar 01

I migrated my lifestyle blog, which I created using Word Press, to Drupal, and I am currently updating it by adding articles in Drupal.

This is a blog written by a beginner who is learning Drupal.

This article will explain how to build a website using Drupal.

  All Article.

  Drupal Article.

  Web site Article.

  Mac Article.

  AWS Article.

This article is about second-hand clothes and fashion.

  All Article.

  Old-Clothes Article.

  Fashion Article.

  Watch Article.

  Photo Article.

  Recommended Shops.

Core Drupal 10.4.0

Theme Bootstrap5 4.0.3

  Drupal

  bootstrap5

  Bootstrap

  Font Awesome

  Amazon Web Service

  Amazon Lightsail

  Bitnami

  Google reCAPTCHA