skip to Main Content
Illustration Of How Thinking Is Required To Go From Problem To Solution

How to create a website with Drupal

Updated on June 20th, 2018

Considering creating a website with Drupal?

It does have a steeper learning curve than WordPress and Joomla, but if you’re prepared for that, then this guide will show you exactly how to get started.

But be warned, this guide is long and detailed.

As you might already know, Drupal is known to be among the most popular content management systems in the world. I guess that’s why you are here?

Some reasons for its popularity are:

  • Compared to WordPress and Joomla, it’s the most customizable and secure CMS.
  • It comes with robust APIs
  • It comes with extensive access control

If you’re just making a basic blog or a portfolio, Drupal might be a bit too much. It’s more targeted towards those who are willing to take on that extra learning curve to get the added flexibility and security.

If you need a more in-depth explanation of when to choose Drupal, have a read in the Drupal section of the Content Management System article.

Now let’s get started with what this is all about, creating a Drupal site

STEP 1: Get a domain name

Before you can start building your website, you need a domain name.

A domain name is what uniquely identifies your site, like thewebsiteroad.com.

It basically becomes your brand on the internet, so I would recommend spending some time on finding a good one.

Here are some pointers to get you started

  • Keep it short and memorable – Keeping it short will reduce the risk of mistyping and misspelling. If you can find one that is catchy and easy to remember as well, then you have a winner!
  • Avoid hyphens – It doesn’t look good and will be harder to remember. It also takes away the uniqueness, so people that want to visit Your-Site.com ends up visiting YourSite.com, which is not your site…
  • Avoid numbers – Numbers are easily misunderstood. Especially if people hear your site name, they wouldn’t know if it’s numerical (2) or spelled out (Two)

I use NameCheap as my Domain Registrar – they have good customer support and are easy to use.

Here’s how to register a domain name.

STEP 2: Get website hosting

Once you’ve secured your domain name, you’ll need someone that will host your website.

A Web host is basically a company that allows you to store your website on their servers for a small fee. In return, they will display your website to the public when someone types in your domain name.

There are a few things you should keep in mind when selecting your host:

  • Uptime – When you’ve first spent time and money on creating your website, you’ll want a web host that actually keeps it online for people to see. Aim for a web host with uptime scores at 99,9% and above.
  • Loading speed – If your site spends ages on loading, people will just leave before they’ve seen the content.
  • Support – As always, having a friendly support team that is actually available when you need it is worth quite a bit.
  • Cost – Don’t get blinded by a small startup cost, some hosts bump up their prices quite significantly when it’s time for the renewal of your hosting plan.

I recommend using SiteGround – Good uptime, great speed, and really great support. The cost might be a bit higher than some other hosts, but in my opinion, it’s worth it.

Here’s how to setup hosting

STEP 3: Install Drupal

Once your domain and hosting are in place, it’s time for installing Drupal.

To make sure you know which installation options you have, I need to tell you about Drupal distributions.

What are Drupal distributions?

A Drupal distribution is a Drupal installation package that includes Drupal core, but also includes things like themes, modules and sample content.

A distribution is basically the ultimate starter pack, since it will give your site a good-looking design and some pre-populated example content from the very beginning. They are typically targeted towards specific purposes or use cases, such as blogging, social communities or e-commerce to mention a few.

If you manage to find a distribution that suits your needs, it can save you a lot of time.

Distributions are especially great if you want to:

  • Evaluate Drupal and just want to see examples of what Drupal can do
  • Learn Drupal by playing around with some predefined examples
  • Build a Drupal site quickly

Where can I find Drupal distributions?

Drupal distributions can be found in the Download & Extend list on Drupal.org.

If you end up buying a premium theme, these will usually also be provided as a distribution including the theme and sample content.

Morethanthemes and ThemeForest are two good sources of premium themes that might be worth checking out.

Why did I tell you all this?

The reason is that you cannot install a Drupal distribution after running the default Drupal installation, you have to choose one or the other.

Throughout this guide, I will continue as if I installed the default Drupal.

If you decide to go for a Drupal distribution, unless specified otherwise, it’s usually installed the same way as a manual installation of default Drupal.

One-click installation

If you decide to go for the default Drupal, most well-established hosting companies provide one-click installations.

So, if you signed up with SiteGround or any similar company, there should either be a one-click installation or a Softaculous button in your control panel.

For SiteGround, the installation process is as follows:

  1. Log into your hosting account
  2. Go to cPanel
SiteGround Go To CPanel Button

3. Click the Softaculous button under Autoinstallers

SiteGround CPanel Softaculous Button

4. Scroll down and find Drupal in the left sidebar, click the Install tab

Install Drupal With SiteGround Softaculous

5. Fill in Site Name, Username, Password, and Click Install.

That’s it, the installation is now complete.

STEP 4: Configure your Drupal site

If you now visit YourDomain.com you’ll see that your site is up and running.

Now it’s time for some minor configurations that I recommend you do before you start adding content.

Login to Drupal admin panel

You can log in to the admin panel by going to YourDomain/user/login and typing in your username and password.

Once you’re logged in, you should see this admin bar on the top of your page.

Drupal Admin Bar

If it looks confusing, don’t worry, I’ll guide you through it.

Setup Drupal to use SSL and HTTPS

Setting up your website with an SSL-certificate is something I strongly recommend.

It might seem a bit advanced, but it will save you a lot of trouble in the long run. All you have to do is to follow every single step.

What is SSL?

I’ll try to give a short explanation of SSL here, but if you want more information you can read my post about SSL-certificates.

SSL stands for Secure Sockets Layer and is an encryption protocol that ensures secure communication between a web server (your website) and a user’s web browser (e.g. Chrome) by encrypting the information sent.

That could be credit card details for an e-commerce website, or simply the password you use to login to your WordPress admin panel. Regardless of what it is, you don’t want hackers to get ahold of it, and that’s what an SSL-certificate helps you with.

HTTPS stands for Hypertext Transport Protocol Secure, and you’ve probably seen it many URL’s already, just look at the website you’re on now.

TheWebsiteRoad.com With Https And Secure Mark

The link between HTTPS and SSL is simply that https replaces http in the URL when a site is secured by an SSL-certificate.

Phew, that’s some heavy stuff!

How do I add an SSL-certificate to my site?

It depends on your host. If you’ve signed up with SiteGround, a free SSL-certificate can easily be installed on your domain.

If you did not sign up with SiteGround, try asking your host if they support the free SSL-certificate Let’s Encrypt, and how to set it up for your site.

Important! If you want to change from http to https for an existing site that has existed for a while, you might be looking at a larger clean-up job. Check out the checklist written in this blog post by Moz for some tips on moving from http to https.

Adding permanent redirect

Once SSL-certificate is in place, the next step is to ensure that everyone visiting your site ends up at the https URL you prefer (e.g. https://yourwebsite.com)

That is done by editing the .htaccess file.

1. Log in to your SiteGround user area and navigate to cPanel.

2. Scroll down until you come to the Files section and click File Manager.

File Manager In SiteGround CPanel

3. When you get the “File Manager Directory Selection” make sure that Web Root and Show Hidden Files are checked and click Go. That should open a file manager.

SiteGround File Manager Directory Selection

4. Scroll down until you find a file called .htaccess, mark it, and click edit and edit.

How To Edit The Htaccess File

www or non-www

When editing the .htaccess file you have two options when you decide on your website URL. You can choose to have a URL with or without www, just like these two examples:

https://yourwebsite.com

https://www.yourwebsite.com

Personally, I always choose the ones without www., simply because I think it looks better. But it all comes down to personal preference.

Either way, scroll down until you find

<IfModule mod_rewrite.c>
 RewriteEngine on

If you want https://yourwebsite.com you should add:

RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} ^www\. [NC]
RewriteRule ^(.*)$ https://yourwebsite.com%{REQUEST_URI} [L,R=301]

If you want https://www.yourwebsite.com you should add:

RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ https://www.yourwebsite.com%{REQUEST_URI} [L,R=301]

Remember to replace yourwebsite.com with the website URL you prefer.

Once you’ve made your choice and saved the .htaccess file, you’re done with establishing the permanent redirect.

If you want to check if it got set up correctly, just go to this redirect mapper and input your URL.

The goal is to have all the different URL versions ending up at the same URL. In my case that is https://thewebsiteroad.com

Overview Of Redirects For Thewebsiteroad.com

STEP 5: Customize your website

With the configurations out of the way, it’s time to customize the look and feel of your site. That’s when you need a theme.

Themes

A theme defines how content is presented on your website. Adding a new theme will typically affect things like content block layout, default colors, font, and settings.

Note that themes do not contain content. If you want a site with sample content, you will have to check out Drupal distributions.

How to install a theme?

Installing a new theme is actually quite easy, just go to Appearance and click Install new theme.

How To Install A Theme In Drupal

You should then have two options, Install from URL or Upload file.

If you manage to find a theme in the official Drupal theme library, you can use the Install from URL. (I’ll show it in a bit)

Else, you can just download the theme to your computer and upload it by clicking Choose file and Install.

When I search for themes at drupal.org I make sure to only search for themes that are “Actively maintained” and are compatible with my version of Drupal.

Search For Actively Maintained And Compatible Drupal Themes

For this guide, I’ve chosen the Showcase Lite theme, and I will be populating that with content throughout this guide.

Scroll down to the bottom of the theme page and find the downloadable zip-file, right-click and chose “Copy link address”.

Copy Link Address For A Drupal Theme

Go back to your Drupal site and past it into the Install from URL field, click Install.

On your Appearance site, you should now see the new theme, click Install and set as default.

Once that’s done your site will probably look something like this.

Frontpage With Drupal Showcase Lite Theme Installed

Not very impressive, right?

You will fix that in a bit, but before you get started, let’s install a module first.

Modules

Modules are basically Drupal add-ons, that extend Drupal’s features and functionality.

So, if you come across a problem that can’t be solved with the Drupal core functionality, then there is probably a Module out there that can solve your problem.

There’s plenty of modules to choose from in the Drupal module library, but make sure you only download the ones that are compatible with your Drupal version.

Installing a Module is very similar to installing a theme, you go to the Extend tab and click “Install new module”.

How To Install New Drupal Module

As an example, let’s download the Social Media Links Block and Field Module. This module will let you add social media links to your site.

Scroll down to the bottom of the theme page and find the downloadable zip-file, right-click and chose “Copy link address”.

Go back to your Drupal site and past it into the Install from URL field, click Install.

Once the installation is complete, go back to the Extend Tab, scroll down until you find the two Social Media modules, check both and click Install.

Installing Drupal Social Media Links Block And Field Module

It’s about time you start adding some content.

Blocks

Let’s start with blocks.

Blocks are basically groups of content, and they play a very important role in how your content is displayed on your website.

Where you can place these blocks of content is controlled by the content regions, and these will vary from theme to theme.

In order to get an idea of the block regions available for your theme, go to Structure->Block Layout and click the button called “Demonstrate block regions”.

This should give you an overview of the different block regions for your theme.

Example Of Drupal Block Layout View

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

If you would like to see a short video on blocks, Level Up has created a pretty good block introduction.

Configuring existing blocks

If you go to Structure->Block Layout, you should have a list of all the different block regions and the blocks that are currently placed within them.

If you scroll down you will eventually see the region called Sidebar Second which currently contains three blocks, Search, User account menu, and Tools.

How To Place A Block In Drupal

If you would like to remove the User account menu and the Tools module, that could easily be done by clicking the down-arrow on the Configure button to the right and then clicking Remove.

Button For Drupal Block Configuration

Or, if you would like to remove the SEARCH label on top of the search bar (or any other module) on your website, you just click Configure and uncheck the Display title field.

Field For Drupal Block Title Input

Once you’re done with your changes, remember to scroll down to the bottom of the page and click Save blocks.

Adding your first blocks

It’s about time you added your first block, and why not start with the social media links?

That’s done by finding the block region you would like to allocate it to, let’s pick Sidebar Second, and click Place block.

That should give you a list of available blocks, and if you install the social link plugin mentioned further up, you will eventually find the Social Media Links Block, click Place block.

Button For Placing A Block In Drupal

If you would like to display the block name on the page, change the Title to your preferences and keep the Display Title checked.

Option To Display Block Title In Drupal

Then you just fill in the social media sites that are applicable to you or your company and click Save block.

Example Of A Connect With Us Drupal Block

You’ve just added your first block, good job!

Let’s increase the difficulty a little bit.

Creating and adding a custom block

What do you do if the basic custom block doesn’t offer what you need? You create your own custom block type.

Maybe you want to create a type for page banners that only included an image?

Go to Structure-> Block Layout, select the Custom block library tab, click Block types, and Add custom block type.

How To Add A Custom Block In Drupal

Give the block a good description, so that you are able to find it in the block selection list. Add an image by clicking the image button and selecting an image from your hard drive, add some text and click Save.

Example Of A Drupal Sidebar Block With Image

Go back to the Block layout tab->find Sidebar Second->click Place block-> find your newly added block->click Place block->Make any specific configurations->click Save block.

How To Place Sidebar Block With Image In Drupal

Check your site to see how it looks!

Creating a custom block type

What do you do if the basic custom block doesn’t offer what you need? You create your own custom block type.

Maybe you want to create a type for page banners that only included an image?

Go to Structure-> Block Layout, select the Custom block library tab, click Block types, and Add custom block type.

How To Add Custom Block Type In Drupal

Add a describing label for the block type you’re creating and click Save.

Once the block is created, click Manage fields.

Manage Fields Button For A Custom Drupal Block

In the Manage fields tab, you will have the possibility to add the different content fields you might want for your block type. You can add as many fields as you want.

By default, there is only a Body field there, which is the same field you used to add image and text in the “sidebar block with image” example.

For a banner image block, you would want to delete the body field and add an image field.

Deleting a field is done by clicking the down-arrow on the Edit button and clicking Delete.

To add a new field, click Add field, select Image, give the field a describing name and click Save and continue.

How To Add A New Drupal Image Field For A Custom Block

You’ll then have the chance to set a default image, but that’s optional.

Click Save field settings and Save settings.

Next, select the Manage display tab.

If you don’t want the Background image label to show, select “Hidden“ in the label column, click Save.

How To Manage The Display Of A Custom Block In Drupal

Once that’s done you can move back to Structure-> Block Layout, select the Custom block library tab and click Add custom block, just like you did in the Sidebar block with image example.

But instead of selecting the Basic block, you select your newly created custom block type.

You give it a good description, upload an image, and click Save.

Then, same as for the previous example, you find the block region you want to add it to, click Place block, find the newly created block and click Place block.

If you have created a Banner block, let’s place it in the Banner block region.

Configuring a block

Only want the banner to appear on the front page?

That’s done by clicking the Configure button.

The following window will give you a set of options specifically for this block, such as:

  • Choosing whether or not to see the block title by checking Display title
  • Make the block only appear for certain content types, e.g. Articles.
  • Make the block appear on certain pages, e.g. <front>
  • Make the block appear only for certain users, e.g. administrator
Only Show Drupal Block For The Listed Pages

Once you’re done configuring the block, check out how it looks on your website.

If the blocks didn’t look like you want, you could also configure them directly from the site by clicking the pencil in the upper right corner of the block.

Configuring A Drupal Block Directly From The Website

Create a new page

After learning a lot about blocks and how we can use them to assign content to different areas of a page, it’s about time you learn how to create a new page.

Let’s create an About us page

  1. Go to Content->click Add content -> click Basic page
  2. Fill in Title, write something about yourself in the body field, and maybe even add a photo.
  3. Tick of Provide a menu link, and define what the menu item should be called
  4. Give the page an easily understandable URL alias
  5. Click Save
Example Of A About Us Page In Drupal

When you clicked Add content you might have noticed that you had two options, Basic page, and Article.

Create a new Article

Articles will by default provide you with a few additional features compared to a Basic page, such as the possibility to turn on/off the comment section. So, if you’re making a blog, an article could be used as a blog post.

You can create an article by

  1. Going to Content->click Add content -> click Article
  2. Fill in Title, write some text, and maybe add a photo.
  3. Give the page an easily understandable URL alias
  4. Click Save
Example Of A New Drupal Article

Note that in the lower right corner of the above image, the Promoted to front page box is checked. So, if you go to your homepage you will actually see that a small part of your article is showing on your front page.

Try to add another Article and see what happens.

To understand why this happens, you have to understand another important Drupal feature, Views

Views

Views is a feature that allows you to display lists of content. It could be a list of images, articles, or something else.

These lists/views can be presented as a page with its own URL and menu link, or it could be presented within a block, it’s up to you.

You can apply filters, limit the number of items to be displayed and configure how they should be displayed. In other words, you can configure a view to show exactly the content that you want to show.

If you added two articles in the step above, your main page will probably look something like the image below, and that’s because there is a default front page view in place.

Frontpage With Drupal Showcase Lite Theme Installed And Content Added

The default front page view has been defined so that it will show Published content that is Promoted to front page. It will show a maximum of 10 items, in an unformatted list, and the content will be displayed as teasers (short version of the content).

This particular view can be seen by going to Structure->Views->Clicking Edit on the Frontpage View

Try to adjust the settings and see how it affects the display on your homepage.

How To Adjust Drupal View Settings

If you want to create your own view, just

  • click Add view in Structure->Views.
  • give the view a describing name and select what you want the view to show.
  • decide on whether the view should be a page or a block, or both.
  • Adjust the additional settings
  • Click Save and edit
How To Create A New Drupal View

That’s it, you have just made your first view!

Drupal configurations

So far, you’ve learned a lot about the Drupal features that let you create a good-looking website. But before this guide is finished, you should also be aware of some of the configuration options you have.

Navigate to the Configuration tab and look for the following options:

Configuration Tab In The Drupal Admin Bar

Basic site settings – this is where you edit the site name, default front page, and which site a visitor should be redirected to if a page is not found.

Text formats and editors – This is where you configure what options that should be available in the Drupal text editor. By default, the number of text editor options can seem quite limited, so I recommend that you drop by here to add the options you need.

Just drag them from the Available buttons section to the Active toolbar section.

How To Edit The Drupal Text Editor Toolbar

Maintenance mode – This option is really handy when you have just started developing your site and you don’t want the visitors to see it before it’s done. All you have to do is to tick of the put site into maintenance mode and decide on what message the users should see.

You as administrator will still see the full site when you are logged in, but any user that is not logged in will see a maintenance message.

Example Of Drupal Site In Maintenance Mode

That was the end of this guide, hope you liked it. If you did, feel free to share it.

If you have any additional questions, you can leave a comment below or send me a message.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top
×Close search
Search