How to deploy a website from scratch? [TUTORIAL]

In this tutorial we will try to learn all the steps involved in a website deployment. We will cover the following points:

  1. Buying Hosting & Domain
  2. Pointing Domain to server
  3. Creating Email Accounts
  4. Installing WordPress
  5. Searching & Installing Themes

This site will be dynamic, we will be using WordPress which is a CMS. WordPress started as a blog software but very quickly evolved as a CMS. CMS means content management system which means you will get a powerful admin panel to change/add/delete data. WordPress is a very powerful software which can be extended very easily by already available plugins. You can find a wide variety of themes available on the net, both free and paid. In this tutorial we will be using a free template.

1. Let’s buy a hosting account and a domain

Go to bigrock.in (You can use any other hosting provider but i choose bigrock for this tutorial) also if you click on the bigrock.in link and buy anything, all the commission which generated will go to a charity.

We will be buying Linux hosting because its comparatively faster than windows hosting and also comes with lots of benefits which I will cover in the next tutorial soon.

step1

After clicking on linux hosting you will see different plans which are:

Pro Plan – If you have multiple website you can buy this and can host all the websites on a single server

Business plan – same as pro but only host three websites on it.

Advanced – This will be the best option if you have a single website

But for this tutorial we will be buying starter plan which is very limited. Select Duration to 1 year and click on “Add This Plan”.

step1.p.zng

After clicking on “Add this plan” a modal box or popover will open, in which you will be able to see a form for selecting or buying new domain

step1.2

The domain which we will be buying is “iwantawebsite.com” but as you can see below that it is not available, someone already have bought it, so i have to buy a different name, so let’s buy iwantawebsite.biz. You can always search for new name by clicking on “Search Again” button.

step1.z

 

Click on the “Add” button and then on “Checkout” button. Now you will be able to see the order summary and our order contains a domain and linux hosting. After creating account select a payment method and done with it.

step-checkout

After payment you will see page showing message of payment completion also you will get couple of emails regarding your new hosting and domain account in your mail box. On the success page click on the “Take me to the control panel” button

step-payment-complete

2. Pointing Domain To Server

We need to change the default NameServer of the domain to our newly bought one. Technically speaking(Just ignore this para) A name server is a computer server that hosts a network service for providing responses to queries against a directory service. It maps a human-recognizable identifier(A domain name) to a system-internal(IP address), often numeric identification or addressing component. This service is performed by the server in response to a network service protocol request.

Click on the domain name

step-click-on-domain-name

On the next page scroll down and click on name server details which will give you the details of the name server which you have to enter in the Domain name servers which you can see under the title Domain Registration

step-name-server-details

Your server’s name server will be something like ns1.cp-28.webhostbox.net, please copy all the name server given, in a notepad and click on the cross icon, which will close the modal or popover box.

step-name-server-deatails

Now scroll up and look for “Name Servers” click on it which will open a form, remove all the entries and paste the name servers which you copied in the last step. After adding Name servers click on update name servers and you are done setting  domain and hosting. You will be able to see your site right away but some time there can be a delay of lets say 24hr to 48hr.

step-change-domain-name-server

3. Creating Emails

Under the “Single Domain Linux Hosting” panel, there is a link for managing web hosting, click on it which will open the cPanel(a type of control panel) for your hosting server from where you can install different softwares, create emails, ftp accounts etc. etc. But right now we are interested in creating email accounts. Under the “Mail” box click the email account which will open page where you have fill certain fields required for email creation.

Screenshot from 2013-07-17 15:35:39

Click on create account button to complete the process.

Screenshot-from-2013-07-17-153553

Click on more button and it will drop down two options 1) Access Webmail (you can view/send mails from a web based interface) 2) Configure mail client (Settings to configure mail client like outlook, thunderbird etc etc.)

4. Installing WordPress

Scroll down in your newly opened control panel and look for “Softaculous Apps Installer“, under that you will find WordPress, click on it.

step-click-wordpress-e1374052370589

On the next page you will be able to see a “Install” button, click on it and it will ask for some details like  new admin username/password, wordpress installation directory, site title & description etc. etc.

If you want to install the WordPress in http://www.example.com leave the field “In Directory” Empty. Write a site name and description in the respective fields(it can be changed later), also choose an admin user name and password, at the bottom after writing email address in the “Email installation details to” click on install.

wordpress-installation-details.resized

wordpress-install

 

Within seconds of clicking install button you will be greeted with the following message, which means WordPress has been installed successfully, Yayyyyyy. Also you will get an email containing all the details  of your WordPress installation. Now let’s head on to Searching Themes

Screenshot-from-2013-07-17-135436

5. Searching & Installing Themes

If you view your newly bought domain, it will look like as following image:

Screenshot-from-2013-07-17-140226

Now let’s search some beautiful looking themes:  Go to http://wordpress.org/themes/  view some of the top 4-5 results or whichever theme you find suitable for your business.  We will be using http://webtuts.pl/themes/corpo/. Download the theme http://webtuts.pl/themes/corpo/ on your computer.

Open the admin panel of your WordPress site (which will be your-domain/wp-admin , in our case iwantawesite.biz/wp-admin/ ) and fill in the credentials. You can find the details of the admin panel in your email from “Softaculous“. The admin panel will look like following image:

Screenshot-from-2013-07-17-141302

Click on the appearance, where you will be able to see all the available themes. Click on the “Install Themes” tab, there you will see a search form and lots of options about the looks and feel of the theme, WordPress has a wide variety of free themes available in their repository but for this tutorial we will use the upload option for installing, so click on the “Upload” and from there you can upload the theme (the zip file) which you downloaded in the previous step.

Screenshot from 2013-07-17 14:15:21.resized

After uploading and installing theme you will be greeted by following message, click on the “Activate” to make the uploaded theme as default theme for your site.

Screenshot-from-2013-07-17-142218

Now if you see your website again, in our case it is http://iwantawebsite.biz you will see a slightly different design. To change the design more go to the admin panel Appearance > theme options. This theme allows you to change color, you can upload custom logo etc etc..

Screenshot-from-2013-07-17-142817

Click on the “Home Page” tab and enable the custom front page and set yes to display slider too and click save options. check your website again and you will see that design has been changed. To read more on this theme’s options please visit http://webtuts.pl/documentation/corpo/.

Screenshot from 2013-07-17 17:32:03

To add slides

  1. Go to Slider > New Slide from your Dashboard.
  2. Add title and content in the main textarea. This is optional, if you leave both fields empty, only image will be displayed.
  3. Upload a Featured Image to each Slide. Slider dimensions are 980 x 380px. If You upload bigger images, proper size will be generated automatically. If you see image that says “Image placeholder” in your slider, it probably means, that the slide doesn’t have featured image set.
  4. You can take advantage of custom order of slides. To set slides order, add appropriate number – 1,2,3 etc. to each slide (you can also do this in Quick Edit mode).

slides

The services section on the home page is administered via Appearance > Widgets. You set it up by dragging desired widgets to Home Page Services Sidebar.

widgets

Final Product :) http://iwantawebsite.biz/

Screenshot from 2013-07-17 15:30:19

Resources

1. WordPress Beginner Tutorials – http://www.creativebloq.com/web-design/wordpress-tutorials-designers-1012990

2. Plugins – http://wordpress.org/plugins/

3. Awesome Paid Themes – Themeforest

4. Hosting & Domain – bigrock.in

Next tutorial will be “How to deploy an ecommerce website from scratch”