We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message
2,862 Tutorials

Crash course: How to make a website with Drupal

Crash course: How to make a website with Drupal

Drupal is an amazing content management system (CMS) that can build pretty much any Web site you want it to -- if you can figure out how. Follow along as I remake my personal Web site, bratgrrl.com, using Drupal.

[ Making money in open source: Drupal future looks bright ]

Why Drupal?

Everyone wants to know why choose Drupal, and how does it compare to WordPress and Joomla? A quick Web search will find endless comparisons and reviews. Here is the short story: Drupal is the most flexible and capable. It has a steeper learning curve, but once you learn your way around Drupal you're set for the long term and can build everything from simple personal blogs to giant enterprise sites, and build them the way you want. WordPress is super-nice and you can literally have a new site up and running in five minutes. (There are two WordPresses: the WordPress software that you install on your own server, and Wordpress.com, the giant hosted WordPress blogging site.) Joomla is also easy to get up and running. For me, both WordPress and Joomla are harder to customize and extend, while Drupal allows endless flexibility.

Installation

It will probably take more than five minutes to set up our shiny new Drupal site, but not much more, because I will spell out those all-important first steps that are so often glossed over.

An easy way to get started is to get an inexpensive hosting account that includes Drupal support. I use AMS Computer Services. I've run several sites on them for years and they have never let me down. All of their hosting plans includes Drupal, WordPress, and Joomla, and a giant batch of other CMS. Installation, updates, and removals are super-easy because they use the Softaculous auto-installer. Many hosting services include giant batches of open source servers, and you can visit Webhostingtalk.com to get good reviews and information about who is good. For this article I'm doing everything on my own AMS account using Drupal 7. You may elect to install Drupal on your own test computer. Consult the good Drupal installation guide for this.

Making a new site

It is helpful to use a second Web browser to preview your site as you make changes, so you can see how it looks without being logged in.

When you're managing any Web site on a remote server, your first job is to set up FTP access. If you mess up your site configuration and can't access it with a Web browser then FTP will save you. FTP is faster than faffing around in a Web browser anyway when you're editing or uploading files.

Figure 1 shows my original bratgrrl.com front page.

I whipped that up in a few minutes using a text editor and then didn't touch it for a few years. Softaculous installed Drupal into its own drupal/ directory, so bratgrrl.com is untouched, and I have to go to bratgrrl.com/drupal/ to see my new Drupal 7 installation. I'm going to leave it there until I have something decent to replace the old front page. Figure 2 shows the new bratgrrl.com/drupal/ page.

Naturally I wrote down the login I created during installation, and logging in takes me to the home administration page (Figure 3).

As you can see, there are a lot of different configuration pages: Content, Structure, Appearance, and all the rest in the top menu. Let's go to Configuration. On my installation it opens in an overlay, which is a Javascript-powered feature that opens the menus over a page instead of going to a new page. Overlays are enabled and disabled in the Modules menu.

Let's enter the Configuration menu. I'm going to configure the site name, slogan, and main email address on the System >> Site Information page. (Figure 4).

Installing a new theme

Next, let's install a new theme. Go to the Drupal themes page, pick one that matches your Drupal version, and download it. Some are free, some cost money, some are developer previews or labeled as minimally maintained, so pick one that sounds like it won't be a batch of new troubles. Then back in your Drupal administration page, go to Appearance, and click Install New Theme. You can install it either from a downloaded file on your computer, or from a Web site. I installed the Alina theme. You'll see a "Installation was completed successfully" message if all goes well. Underneath this message is a link labeled "Enable newly added themes." Click this link and it takes you back to the Appearance page, where you can scroll down to DISABLED THEMES and enable your new theme.

When the new theme is installed you'll get a success message, and also a "No update information available. Run cron or check manually" message. Click "check manually" to check for updates, and to clear the message. Note that you can have a different theme for the administration pages, which is selected on the same page. Figure 5 shows my setup: I have Alina as my site theme, Seven 7.8 as the administration theme, and all the other installed themes disabled.

I could click the Settings link for Alina to tweak the page elements, but for now I'm leaving it alone, because it is time to create some content. Drupal has three categories for content: Book Page, Basic Page, and Article. A book page is a collection of related entries and links that you can assemble from any of your existing content. (In my installation Book Pages were not enabled. Book pages are part of the Drupal core, and are enabled and disabled in the Modules menu.)

The two workhorses are Basic Page and Article. A Basic Page is for static content like About and Contact pages. Articles are time-sensitive material, like news articles and blog posts. I want to create my About page. Enter the Content menu, click Add Content, click Basic Page, and start writing. You have a choice of three text formats: Filtered HTML, Full HTML, and Plain Text. Filtered HTML gives the most control over formatting, so that's what I use. Drupal automatically creates a teaser from the beginning of your text. There are two ways to control this: click Edit Summary to write a custom summary, or enter the tag in the body of your text where you want it to split. Check "Provide a menu link", enter a title and description, and save.

I still need some front page content, so I'll create an Article. Articles can have menu links, but I haven't created a menu yet for articles, so for now it has no menu link. When the new Article is finished I want it to appear on the front page. Articles placement is controlled in the main Content menu. Figure 6 shows what to do.

The Content menu shows the two new pieces of content. "September 2011 Linux articles" is checked, and under Update Options I have selected "Promote selected content to front page." Click Update, and figure 7 shows the result.

Note that there is a "Read more" link at the end of the article. It should not be there, since the entire article is displayed. The issue of uncontrollable Read More links is a source of woe in Drupal-land with no completely satisfactory resolution that I have found. Try Remove "read more" and display entire content for help.

Going live

When you're ready to go live, you need to edit a couple of files. First find Apache's .htaccess file and add these lines. If your Drupal installation is not in a directory named drupal, then use your directory's name.

RewriteEngine on

RewriteRule (.*) drupal/$1 [L]

Then find Drupal's sites/default/setting.php file. This will probably be read-only, so change its permissions to 0644. Then look for the Base URL section. This snippet shows what mine looks like with a bit of context:

* It is not allowed to have a trailing slash; Drupal will add it

* for you.

*/

$base_url = 'http://www.bratgrrl.com'; // NO trailing slash!

So all you have to do is find the $base_url = line and enter your own base URL, so that visitors see your pretty Drupal site at www.example.com instead of www.example.com/drupal. Then change the file permissions back to read-only, 0444. Do not forget to do this! See Taking Your Site Live to learn more.

Now you are well on your way to building a wonderful site with Drupal. The motherlode of all Drupal information is Drupal.org, so always visit here first for documentation and help.

IDG UK Sites

Where to buy iPhone 6 and iPhone 6 Plus in the UK: Launch day price, deals and contracts

IDG UK Sites

Is Apple losing confidence in itself?

IDG UK Sites

Professional photo and video techniques for perfect colours

IDG UK Sites

How (and where) to buy an iPhone 6 or iPhone 6 Plus in the UK. Plus: What to do if you pre-ordered...