This page contains affiliate links, meaning we get a commission if you decide to make a purchase through our links, at no cost to you. Please read our disclosure for more info.

Don’t forget to subscribe to our YouTube channel to stay up-to-date.

In this video, you’ll learn how to build a Drupal site from start to finish. We start by setting up hosting for the site on Cloudways and pointing to a custom domain name.

Once hosting has been set up, we start building out the site. We create a custom content type, configure layout builder, add media functionality, create a bunch of custom view pages and much more.

I’ve broken out the video into sections below with timecodes and extra resources. For the content below to make any sense, you should follow along by watching the video.

Set up Cloudways Hosting

When it comes to hosting a Drupal site, many hosting options are available.

I recommend Cloudways for hosting because you pay for the actual server and not per site. You can host as many sites from your server as it can handle.

They manage the server for you and you get automated backups, staging environments and more.

If you want to learn more about Cloudways, read our “How to Host and Deploy Drupal Sites using Cloudways” tutorial.

Register New Account

Time: 00:02:24

1. To register a new account, go to Cloudways and click on “Start Free” in the toolbar.

Cloudways - Start Free

2. Fill out the registration form and click on “Start Free”.

Cloudways - Register

Create Server and Application

Time: 00:02:45

1. Click on “Add server” in the top right corner.

Cloudways - Add server

2. From “Select your Application” select “Custom app”.

Cloudways - select application

3. Give your server an application a name, then add it to a project.

Projects are an excellent way to organize your servers and applications.

4. Go ahead and select a hosting provider. For this video, I’ll use DigitalOcean, 2GB (standard).

5. Then click “Launch Now” in the bottom right.

Upgrade PHP

Currently PHP 7.4 is the default version when you provision a server. We’ll need to upgrade PHP to 8.0.

Go into the server, click on “Settings & Packages”, then click on Packages.

Select PHP 8.0 and click on Save.

Create Application User Account

Time: 00:06:51

Go into the application and add a username and password.

SSH into Server

Time: 00:07:24

Once an account is created open up your terminal and run the following command:

ssh username@IPADDRESS

Enable SSH Access

If you try and SSH into the server and getting the following error: “Shell access is disabled”.

Then make sure SSH access is enabled.

Go into the application, click on “Application Settings”, then enable “SSH Access”.

Set up Drupal on Hosting

Install Drupal using Composer

Time: 00:09:18

Run the following command to download Drupal.

composer create-project drupal/recommended-project ./

If you get an “is not empty” error then make sure you delete any files or folders in public_html.

To delete the current file just type in rm index.php.

Change WEBROOT Directory

Time: 00:10:19

Once Drupal has been downloaded you’ll need to change the webroot settings in Cloudways. Go into the application click on “Application Settings” then change the webroot settings. Add web and click on Save.

Configure Domain in Cloudways

Primary Domain

Time: 00:11:05

Go to “Domain Management” in your application then add your domain into “Primary domain” and click on “Save changes”.

Update DNS Settings

Go to where your DNS is hosted and add an A record.

Every DNS registrar is different please refer to the Cloudways documentation.

Install Drupal

Time: 00:13:31

Install Drupal using the Standard installation profile.

When you’re on the database configuration page.

Use the “MySQL Access” details in the application on Cloudways.

Create Post Content Type

Time: 00:14:54

Go to Structure, Content types and click on “Add content type” and add the following settings:

Settings Value
Name Post
Machine name Post

Used for blogging

Once the form has been filled out click on “Save and manage fields”.

Install Media and Media Library

Time: 00:16:34

Go to Extend and install Media and Media library module.

These modules will be used to create a media field and manage media assets.

Create Category Vocabulary

Time: 00:17:12

Go to Structure, Taxonomy and click on “Add vocabulary” and add the following settings:

Settings Value
Name Category
Machine name category

Then click Save.

Click on “Add term” and add the following terms:

  • Drupal
  • WordPress
  • JavaScript
  • React

Add Fields to Post Content Type

Time: 00:17:48

Edit the Post content type and add the following fields from the “Manage fields”.

  • Body (added by default)
  • Category (field_category): Reference the category vocabulary.
  • Featured asset (field_featured_asset): Media field and reference remote video and images.
  • Tags (field_tags): Re-use existing field and reference tags vocabulary.

Manage Form Display

Time: 00:20:03

Click on “Manage form display” and re-order fields as follows:

  • Title (Textfield)
  • Featured asset (Media library)
  • Body (Text area with a summary)
  • Category (Select list)
  • Tags (Autocomplete (tags style))

Configure Layout Builder

Time: 00:25:16

We’re going to use layout builder to customize the post details page.

Before we begin, install the “Layout Builder” module. This comes with Drupal; you won’t have to download anything. Go to Extend and install the module.

1. Go into the Post content type and click on “Manage display”.

2. Enable “Full content” and turn on layout builder for the view mode.

3. Add the following fields:

  • Featured asset
  • Category
  • Body
  • Tags

Create Featured Image Style

Time: 00:28:51

Go to Configuration, Image Styles and create a Featured image style.

Use “Scale and crop” effect, width: 1280, height: 720

Create Featured View Mode on Media

Time: 00:30:12

Go to Structure, Display modes, View modes and create a “Featured” view mode on Media.

Configure Featured View Mode on Remote Video, and Image Media Types

Go to Structure, “Media types” and configure the Featured view mode on remote video and image media types.

1. Edit a media type and click on “Manage display” and configure the view mode.

Make sure you configure the view mode on both remote video and image.

Create Test Content using Devel and Devel Generate

Time: 00:33:58

To generate test content download the Devel module:

composer require drupal/devel

Go to Extend and install “Devel generate”.

Then go to Configuration and from the Generate section, you can create test content.

Create Test Editor Account

Go to People and create a test editor account.

Create Latest (Homepage) View

Time: 00:37:34

Want to learn more about Views, then check out “Getting Started with Views in Drupal”.

Go to Structure, Views and click on “Add view”.

Add the following settings:

Settings Value
View name Latest
Machine name latest
Show Content
Of type Post
Create a page Checked

1. Configure display as Grid.

2. Display fields in view.

Display View as Homepage

We’ll use layout builder to control the homepage. Enable it for basic pages and configure it for “Full content”.

Make sure you check “Allow each content item to have its layout customized”.

Once page has been created, go to Configuration, “Basic site information” and change the “Default front page”.

NOTE: Your node ID will be different.

Display View as Block

Edit the view and click on add next to Page and click on Block.

Add Block to Homepage Basic Page

Go to the basic page that was created for the homepage, click on Layout and add the view block into the section.

Add Read More Link to View

Edit the block display and add the read more link at the bottom of the middle column.

Add Menu to View

Edit the view and add a menu to the main navigation.

Create Popular Categories Block View

Time: 00:50:14

Go to Structure, Views and click on “Add view”.

Add the following settings:

Settings Value
View name Popular categories
Machine name popular_categories
Show Taxonomy terms
Of type Category
Create a block Checked

Add Popular Categories Block to Sidebar

Go to Structure, Block layout and add the new block view into the sidebar region.

Customize Teaser View Mode on Post Content Type

Go to Structure, Content types and click on “Manage display” on the Post row.

Configure the following fields:

  • Featured asset
  • Category
  • Body
  • Links

Create Author Posts View

Time: 00:56:51

If you want to learn more about creating user pages with Views, check out “Add Custom Tab to User Profile Page with Views in Drupal” tutorial.

Edit the Latest view and click on add next to Page and click on Page (this will create another page).

Change the path to the view to /user/%user/latest-posts.

Add Contextual Filter

Click on “Advanced” in the view, then Add in “Contextual filters”.

Add the Authored by field select “Provide default value” and “User Id from route context” from the Type drop-down.

Add Menu Tab to Profile

Edit the Latest view and click on “No menu” and select “Menu tab” from type.

Configure User Permissions

Time: 01:03:56

Go to People, Roles and configure the Content editor role.

  • Use the Basic HTML text format
  • Use the Full HTML text format
  • Access media overview
  • Administer media
  • “All node create/edit/delete”
  • Administer menus and menu links
  • Access the taxonomy vocabulary overview page
  • “All term create/edit/delete”

For anonymous and authenticated roles:

Embed Videos and Images directly into Page

Time: 01:09:53

Go to Configuration, “Text formats and editors”, and edit the “Basic HTML” format.

1. Add icon onto toolbar.

2. Enable “Embed media” filter.

3. Configure the “Limit allowed HTML tags…”

4. Configure “Embed media” settings.

Set up Automatic Paths using Pathauto

Time: 01:11:55

Want to learn more about Pathauto, then check out “Automatically Generate URL Aliases using Pathauto in Drupal”.

Download the Pathauto by running composer:

composer require drupal/pathauto

Go to Extend and install the module.

Go to Configuration, “URL Aliases”, Patterns and click on “Add alias”. Create the pattern for post content type.


By the end of this tutorial you should have a working Drupal site. We covered how to set up Drupal hosting and important site-building topics such as creating content types, adding fields and creating view pages.


Source link