Tutorial author: Jim Benstead
University of Edinburgh
James.Benstead@ed.ac.uk | @ScottishLit
25 March 2018
Released under a CC BY 4.0 license
Download a PDF version of this tutorial here.
1. Introduction to Drupal and to this tutorial
Drupal (drupal.org) is a content management system: a web application framework which allows you publish content to the web and customise your webpages with a great deal of flexibility. It is modular: you can attach modules with the specific function you need, and omit others you don’t need. It separates design and concept, so you can easily change the look and layout of your content. It is also open source, and therefore free. Other good reasons for choosing it include the fact that it is secure, and that you do not have to reinvent the wheel: if there is something you want your Drupal site to do, the chances are good that someone else has already designed a module to do it.
This tutorial will show you how to install Drupal 7 (at the time of writing, Drupal 7 is more popular than Drupal 8). You will learn how to customise your Drupal site so it can function as a simple blog, and give you enough pointers to the next steps you might want to follow. More broadly, it aims to demystify some of the jargon around Drupal and get you to the point of being able to speak tourist-level Drupalese with your IT department.
This tutorial also assumes that you are using a Mac computer. If you are a Windows user, you will still be able to do most of the steps, but for installation and setup you may find it helpful to consult this page from the Drupal website.
2. Brief historical background
To understand why Drupal works the way it does, here is a (brief and selective) history:
- Very early 1990s: Tim Berners-Lee has a web server running at CERN. It’s only HTML, so websites are one-way, like research libraries.
- Mid 1990s: Berners-Lee’s colleague Hakon Wium Lie developes CSS, which makes it easier to design websites.
- Late-1990s: Rasmus Lerdorf’s PHP starts to get popular so websites can be interactive to the point where they look a lot like regular applications.
- In 2000 Dries Buytaert, then an undergraduate at the University of Antwerp, writes a web forum application.
- In 2001 Buytaert makes this application open source, and it starts to evolve.
- In 2003, Drupal is used to build the website of Democratic US Presidential candidate Howard Dean.
- 2006 sees the first “modern” Drupal release, 4.7.
- In 2008 the Obama Administration adopts Drupal for the official White House website.
- By 2018, Drupal is used by millions of websites worldwide, including thisamericanlife.org, Major League Soccer, and many universities, including the University of Edinburgh. There are also some interesting uses of it within the digital humanities, for example Islandora.
3. Downloading and installing a webserver
Before installing Drupal, you will need to download and install a webserver. If you do not have a webserver installed already, Mac users can download MAMP from http://www.mamp.info/en/index.html, and Windows users can download WAMP from http://www.wampserver.com/en/. Once the webserver is installed, start Apache and MySQL. On MAMP, this is done by pressing start as shown in the screenshot below (on other webservers you may need to start Apache and MySQL separately).
4. Downloading Drupal 7
Once your web server is running, open a web browser and go to drupal.org. You are looking for the link to download a zipped version 7.xx of Drupal. At the time of writing, this can be done by following the “Download and Extend” link at the top left of the Drupal website, then clicking “Drupal’s Project Page” and scrolling down to the blue button with “Drupal core 7.57” and clicking that. This takes you to https://www.drupal.org/project/drupal/releases/7.57 where you will find a green button marked “Download zip”. The Drupal website may look different at the time you are visiting, but you should be able to find older versions of Drupal to download with relative ease.
Once you have found a link to download the zip file, right-click on it, and select “Save Link As”. Save it to some easy-to-find location such as the Desktop.
Once the zip file has finished downloading, double-click it to unzip it.
Now go to the unzipped “Drupal” folder and move it to the “htdocs” folder in your web server (which will be something like Applications/MAMP/htdocs). Change the name of the folder you have just moved to “drupal”.
5. Creating a MySQL database
You now need to create a database which will store all of your website’s content. Open your web browser and in the address bar type “http://localhost:8888/phpmyadmin”, then click the “Databases” tab.
Under “Create database”, type “drupal” and then “Create”.
You should now see your database listed in the left column of phpMyAdmin.
6. Running the Drupal Installer
In another tab in your browser, go to “http://localhost:8888/drupal/install.php”. On the “Select an installation profile”, click “Save and Continue” for the first couple of pages.
Enter “drupal” for the name of your database. The username is “root”, but keep the password blank. (If you get an error message about a failure to connect to the database server, you can try entering the password “root”.)
Click “Save and Continue”. You will need to wait for the installer to get to 100%.
In the “Configure site” page that will then come up, fill in the “Site name” with anything you like. Under “Site e-mail address” put a working email address: this will be used to send you, for example, account information and password reminders. In the “Site Maintenance Account” section, enter “root” as the Username, your own email address, and “root” as the password. This creates the “superuser” account for the site.
Now scroll down, and click “Save and Continue”.
7. Adding content to your new website
You should now see a page congratulating you for having successfully installed Drupal. Your website is now ready to have some content added.
In the “Drupal installation complete” page, click “Visit your new site”, and follow these steps:
a. Click “Add new content”.
b. Click “Article”.
c. Give your article a “Title” and a “Body”.
d. Scroll down and click “Save”.
e. The page will tell you that your article has been created. Click the home icon (shaped like a house) at the top left of the page.
You’ll see that your article is now displayed on your front page.
To add another articles, repeat steps a-e. All of the new articles will be displayed on your front page.
8. Installing and enabling a theme
Now we’ll go through the steps for adding a theme. Go back to your unzipped “drupal” folder, and find the “themes” folder. Inside that folder you’ll find some folders with the names of themes. Choose one, for example “responsive”.
Move the “responsive” folder to the “sites/all/themes” folder that is in your “drupal” folder, which is itself in your MAMP “htdocs” folder.
Now you need to enable the “responsive” theme you’ve just put into your Drupal site. Go back to the browser window where you were just adding content to your Drupal site. Click “Appearance” (fourth from left in the menu at top of the screen) and scroll down until you find “Premium Responsive”. Click “Enable and set default”, and close the overlay.
You should get a message telling you that “Premium Responsive” is now your site’s default theme. Close the overlay by clicking the cross towards the right of the page, and you should find that your page now looks different.
9. Creating a Content Type
Drupal allows you to create and customise new content types. To do this, click “Structure” in the top menu.
Now click “Content types” in the overlay. 
Click “Add Content Type”.
Fill in the “Name” as “Blog Post”.
Scroll down and click “Save Content Type”.
You’ll get a confirmation that the content type has been created. Close the overlay.
You can now add blog posts to your site. Notice that there are two links to “Add content” on your site’s homepage: click one of them.
You can now add content in the form of blog posts in the same way you did in step 7 above (only now you are adding blog posts rather than articles). Click “Blog post”.
Give your new blog post a Title and enter some text in the Body field. Then click “Save”.
You’ll get a confirmation message that your blog post has been created.
Press the home button at top left to see the article and blog post on the front page of your site.
10. Installing and enabling the Views module
Now you have some content on your site, we will learn how to enable the Views module, which allows you to create custom lists (or “views”) of content. To enable it, go to your unzipped “drupal” folder, and find the “views” folder.
(If you cannot find the “views” folder in your “drupal” folder, you may need to download it separately: at the time of writing this could be done at https://www.drupal.org/project/views. Scroll down to the green block of text, right click on the “zip” link for the 7.xx.xx version and select “Download linked file as”, save the file to an easy-to-find location such as the Desktop then double-click to unzip it.)
Move the “views” folder to the “sites/all/modules” folder in your “Drupal” folder.
Now, just as we did for the Responsive theme, we need to enable the module after moving it into the Drupal folder. Back in your browser, click “Modules” in the menu at the top of the page. Scroll down to the bottom of the page, where you’ll see the rows for “Views” and “Views UI”. You’ll see that “Ctools” is missing, so before we go any further we’ll need to install that.
Repeat what you did with the “views” folder, but this time move the “ctools” folder: go to your unzipped “Drupal” folder, find the “ctools” folder …
… and move it to the “sites/all/modules” folder in your “Drupal” folder.
(Again, if you cannot find the “ctools” folder, you can download it from https://www.drupal.org/project/ctools. Once again, scroll down to the green block of text, right click on the “zip” link for the 7.xx.xx version, and select “Download linked file as”. Save the file to an easy-to-find location such as the Desktop then double-click to unzip it. Then move the unzipped version to your “sites/all/modules” folder.)
Now go back to your browser, refresh the page, and enable Views and Views UI: tick the “Views” and “Views UI” boxes and click “Save configuration”.
Click “Continue” …
… and you should get a confirmation message.
Close the overlay.
11. Building a view
We’re now going to build a view: a way of displaying your content. Start by clicking “Structure” in the top menu (see screenshot immediately above) then “Views” in the overlay.
Click “Add new view”.
Fill in “View Name” as “Blog Posts”. Tick “Create a menu link” and under “Menu” select “Navigation” in the drop-down. Finally, click “Continue & Edit”.
Click “Save” to save the new view.
You should see a confirmation on the next screen. Click “Save” to save your changes.
You’ll now set up filter criteria to control what is shown in the view you’ve just created. Click “Add” next to “Filter criteria” in order to add a new filter.
In the overlay, scroll down to “Content: Type”, and tick it, and click “Apply (all displays)”.
Now you can specify how you want your filter to work. Tick “Blog Post” & click “Apply (all displays)”.
Click “Save” …
… and close the overlay.
To see your new view, click the new “Blog Posts” link.
12. Adding a field to a content type
Now you’ve got a view that includes the new content type you created (ie. blog posts), you may find yourself wanting to change what can be included in a blog post. Say you want to include an image in a blog post, you can add an image field. Start by clicking “Structure” in the top menu.
Now click “Content Types” in the overlay.
Click the “Manage Fields” link next to “Blog Post”.
Under “Add New Field” enter “Blog Image” as the Label, and select “Image” in the drop-down menu under Field Type. Click “Save”.
Now click “Save Field Settings”.
Scroll to the bottom of the next page …
… click “Save Settings”, and close the overlay.
13. Adding an image to your blog posts
You will now be able to add an image to a blog post. To do this, Click “Blog Posts” in the Navigation menu on the right, click on one of the blog posts you created earlier, then click on the “Edit” tab.
Scroll down to “Blog Image”, and then click “Choose File”.
Select an image file and double-click it. (A small to medium size image will work best: if you don’t have an image file handy, find one online and save it to your desktop.)
Scroll down and click “Save” …
… and your image should appear in your blog post.
14. Next steps
Now that you are familiar with the steps for adding different kinds of content, and have an idea of how Drupal can be configured by adding modules, you should have a basic idea of how its modular character works in practice and how you can customise your website to be the way you want it.
To go further with Drupal, here are some other options to try:
Make your website live by transferring your files via FTP or SSH to a web server. This is outside the scope of this tutorial, but there is some guidance on how to do this here: https://www.drupal.org/docs/7/backing-up-and-migrating-a-site/migrating-a-site.
As well being the place from which you can download the Drupal core, modules & themes, the Drupal website also has a community to join (https://www.drupal.org/community), and offers support (https://www.drupal.org/support).
Other good places for support include Drupal Answers (https://drupal.stackexchange.com) and Simplytest.me. Tutorials are available at Codeacademy.com and Lynda.com. If you prefer to learn from books, Apress has a good selection, including Beginning Drupal 7 (2010) and Pro Drupal Development (2010).