In this step-by-step tutorial, we will show you how to build a website using the latest Drupal CMS.
Drupal is a free, powerful content management system to create custom websites, blogs, portals, and more.
It has all the features you need to build a fully functional website. It’s customizable, scalable, and free to use.
However, it’s not as easy as creating a website using WordPress (or using website builders). Basic knowledge of HTML or CSS would be helpful along the way.
1. Find Web Hosting to Host Your Drupal site
Before you can build a website, you need a place where it is located and reachable aka web hosting.
Already have a web hosting? Move to step 2.
In hosting, you need to consider four main factors:
- Uptime – Uptime percentage shows how much of the time your site will be up and running. We recommend that you choose something that meets or exceeds the industry standard of 99.9%.
- Page load speed – You should choose a host that loads faster than 850ms, which is the current average.
- Customer support – You’ll have to sort out issues with support at some point. Consequently, it makes sense to choose a host that has high-quality and responsive customer support.
- Price – Hosting services vary widely in price. Choose the one that you can afford and also that has satisfactory ratings on the first three factors.
Full disclosure: We earn a commission if you end up purchasing Bluehost through our referral links in this guide. This helps us to keep WebsiteSetup up and running and up-to-date. Thanks for your support.
You can get an affordable web hosting and domain from Bluehost, which we’ve been recommending.
They have the right system requirements for Drupal (see documentation), so you don’t need to worry about not being able to set up your site. They also have “one-click-install” for Drupal and Joomla, so you don’t need to mess with manual installation.
You can also explore similarly priced alternatives to Bluehost, such as HostGator or SiteGround.
If you are stuck signing up with Bluehost
Once you have the right hosting environment for your website, it’s time to get started.
2. Install Drupal
There are two ways to install and set up a Drupal website.
One option is to use a web hosting company such as Bluehost, which has “quick install”. Another option is to download and install Drupal manually. We’ll explain both:
2a. Installing Drupal Automatically on Bluehost.com (Quick Install)
Once you’ve signed up and grabbed a domain at Bluehost, log into your account and click “Advanced”.
Then scroll down and click “Portals/CMS”.
From there, just look for the Drupal icon.
Click “Install Now”.
From there, this is what you’ll be greeted with. You’ll notice that your Bluehost domain is already included in the default settings. It’s best to leave these default settings alone unless you know what you’re doing.
After filling up your Site name, click “Quick Install”.
This prompts you to fill in your Admin name, password, and Admin email.
After that’s done, just click “Install”.
When you do, you might be surprised to find this message. Don’t worry about it. It’s just the default index.html page.
Just check the box and click “Install” again.
Congratulations! You’ve just installed Drupal on your Bluehost domain!
2b. Installing Drupal Manually (Any Web Host)
If you are not using Bluehost or a web host that automatically installs Drupal, you can set up Drupal manually.
Once you have the web host, installing Drupal is quite straightforward. Simply go to the download section of the official website and hit the big blue button.
Once on your hard drive, unzip the file you just downloaded. Then, connect to your server via FTP (e.g. with FileZilla) and start uploading all those files to the directory that your domain is pointed at (usually the root directory).
This will take a bit. In the meanwhile, navigate to your host’s management panel for MySQL databases. Here, be sure to create a dedicated database for your Drupal installation. While the process will be slightly different depending on your provider, you should end up with the following:
- Database name
- Database user name
- That user’s password
- Database host address
Keep all of this information handy, you will need it soon.
Once the files have finished uploading, navigate to your site domain. Doing so will start the Drupal installation process.
The first step is to choose the language you want your site to operate in. Take your pick and click Save and continue.
After that, you need to determine your so-called installation profile. This determines whether some of your site features will be pre-configured or not. The choices here might differ depending on the distribution of Drupal you are using. Again, make your choice and move on.
For this tutorial, we go with the standard profile. If you are more experienced, you may also use a minimal option.
In the next step, the Drupal installation checks whether your environment is sufficient to run the software. Any problems will show up as warnings so you can address them. Continue when you are satisfied.
Now it’s time to put the database information to use that you collected earlier. Input the database name, user name, and password. If your MySQL host address is not localhost, you can change it under Advanced Options. In the same place, you can also assign a database prefix if needed (for example, when you have several sites in one database). Save and continue once you are done.
After that, the actual installation will begin.
The final step is to set up some basic information about your site.
Here’s how to fill it in.
- Site name – The name of your website. You can change this later on, so don’t get too hung up on getting it right.
- Site email address – The email address from which users will receive site notifications.
- Username – The user name of your sites’ main admin account.
- Password – Select a strong password to keep your account safe and don’t forget to confirm it once more.
- Email address – The email address associated with your main user. Drupal will automatically fill in the site email address, change as needed.
- Default country – The default country for your site.
- Default time zone – The time zone your site will use for displaying dates and similar information.
In the end, you need to decide whether your site should check for updates automatically and notify you if any are available. Once satisfied, save once more and you are done with the installation.
By the way, some hosting providers offer a one-click-installation option for Drupal. You can find an example in this article. Just scroll down a bit and you’ll see the instructions. Consequently, check with your host before going the manual route.
3. Get to Know the User Interface
After you have finished the installation process, you will automatically land on your newly created Drupal site.
When logged in, at the top of the screen, you see links to all parts of the back end where you can make changes to your site. We will use a bunch of them further below, but for understanding’s sake, let’s quickly highlight what each of them contains:
- Content – Here, you can create basic content like posts and pages. It is also where you take care of comments and find your site’s media library.
- Structure – This is where you manage all structural elements of your site including blocks, forms, content types, menus, and taxonomies.
- Appearance – It contains the settings for themes and other appearance-related options as well as site updates.
- Extend – Under this menu, you can install and uninstall Drupal modules.
- Configuration – Gives you access to your site settings.
- People – Contains options for users, roles and permission levels.
- Reports – Here, you find logs, update information, status reports, errors, search phrases and other information about your site.
- Help – The central hub for helpful information about basic site administration as well as any modules installed on your site.
By the way, under Shortcuts, you can define your own links to parts of the admin interface that you use often.
That way, you can improve your workflow and make it faster. All clear? Then let’s put this new knowledge to good use.
4. Change Your Drupal Site’s Theme
At the bottom, you see the front end of your site, meaning what your visitors will see. Right now, it’s still a bit bland, so the first thing you want to do is change the default theme that your site comes with to something else. You find an option for this under Appearance > Install new theme.
However, unlike other content management systems, it is not possible to find themes from inside the Drupal back end. For that, you need to go to the official Drupal theme directory, for which you also find a link at the top of the theme installation page.
At the time of this writing, you have a choice of more than 2,700 themes. The directory gives you several ways of filtering them so you can find what you are looking for.
However, you might still be overwhelmed by the sheer number. In that case, it’s good to start off with one of the many best-of lists found on the web.
When choosing a theme, make sure it fits your level of technical ability, allows you to create the design vision you have in mind, and is mobile responsive (a must these days). All themes in the directory also have their own page where you can read up on their details and check out a live demo.
When you have found the right one, installing it on your site is quite easy. Either download the theme from the directory (you find options at the bottom) or right-click the download link and copy its location.
After that, you can use either the file or the URL to upload the theme to your site.
After that, you still need to install it from the Appearance tab and activate it (called Set as default in Drupal).
When you have done so and you go back to your site (there is a button in the upper left corner), you can see the new theme in action.
5. Configure the Theme
Once you have installed and activated a new theme, you find it at the top of the list in the Appearance menu. Most themes come with configuration options that you can access by clicking the Settings link next to them. Alternatively, use the Settings tab on top and then pick the theme that you want to edit.
Both get you to this screen.
Here, you are able to make any changes that your theme offers and, depending on your theme, even preview it at the same time. This can be to change the color scheme, enable/disable user pictures, upload logos and favicons, set backgrounds, filters and a lot more. When you build a website with Drupal, definitely make sure to swing by here so you can take advantage of everything your theme has to offer.
6. Create a New Front Page
Now your site looks better but it is still pretty empty. Time to change that.
For starters, we want to create a front page so that visitors get to see something when they swing by. For that, go to Content > Add content > Basic page. It will take you to this screen:
Here, you are able to create content with a basic editor. At the top, you have the option to define a page title that will also appear on your site.
Below that, you find a link that says Edit summary. When you click it, it gives you the option to provide a summary for your post or page.
This is kind of like an excerpt that will appear in certain parts of your site.
Below that, there is the option to input and format the body text. For example, you can make the text bold and italic, add and remove links, create lists, define block quotes, insert images, and use the drop-down menu to define headings. Additional options such as inputting tables or horizontal dividers are available when you switch to Full HTML at the bottom.
If you have ever worked with a word processor or any other content management system, you should find your way around quickly and be able to put together the content you want. Once you are done, make sure that on the right side under URL Alias, you define a slug or URL ending for your page. This happens simply by inputting something like /front-page into the field.
After that, at the bottom, save the post and make sure that the box before Published is ticked.
So far so good.
In order to define your new page as the front page, you now have to go to Configuration > System > Basic site settings. Here, under the Default front page, input the same slug that you just defined for your new page.
Once you have done that and saved the configuration, your content should show up on the front page of your Drupal site.
7. Create Another Page and Add It to the Menu
As a next step, we now want to create an About page and add it as a menu item. The first few steps are the same as before. Create a basic page, populate it with content (if you want to know how to create a killer about page, read this post) and set a slug (e.g. /about).
However, this time, before publishing, make sure to click on Menu Settings and tick the box that says Provide a menu link.
Here’s how to fill in the settings that appear:
- Menu link title – This is the text of the link that users will see on the navigation menu. Make it something instantly recognizable. In this case About Me is a good choice.
- Description – An optional description that will appear when someone hovers their mouse over the menu link. It can say something like Find out more about what I have to offer.
- Parent item – If you have other menu items already, this setting allows you to create sub-items.
- Weight – With this setting, you can determine the order of your menu items. The higher the number the further in front they will appear.
Once you are satisfied with your settings, save the page (with Published active). Drupal should automatically take you back to your front end where you will see both your new page and the new menu item.
But wait, what if the menu is in the wrong order? No problem, simply hover over it and then click the pen icon that appears. This should give you the option to choose Edit menu.
When you do, you get to the screen below.
Here, you can simply drag and drop the menu items into the order that you want via the icon on the left. Save when you are done to translate the changes to your site. Last tip: you can also use the Add link button on top to manually add more pages to the navigation menu and you can also get to this menu via Structure > Menus.
8. Activate and Deactivate Default Modules
Alright, by now you should have a basic understanding of how to get around Drupal. If you have ever worked with a content management system or website builder before, it should be pretty familiar. However, the system can do a lot more and be extended for any type of purpose.
For that, you will most likely use modules. As mentioned, these are little programs that can add all sorts of features and functionality to your Drupal site. The core software comes with a bunch of them that you can find under Extend.
Not all of the modules will be installed and active by default. To change that, simply tick the box in front and then scroll down and hit Install. The CMS will then take care of the rest.
Conversely, any modules you no longer need, you can get rid of under the Uninstall tab.
It basically works the same way as installing them, only in reverse. Uncheck any undesired extensions, then scroll down to hit Uninstall.
9. Add Contributed Modules
Besides the default modules, there are also a lot of others available from other developers. Adding them to your site very much works like installing themes.
First, you need to find modules you like in the official directory. Once you have settled on one, either download it or copy its location. You can then add it to your site via Extend > Install new module.
There are a lot more modules to choose from than themes, 42,000+. If you are not sure which of them make sense to install, here are a few great options:
- Administration Menu – With the default toolbar, you’ll waste time loading a ton of pages just to get to a single admin function. To speed things up, this module gives you cool drop-down menus for the entire admin area. Simply turn off the existing toolbar, then activate the Administration Menu module.
- Token – Tokens are little sections of text placed via a placeholder system. By now, much of the functionality of the Token module has been written into Drupal core, but some modules still require it, like the Pathauto module.
- Chaos Tools Suite – AKA Ctools, allows you to create your own modules as well as forms, dialogue boxes, pluggable content types and more.
- Pathauto – Drupal’s built-in Path module lets you create URLs by hand. This is annoying to do manually for every post and Pathauto relieves you of that drudgery. You can assign custom replacement patterns and user account page paths so the URLs match your SEO and usability standards. Remember: Pathauto requires the Token and Ctools module.
For more useful Drupal modules, check this article.
10. Get Familiar With Blocks
Once you have the key contributed modules in place, you may want to add a sidebar with different features. Content like that comes in the form of blocks, which we already explained further up. You can place these in different areas as well as adjust their appearance, shape, size, position and which website pages they appear on.
Depending on your theme, modules and other components on your site, you will have access to different kinds of blocks. You can find all the options for managing them under Structure > Block Layout.
Blocks are saved by theme, so at the top, you find a list of the themes that are installed on your site. Below is a list of all the places you can add blocks to, called regions. If you are not sure where all of them are, click the Demonstrate block regions at the top. You will then see a view of your site with highlights and labels for where each block region is.
To add a one somewhere, simply scroll to the desired region and click Place block. This will give you a list of available options.
When you click Place block next to the one you want on your site, you then get to the configuration options.
These will be slightly different depending on what you are placing. In this case, you are able to add a title (and determine whether to show it) and configure the visibility of the block. For example, you can restrict it to show up only for certain content types, on particular pages or depending on the role of the active user. At the bottom, you are also able to change the region where you want it to appear (in case you picked the wrong one).
Once satisfied, Save block will add it to your site.
11. Manage Existing Blocks
Of course, you can also change anything you want about blocks that already show up on your site. Use the drop-down menu under Region to move them to another location.
On the right, a click on Configure lets you access the block settings from before in order to change them. If you click on the arrow icon instead, you get the option to disable or completely remove blocks.
When you have made changes, don’t forget to save them at the bottom of the screen.
By the way, you can also edit particular blocks from the front end of your site. Hover over any of them so that the pen icon appears, click it and then do a second click on Configure block.
This gets you to the same menu as before.
Here, you are able to change any settings, assign them to a new region and also remove blocks.
12. Create Custom Blocks
By the way, you can also create your own custom blocks. This can make sense if, for example, you have information that you want to display in different areas of your site. This could be the opening hours of your business or a particular piece of news you want visitors to see.
If you want that, go to Structure > Block layout > Custom block library (the tab at the top).
Here, hit Add custom block to get to this screen:
Enter a block description so that you and other administrators know what it is about. Then, enter the content you want the block to display in the editor below.
Once you are done, save your custom block. When you do, you can then assign it to different regions on your site in the same way as other blocks.
While the above is enough to give you a solid foundation for building a website with Drupal, keep in mind that it takes some patience to harness its powerfully. The learning process takes time and one of the best ways to learn is to play around with the tools and system and figure out how to implement things you want on your site.
However, if you want a more systematic approach to learning about Drupal, the following resources are really helpful.
- Drupal.org User Guide – Drupal.org
- Drupal.org Community Guide
- Drupal 8 Theming (video)
- Drupal 8 Beginner Tutorials by OSTraining (video)
- OSTraining (paid)
- Drupalize.me (paid)
Whatever you want to learn, the information is likely already out there. So, don’t hesitate to google it until you find it.
Have you tried to set up a website with Drupal? What roadblocks did you hit along the way? Do you have tips for additional learning resources? Let us know in the comments below!