How to install Drupal 7 on HostGator – Create first page and article

In this article we will quickly show you how to set-up Drupal on HostGator (similar for any host company), create a Drupal page, and publish your first article:

Install Drupal on HostGator with QuickInstall

In this section, you’re going to learn how to install Drupal on a domain hosted at HostGator.com. I’ll be using QuickInstall, which as its name implies, is an autoinstaller designed for quick installations.

To begin, login to your cPanel control panel.

HostGator cPanel login

Once inside, navigate to the Software/Services section and click the QuickInstall icon.

Launch QuickInstall on HostGator

Scroll down to the CMS Software section and select the Drupal version you want to use. I’ll be using Drupal 7 for this example, so I select the corresponding item.

Select Drupal 7 from HostGator QuickInstall menu

Click the Continue button.

Continue installing Drupal 7

A set of fields will then appear. Fill them with the following information:

● Application URL – This will be the URL of your Drupal application.
● Enable Auto Upgrades – Check this to allow automatic upgrades to your Drupal installation.
● Admin Email – Your login credentials will be sent to this email address, so make sure this address is valid and that you have access to it.
● Admin Username – Enter the username you would like to assign to your Drupal administrator’s account.
● Site Title – Enter the Title you would like to assign to your Drupal site.

When you’re done, click Install Now!

Complete Drupal Installation Fields

A green progress bar should then run, indicating how far the installation has progressed. When the installation completes, a notice will appear right below the progress bar. It will include:
● a link to the Admin Area;
● Your Drupal username; and
● the corresponding password

A copy of the same information will also be sent to the email address you entered earlier.

Drupal Installation Complete on HostGator

The Admin Area URL is the URL you’ll have to enter into your browser whenever you want to administer your Drupal web pages.

To access your Drupal application right after installation, just click any of the links as shown on the screenshot above.

This is what appears when I click on “Here”.

Drupal Login Page after installing on HostGator

As you can see, I’ve already entered my login credentials. I just need to click on the Login button to proceed.

Here’s the view inside a freshly installed Drupal application.

Fresh Install of Drupal 7 on HostGator hosting

That’s it. You’ve just learned how to install Drupal on a HostGator hosted site using QuickInstall.

How To Add A Page in Drupal

In Drupal terminology, a Page is where you place content that rarely (if ever) changes. Examples of such content include web pages such as:

● About Us,
● Home,
● Contact Us, and
● Product pages

By contrast, time-sensitive content such as news, press releases and blog posts are placed in what are known in Drupal as Articles.

In this tutorial, you’ll learn how to add a Page.

Start by logging-in to your Drupal account.

Login to Drupal install on HostGator

When inside, click the Add new content link.

Add new content to your Drupal Install

Next, click Basic page.

Add a basic Drupal page

Enter a title in the Title field and some text content into the Body field.

Create a basic Drupal page

To preview your sample page, scroll down to the bottom and click the Preview button.

Click to preview new Drupal basic page

You’ll then be shown two preview versions: a trimmed version and a full version.

Preview options for new Drupal page

If everything looks fine, scroll down and click the Save button.

Click to save your Drupal page

All changes will be saved and then you’ll be brought to the published page itself.

Your new Drupal page displayed

At this early stage, I’m sure there are still a lot of essential and aesthetic items you would like to add to your page. We’ll get to that in future posts.

In the meantime, I’d like to draw your attention to one thing that both needs changing and which is easy to change.

If you look at the address bar of your browser, you’ll notice that the URL of your newly created sample page is not very descriptive.

No URL for new Drupal page

To assign a more descriptive URL to your page, click the Edit tab.

Edit new Drupal page URL

Next, scroll down to the URL path settings section and then assign an URL alias.

Change URL path settings for Drupal page alias

Click the Save button again to save the changes.

Your sample page should now have a more descriptive URL.

Show off your new descriptive URL Drupal page

There’s another reason why you would like your page’s URL to be more descriptive. It has something to do with something called Search Engine Optimization. But then that’s for another post.

How To Add a Blog Post in Drupal

In Drupal, blog posts, news articles, press releases, and other time-sensitive content are called Articles. They differ from static content like About Us, Home, Contact Us, and Product pages.

In this tutorial, you’ll learn how to add an Article.

Start by logging-in to your Drupal account.

Log into your Drupal install on HostGator

When inside, click the Add new content link.

Add a new blog post to your Drupal 7 install

Next, click Article.

Add an article to your Drupal 7 install

Enter a title in the Title field and some text content into the Body field. Also add some tags in the Tags field. Tags are used for grouping articles with similar topics. For example, all articles having a “phone” tag are assumed to have something to do with phones.

Create a new article in Drupal

To add an image to your article, scroll down to the Image section and click the Choose File button. Navigate to the directory in your computer where the image file you want to use is stored. After selecting the file, click the Upload button.

Add image to new Drupal article post

Once the upload completes, a thumbnail of the uploaded image, its filename, and its size will be displayed. Enter some Alternate text. This text will be shown in the event the image cannot be loaded.

View your uploaded image of your Drupal post

To preview your sample page, scroll down to the bottom and click the Preview button.

Preview your new Drupal post

You’ll then be shown two preview versions of your article: a trimmed version and a full version.

Preview your new Drupal post article

As soon as everything looks good, scroll down to the bottom and click Save.

Save your new Drupal article

The saved article should then be displayed.

Check your saved article in Drupal

Anytime you want to make changes to the article, just click on the Edit tab.

Edit your newly created Drupal post

That was a very basic example showing how you can add a blog post, news article, or press release in Drupal. Obviously, there’s a lot more to learn, so I hope to see you again next time.