Over the years I’ve written a fair bit about Drupal and its modules, but all the videos and tutorials focused on a single module or topic.
So I decided to try something different and record a video where I build a whole website in a single go. I recorded the video in one night and only stopped recording to get a drink.
In this video, which is over 3 hours long, I’ll teach you how to build a basic directory website. We’ll start right at the beginning by setting up a local Drupal site for this we’ll use DDEV-Local. Then we create content types, create a sub-theme, create a few custom views, a search page, media management functionality and so 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.
1. Set up Local Drupal Site
Time: 00:01:33 – 00:09:49
Download Drupal
We first need to download the Drupal codebase, run the following Composer command:
composer create-project drupal-composer/drupal-project:8.x-dev SITE_NAME --stability dev --no-interaction
Replace SITE_NAME
with the name of the folder.
Tip: If you want to speed up Composer then install the prestissimo plugin. This is a Composer plugin and has nothing to do with Drupal.
Configure DDEV-Local
We’ll use DDEV-Local to run our local Drupal 8 site. It requires Docker to run, and you can get the install instructions from their documentation site.
Once you’ve installed DDEV-Local go to your Drupal site within the terminal and run:
ddev config
You’ll be prompted with a few options, and it’ll configure the environment.
MacOS Users: If you’re using macOS make sure you set webcache_enabled
to true
in the ddev config.yml.
Go to your Drupal codebase and open .ddev/config.yml and change:
# From: webcache_enabled: false # To: webcache_enabled: true
Time: 00:06:58
Links:
- DDev-Local
- Composer
- Prestissimo Composer Plugin (speeds up Composer)
- Drupal project composer template
2. Create Content types and Taxonomy Vocabularies
Time: 00:09:50 – 00:29:08
Just like on any Drupal site we need to build the data model: content types and taxonomy vocabularies.
Content Types
Listing:
- Body
- Listing categories
- Logo
- Website
Blog:
- Body
- Comments
- Featured image
- Tags
- Blog categories
Taxonomy Vocabularies
- Listing categories
- Blog categories
Links:
3. Modify Content types
Time: 00:29:08 – 00:41:20
Once the content types have been created we’ll need to modify them. For this, we’ll use Display Suite.
To install Display Suite, run the following command:
composer require drupal/ds
If you’re keen to learn more about Display Suite check out our following tutorial series:
- How to Customize Content Pages
- How to Use Display Suite Fields
- How to Use Switch View Mode Sub-module
- Webinar: Customize Content Pages using Display Suite in Drupal 8
4. Create Bootstrap Sub-theme
Time: 00:41:22 – 01:01:40
We’ll use the Bootstrap theme on the site, and we’ll create a basic CDN sub-theme.
If you need step-by-step instructions on creating a Bootstrap theme, then read our “Getting Started with Bootstrap in Drupal 8“.
Install the theme using this command:
composer require drupal/bootstrap
Please note: The Bootstrap theme (as of this writing), only supports Bootstrap 3, not 4. If you need a Bootstrap 4 theme look at Barrio or Radix.
We have a tutorial on Barrio called “Getting Started with Bootstrap 4 using Barrio in Drupal 8“.
Bootstrap Layouts
The Bootstrap Layouts module ships a bunch of prebuilt layouts for Drupal 8. We’ll use these layouts in Display Suite.
composer require drupal/bootstrap_layouts
If you want to learn more about Bootstrap Layouts, then check out our tutorial “How to Implement Layouts using Bootstrap Layouts in Drupal 8“.
Links:
5. Block and Menu System
Time: 01:01:42 – 01:15:03
Once we’ve created our sub-theme, we’ll create four new footer regions.
Add the following into your theme’s .info.yml:
regions: footer_one: 'Footer one' footer_two: 'Footer two' footer_three: 'Footer three' footer_four: 'Footer four'
Add the following into page.html.twig (make sure you override the Twig file):
<div class="footer footer-grid {{ container }}"> <div class="row"> <div class="col-sm-3"> {{ page.footer_one }} </div> <div class="col-sm-3"> {{ page.footer_two }} </div> <div class="col-sm-3"> {{ page.footer_three }} </div> <div class="col-sm-3"> {{ page.footer_four }} </div> </div> </div>
6. Views
Time: 01:15:03 – 01:38:10
We need to create a few custom Views for our website. The first one, which lists blog content is fairly simple.
The second, which is “My listing” is complicated because you have to deal with contextual filters.
Read our tutorial “Add Custom Tab to User Profile Page with Views in Drupal 8” for a step-by-step tutorial on implementing this type of View.
7. Build Search page using Search API
Time: 01:38:10 – 02:10:32
We’ll use the Search API and Facets module to build our custom listing search page.
Download the required modules using the following command:
composer require drupal/search_api drupal/facets
Watch our webinar “How to Build Custom Search Pages in Drupal 8” which covers the core Search module and Search API.
Links:
8. Media Management
Time: 02:10:55 – 02:30:54
We now need to add media handling functionality to the directory site.
Run the following Composer command to download the required modules:
composer require drupal/entity_embed drupal/ctools drupal/entity_browser drupal/inline_entity_form
For a detailed tutorial on configuring all this stuff and more go to “Managing Media Assets using Core Media in Drupal 8“. And there’s a video: “Live Training: Managing Media Assets using Core Media in Drupal 8“.
9. Roles and Permissions
Time: 02:30:56 – 02:51:10
Now we need to create a role called “Contributor” and configure its permissions.
To allow users to publish/unpublish listings, you’ll need to use Override Node Options.
Install it using the command below:
composer require drupal/override_node_options
The “Contributor” role needs the following permissions:
- Use the Contributor HTML text format
- Image: Create new media
- Image: Delete own media
- Image: Edit own media
- Listing: Create new content
- Listing: Delete own content
- Listing: Edit own content
- View own unpublished content
- Override Listing published option
Create Registration Page
To create a registration page, we’ll use Multiple Registration.
Run this command to install it:
composer require drupal/multiple_registration
Read our “Create Individual Registration Forms using Multiple Registration in Drupal 8” for a detailed tutorial on the module.
Links:
- Override Node Options
- Multiple Registration
- MailHog (email logging)
10. Paragraphs
Time: 02:51:10 – 03:06:45
We’ll use the Paragraphs module to allow an editor to add a Bootstrap Jumbotron to a page.
Install the module by running:
composer require drupal/paragraphs
If you want to learn more about Paragraphs, then check out our free course, “Build Edge-to-edge Sites using Paragraphs in Drupal 8“.
Links:
11. Webform
Time: 03:06:47 – END
We’ll use the Webform module to build functionality which sends an email to the owner of the listing.
You can install Webform by running:
composer require drupal/webform
Below is the token which is used:
[webform_submission:submitted-to:author:mail]
Links:
Summary
I don’t expect many people to make it to the end of the video but if you did, congratulations! I hope you learnt something new by seeing how a Drupal site is built.
We can often learn a lot just by watching a developer build something.
3,5 hours – There were times I ate such tutorials before breakfast… Probably I am going to split it up into 3 chunks this time. Maybe I am getting old… or just lazy 😉 Really looking forward to it! 😉 😀
Thanks for the great tutorial and video! Time codes – this is very convenient for viewing.
No problems.
I hate skimming through videos that’s why time codes are important.
One again, I would like thank you for another great video. Yes it’s a bit long, but worth it.
I was wondering if you could do a few video on front end stuff. It confuses me with themes. Or could recommend someone like you doing training on front end stuff.
Thanks Carlo
Hi Carlo,
Don’t know of any courses for Drupal front-end, sorry.
Cheers,
Ivan
Hi Ivan, do you show the end result, the finished web directory website? I would be very interested in seeing what the finished site would look like. I have not seen the video, as of yet. However, I am sure it looks amazing.
Thanks, Jason
Hi jmorris1830,
Just scroll to the end of the video.
I don’t focus that much on making the site look good. I’m just using Bootstrap with a free bootswatch (https://bootswatch.com/) theme.
Cheers,
Ivan
Ivan, thanks for the tutorial.
I appreciate a lot your effort and, of course, I learnt a lot 🙂
Many thanks!