• Get In Touch
June 21, 2016

How to Create a Website with Drupal

Need Hosting? Try ours, it's fast, reliable and feature loaded with support you can depend on.
View Plans

Drupal is another well known CMS (Content Management System) for the development of complex websites. Drupal is very powerful, flexible and developer friendly. Drupal can be used to develop complex websites like community portals etc, which have multiple users and requires complex data organisation.

Drupal is a totally free, open source project developed using PHP and it requires a database to store its data. Drupal supports almost all types of databases like MySQL, PostgreSQL and SQLite. Drupal has great features, like easy content creation, reliable performance, and excellent security.

The recently launched Drupal 8 is the biggest update in it’s history. With this update, creating website with Drupal became much easier, even for a normal user. Drupal 8 is available in more than 100 languages and all the inbuilt themes are rewritten now, making them responsive. Drupal has more than 30,000 modules and themes to extend its features.

In this tutorial we are going to learn how to install Drupal on a shared hosting environment. We will also learn how to install Drupal manually as well as automatically using Softaculous. We will also go through the basics of creating a website with Drupal.

Features of Drupal

Although Drupal has many features, here are a few of the more notable ones –

  • Total control over Users roles and permission to access different parts and functions of website.
  • Drupal provides you flexibility to add different types of content for example articles, blog posts or news stories etc.
  • By Default Drupal has its own user tracking and analytics, but it can be easily integrated with other analytics tools like google analytics etc.
  • Drupal is responsive, both in frontend and backend thus it adopts the screen size of user. You can also administer Drupal using your mobile phone.
  • Drupal provides you full customisation of menus and categories of a content type.
  • Inbuilt Search Engine Optimisation, you can provide meta information of any page on Drupal. Drupal automatically generates sitemaps for your website.

Requirements

Drupal can be installed on any platform, like shared hosting, VPS or dedicated servers. As we are going to install Drupal on shared hosting, you will only need a shared hosting account. If you’re looking for a host you can always check out our own web hosting packages all of which support Drupal.

Manual Installation

You can install Drupal by creating a database and uploading the files to your web hosting. You can also install Drupal using Softaculous app installer which is described below.

Download Drupal Core by browsing the official website of Drupal. It is recommended that you download the installer package of latest version.

Login to your cPanel account and find the files section, click on File Manager link.

In File Manager, navigate to your web root directory, which is public_html. Click on the upload link and browse to the downloaded package to upload it. You may also drag and drop the package to the upload window.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1751344628.png” alt=”” />

Once you have uploaded the compressed package, extract the package in public_html folder.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/878764528.png” alt=”” />

You will see that the files you have extracted are not in public_html but in another directory Drupal-8.x.x. You will need to move all the files to public_html, you can do so by selecting all the files and then click on move button from top menu. Now you can move them to public_html folder.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1362967468.png” alt=”” />

Another method to upload the files is using FTP. You can extract the compressed package on your computer and use any FTP client like FileZIlla to upload all the extracted files to your web root directory. Make sure that you upload the files to public_html directory.

After uploading the files you will need to create a MySQL database to store Drupal’s data. Drupal also supports SQLite, which stores the entire database into a single file on disk, hence it is not necessary to create a MySQL database to install Drupal. But it is highly recommended that you use a MySQL database to store Drupal’s data because using SQLite has many disadvantages. There is no user management in SQLite and it is very slow compared to other database management systems. It should not be used to host multi user applications. SQLite should only be used when you do not have access to MySQL databases.

To create a database, go back to the cPanel dashboard, find the Databases section and click on MySQL Database Wizard. In the MySQL Database Wizard, you will see the Step 1 to create your database. Enter the desired name of database you want to create.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/21633589.png” alt=”” />

Click on the button Next Step. In Step 2 you will create a user for your database who will have full access to the database which we have created. Enter the desired username and password for your database user. Make sure that you use a strong password. You can also use password generator to generate a strong password. Click on Create user button.

In Step 3 you will Add the user to the database, It is recommended that you provide all the privileges to the user, just select ALL PRIVILEGES checkbox and click on the button Next Step. You should now get a success message that the user is successfully added to the database.

**Note: **
By default cPanel add a prefix before your database name and database username to prevent creation of identical databases. Please note that whenever you will be using the database you will have to provide full database name which is YourAccountPrefix_DatabaseName and full database user, which is YourAccountPrefix_DatabaseUser. For example full database name will be example_Drupal and full user name will be example_DpUser.

Now as we have our database and files ready, we can proceed with the installation through front end. Access your website through your web browser by entering your domain in the address bar. If your website is example.com then go to

    http://example.com

You will see something similar to the screenshot below.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/13539164.png” alt=”” />

Choose the default language for your website and click on Save and continue button. Next you will be asked about the profile for your Drupal installation. If you are a beginner, choose Standard installation as it has all the preconfigured default features that comes with Drupal for example RSS feeds, Analytics etc. If you are a Drupal developer and want to create the website from scratch, choose the minimal installation option. Click Save and continue button to proceed further.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/233907576.png” alt=”” />

Next you will be taken to the interface where you will need to review the requirements of the server. Drupal needs minimal requirements and most shared hosting servers provides that. Scroll down below and click on Proceed further link. If there is a critical requirement is missing on the server, ask your hosting provider for assistance.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1217883883.png” alt=”” />

In this step you will have to provide the details of your database. Select the database type, from MySQL, MariaDB or equivalent. As we have created our database in MySQL, we will select MySQL, but if you don’t have access to MySQL database, you can also select SQLite. For MySQL enter the database name, username and password which we created earlier. For SQLite, provide the filename and path to store the database. It is highly recommended that you store its data file into a hidden directory which starts with a period( . ).

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1817783192.png” alt=”” />

If Drupal will be able to access the database then it will move to the next step and it will install Drupal, if not then it will give you an error. You will need to recheck the credentials provided.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1458036751.png” alt=”” />

In final step you will need to configure your website. Provide a name for your website in Site name field. Enter administrative email, all critical notifications and registration information will be sent to this email address. Next provide a username and password for the administrator account. Select the default country and timezone for your website and select the update notifications options. Click on Save and continue button.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/2028400997.png” alt=”” />

Drupal is now installed and you will see the following screen.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1018457220.png” alt=”” />

Automatic Installation

You can also install Drupal automatically using Softaculous app installer. Open your cPanel account, in the Software section click on Softaculous App Installer. In Softaculous App Installer section click on Drupal link from sidebar under Portal/CMS.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1258293737.png” alt=”” />

Click on Install Now button, you will see interface to provide details of installation. In Software Setup, choose the version you want to install. It is recommended that you install the latest version. Choose the protocol you want your website to use while loading, you can choose http:// or http://www. or you can choose to load your website securely by selecting https:// or https://www.. If you choose the secured protocol then you will need to configure SSL/TLS for your website. Now choose the domain on which you want to install Drupal. If you are planning to install Drupal on the main website, not in any folder, remove the text from In Directory field. It should be empty because if there is any text in this field, Softaculous will create a directory and will install Drupal in that directory.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/567293834.png” alt=”” />

Under CRON Job, you will need to specify when to run a cron job. Drupal requires setting up Cron Job to automate certain tasks. Next you will need to provide a name for your website in Site Name field.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1640291656.png” alt=”” />

Under Admin Account, provide a username, password and email for Administrative account.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/684534000.png” alt=”” />

In Advanced options you can configure the name of your database, table prefix and automatic backups.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1427946530.png” alt=”” />

That’s it, click on Install button to install Drupal in your website.

Creating A Website

As we have successfully installed Drupal, we will now learn how to create a website with Drupal.

Logging into the Admin Dashboard

To login to Administrative dashboard of Drupal, go to login page by browsing the following URL through any browser.

    http://your-site.com/user/login

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1134395374.png” alt=”” />

Now enter your administrative username and password and click on Login button. Once you are logged in you will be taken to your profile. Additionally you will see two menus on the top, you can navigate through admin panel using them.

Creating a Basic Page

To create a basic page, goto Home > Content > Add Content > Basic page. In the Create a Basic Page interface, provide a title for your page in Title field. Add the content of your page into Body text field. You can also use the tools provided in the text area to make your page more attractive. Below you can choose the Text format for the content of the page. Before putting your page live you can also see a preview of the page by clicking on Preview button.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/2062429195.png” alt=”” />

Before publishing the page, you may also check the settings on the right sidebar. In Menu settings, you can add a link to this page on a menu. Select the checkbox before Provide a menu link text. Provide the title of the menu link and Choose a parent item under which the menu is to be added. Also provide a weight for your menu item. Weight is used for sorting of the links of menu. Links having lower weight are displayed before and links having height weight afterwards.

In URL Path Settings, you can provide an alternative URL for your page, just provide a text for your custom URL. For example for About us page your can provide /about-us alias. If you leave this field empty, Drupal will automatically assign an alias for your page. It is a good practice to assign an alias, as the alias assigned by Drupal are not SEO friendly.

In Authoring Information, you can provide a username of another user as the author of the page. You can also change the date and time of creation of the page.

In Promotion Options, you can promote the page to front page by selecting Promoted to front page checkbox. If you want this page to be displayed on the top of the lists, you may select Sticky at top of lists checkbox.

Once done you can Save and Publish the article by clicking Save and publish button. If you wish to save the article without publish it, click on the down arrow and select Save and unpublished. You can create as many pages as you want, and add them to your website.

Setting your Homepage

Go to System Configuration by browsing to Home > Administration > Configuration > System and then in Front Page options enter the URL of the page you want to promote as home page.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1079978447.png” alt=”” />

If you have not provided a custom URL at alias option on sidebar during creation of page, then it should be something like /node/x, where x can be any number. Click on Save Configuration button and then check back the homepage of your website. You will see the content of the page on homepage.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/549566868.png” alt=”” />

Adding an Article in Drupal

To add an article, which can be a blog post, news or press release go to goto Home > Content > Add Content > Article. In the Create Article interface, provide a title for your article, enter the content of blog in body field. Enter tags for your article separated by a comma. Finally choose a featured image for your article or blog post. Featured images and tags are optional. Before saving the article you may configure the article option on sidebar. All the options are same as the options at static page except comment settings. Comments can be enabled or disabled on an article. If you choose open, any user can post a comment on your article, if closed user can not post comment on your article. Click on Save and publish button once done.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/204728643.png” alt=”” />

Adding a Contact form

To add a contact form go to Home > Administration > Configuration > Contact forms and click on Add contact form button. Enter a label for your contact form, which can be anything like feedback or contact us. Now enter the recipients who will get the email if somebody submits the contact form. To add multiple address, separate them with comma. In Auto-reply field, you can specify a message which will be immediately sent to them automatically. You can also make this contact form as default contact form on website.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1324064877.png” alt=”” />

Click on Save button to save the form. Once the form is created, you will be taken back to the list of available contact forms. Click on Edit button next to the contact form we have created.

By default Drupal will display the sender name, sender email, subject and message fields in contact form. If you want to add an extra field, click on manage field tab. To add a new field click on Add field button, in the add field interface, select the type of field from drop down menu. Now provide a label for the field and click on Save and continue button.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1970658113.png” alt=”” />

Now you will be taken to settings of that field, this is different for each field, for example when adding a number type field, you will be asked how many values can be entered in number type field, you can provide a limited number or unlimited numbers. Once configured field settings, click on Save field setting button.

In next interface you can set a help text for your field, which will be displayed under the field in small letters. Choose if the field is required or not and provide a default value for the field if you want.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/800901464.png” alt=”” />

Click on Save settings button and you will be taken back to the list of fields. In same way you can create as many fields you want.

To manage how your form is displayed click on manage form display tab. You can arrange and deactivate the fields form here. To arrange the fields, just drag and drop the field in desired location. To deactivate an item, select the hidden attribute in widget option for that item.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1247891218.png” alt=”” />

In the manage display tab, you can manage where the label for that field will be displayed. You can choose to display label either above the field, or Inline or you can also hide the label. Click save button once done.

Adding the Contact Form to the Main Menu

To add a recently created contact form in main menu, go to Home > Administration > Structure > Menus, and click on the edit menu button next to Main navigation. Now click on add link button. Now enter the menu link title, which can be anything sucuh as Contact Us. In link field enter /contact. Provide the weight for the menu item, you can also fill all the other information. Click Save button to create a link for the contact form in the menu. Now you can visit your website to see the contact form.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1459322859.png” alt=”” />

Changing Theme

You can change the look and feel of your drupal website by changing the theme. To install a new theme to your website, go to Home > Administration > Appearance and click on the Install new theme button. You can install themes in Drupal using two modes. You can either copy and paste the URL of the theme file in Install from URL field. Theme file must be compressed archive. Another method is that you download the file from source to your computer and upload the theme archive to install it.

You can browse the official Drupal themes project website for free themes. Find the theme you want to install and in download section of that theme, you can either copy the link or you can download the tar or zip archive to your computer. Make sure that the theme you are installing is compatible with your version of Drupal. For example, if you have Drupal 8 installed, then you must install the theme with version 8.x.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/733094805.png” alt=”” />

Once you paste the link to the file or you have selected the downloaded file, click on Install button to start the installation of the theme.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1270534062.png” alt=”” />

Now Drupal will automatically download and extract the theme files in /sites/all/themes directory. Once the download is finished you will see a success message.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/767566088.png” alt=”” />

Now click on the Install newly added themes link, you will be taken back to Appearance settings. Scroll down to find your newly added theme in the Uninstalled themes section on that page. You can either install the theme by clicking on Install link, or you can directly install and activate the theme by clicking Install and set as default link.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/672669986.png” alt=”” />

Once the new theme is activated, you can visit your website to see the changes.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/2119380235.png” alt=”” />

Administration Theme

You can also change Administrative theme through here. Find and install the theme using same way we have installed the default theme. Make sure that the theme you are installing and will be activating for Admin theme compatible with administrative dashboard. Once installed, go back to the Appearance setting page. Scroll down to find Administration theme section. Select the theme from drop down menu and click on Save configuration button to activate new administration theme.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/221217775.png” alt=”” />

Theme Settings

To change the settings of a theme, click on Settings link under the active theme. You can control the display settings for your theme here. In the Toggle display section you can enable or disable the display of certain elements. In Logo image settings, you can change the logo of your website. Unselect the option of Use the default logo supplied by the theme and then either paste the URL of your logo, or you can upload the logo also. You can also change your Shortcut logo or site icon settings, you can also supply the URL here, or you can upload the icon. If your theme supports social media icons, you will find the option to set the links to your social media pages here. In Copyright information you can enter your custom copyright text. Click Save configuration button once done.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1887524781.png” alt=”” />

Creating a Menu

You can create a menu in Drupal by going to Home > Administration > Structure > Menus.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/847145167.png” alt=”” />

You can edit the existing menus by clicking Edit button following to name of the menu. To add a new menu click on Add menu button.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/463130318.png” alt=”” />

Enter the title of the menu, and provide and administrative summary for your menu. Click on Save button to add the menu. Once the menu is added, you will be taken to the list of links, as there are no links yet, you can add a new link by clicking Add link button. Provide a Menu link title, which will be shown in menu. Now provide a link for the menu, a link can be anything, for example it may be a page or article in your website, or it may be an external link. Select Enable link to enable the menu link, enter description if you want. Choose a parent link if the link you are adding is a child link to any other link. Enter weight for your link, menu items having low weight are displayed before and menu items having higher weight are displayed later. Click Save button to add the menu link.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1802976852.png” alt=”” />

Adding New Elements

You can add more blocks or elements in your website. For example, if you want to display the newly created menu on website, you will have to edit the layout of website. To edit the layout of website go to Home > Administration > Structure > Block layout.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1341722834.png” alt=”” />

In Block Layout interterface, you will see the layout of your website using different themes. We will need to update only the active theme’s layout. You can place your menu on the different regions of theme. To place the menu in a region, click on the Place block button next to the name of region where you wish to put the menu. Then select the block or element which you wish to place and click on Place block button.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1958854829.png” alt=”” />

Then you will be taken to configuration of the block, where you can restrict the menu to appear on selected pages or selected content types or for selected users. Click Save button place your menu in the region.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/152211104.png” alt=”” />

You can now visit your website to see the new menu on the region you have chosen. In same way you can place more elements in your website.

Optimising performance

You can speed up your Drupal website by configuring performance settings available in your Drupal installation. Go to Home > Administration > Configuration and click on Performance link under Development section. Under Caching settings, select maximum page cache age, recommended is 30 min. Select Aggregate CSS files and
Aggregate JavaScript files checkbox and click Save configuration button.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/14352111.png” alt=”” />

This will enable caching in your website also it will aggregate CSS and JS files, hence the requests to web server will be reduced, making your website faster.

Conclusion

In this detailed tutorial of Drupal CMS we have covered all the basics of Drupal. You can now create and run a website on Drupal, from installation to the publishing of your first project.

Need Hosting? Try ours, it's fast, reliable and feature loaded with support you can depend on.
View Plans

Share this Article!

Related Posts

Node.js Authentication – A Complete Guide with Passport and JWT

Node.js Authentication – A Complete Guide with Passport and JWT

Truth be told, it’s difficult for a web application that doesn’t have some kind of identification, even if you don’t see it as a security measure in and of itself. The Internet is a kind of lawless land, and even on free services like Google’s, authentication ensures that abuses will be avoided or at least […]

Node.js and MongoDB: How to Connect MongoDB With Node

Node.js and MongoDB: How to Connect MongoDB With Node

MongoDB is a document-oriented NoSQL database, which was born in 2007 in California as a service to be used within a larger project, but which soon became an independent and open-source product. It stores documents in JSON, a format based on JavaScript and simpler than XML, but still with good expressiveness. It is the dominant […]

Using MySQL with Node.js: A Complete Tutorial

Using MySQL with Node.js: A Complete Tutorial

Although data persistence is almost always a fundamental element of applications, Node.js has no native integration with databases. Everything is delegated to third-party libraries to be included manually, in addition to the standard APIs. Although MongoDB and other non-relational databases are the most common choice with Node because if you need to scale an application, […]

Node.Js Vs Django: Which Is the Best for Your Project

Node.Js Vs Django: Which Is the Best for Your Project

Django and NodeJs are two powerful technologies for web development, both have great functionality, versatile applications, and a great user interface. Both are open source and can be used for free. But which one fits your project best? NodeJs is based on JavaScript, while Django is written in Python. These are two equally popular technologies […]

Nodejs Vs PHP:  Which Works Best?

Nodejs Vs PHP: Which Works Best?

Before getting into the “battle” between Node.js and PHP we need to understand why the issue is still ongoing. It all started with the increased demand for smartphone applications, their success forcing developers to adapt to new back-end technologies that could handle a multitude of simultaneous requests. JavaScript has always been identified as a client-side […]