DIY Website

I have decided to build this tutorial for anyone who does not have the time or money to make a clean and presentable website.  The method that I am about to teach is you cheap and efficient.  You will not have to hire a web designer and I will be teaching you everything you need to know about back end web development in order to build your very own webpage.  The method I will be teaching is through the  WordPress software which is a great tool for managing a website in blog format with a variety different customizable themes.

Step 1: Get a Name and Host

Lets begin by getting you, your very own domain name and hosting server.  My suggestion is to do both the domain name and hosting with the same company.  I am currently using www.totalchoicehosting.com as they have been reliable and cheap and for the purpose of this tutorial we will be using their site map to navigate.

Note: The hosting is optional but is recommended if you plan on customizing your webpage. If you don’t want to you can skip this tutorial  after step 2 and visit www.wordpress.com

On the total choice web page you will click services>domain

Here search if your domain name is available at the “Search for Domain” bar.

Once you have chosen a domain name you can choose your package price that suits your needs and budget by following their step by step guide.

Next you will need to host your website to attach your domain name too. Return to the hosting provider page and choose a hosting plan that is suitable to your needs.  If you are unsure what some of the information that they are giving you is here is the basic selling point.  If you plan on hosting a large page that you believe will have a lot of traffic you will need more space and bandwidth and therefore a higher package with a higher price.  For today we will suggest that you are unsure of how much traffic you will receive at the beginning and your web page space usage is kept at a minimum. Follow the step by step process provided by the site to purchase your hosting service.

Note: In the future when visiting your webpage you receive an error message, it is most likely that there is too much traffic and you have ran out of bandwidth usage.  It’s time for an upgrade.

After the purchase is made you will receive an e-mail with all the information you will need for the next step.

Step 2: Set Up Server and Domain

In your e-mail your e-mail from your hosting provider you will be given a username and password that is attached the server will you will host your website.  It will look something like this http://almania.tchmachines.com/yourusername.  You will log into your server will hopefully if you chose another hosting provider there is a Graphic User Interface (GUI) that is user friendly.  CPanel is the GUI we will be using for this tutorial.

Once logged in look for a “Domains” section (or something similar) then section where you can “redirect”

In the redirect section you will be given the option to choose the domain name you just purchased and redirect it to your hosting server.  In this case our hosting server is http://almania.tchmachines.com/yourusername.  Save this change and return to the main menu.

Step 3: Install WordPress

Here is where it gets somewhat tricky so take your time in reading the next instructions.

Our approach to building your website will be to find an appropriate theme from the internet. No programing required! Before we go ahead on finding a theme however we need to set up WordPress on your new server.

Note: For the purpose of this tutorial we will be using a WordPress based website for its user friendly attributes.

Google search “Download WordPress” or try visiting http://wordpress.org/download/

Once downloaded take some time in reading their instructions on installation.  It will require you to go to your File Manager from your server GUI which should look something like this.

Once in file manager choose the public directory for this is the directory that is accessible by visitors to your webpage and minimize this page for now.

Click http://codex.wordpress.org/Installing_WordPress for instruction on installing wordpress on your server.

ATTN: The wordpress installation tutorial will provide instructions on working with your server and files to install files. Look for links that will direct you to more sub tutorials for SQL set up and PHP config.

Once this is complete you can return to the redirect page of you server GUI and change the redirect to http://almania.tchmachines.com/yourusername/wordpress where “wordpress” is the name of the folder where wordpress in now contained.

Step 4: Upload Theme and Log Into WordPress

Google search wordpress themes and find a suitable theme that you would like to use for your page, preferably one that will give you as many options as you need for your websites purpose (i.e. one with a banner)

Once the file has been downloaded return to file manager and upload the file to the wordpress>wp-content>themes folder.  Right click the file after it is uploaded and extract it.

Next visit your http://almania.tchmachines.com/yourusername/wordpress and on the home page find the admin link and click it, this should take you to a login page.  Your login would of been provided to you when installing wordpress.  Most likely you have done this already.

You are now in the wordpress GUI where you will do all your website editing quickly and easily.  Later take some time to learn all the tools available to you.

Click the Appearnce Tab>Themes.  You should now see the newly uploaded theme as an option. Select it and choose apply.

Congrats! You now have your own webpage.

From here you still have a few more options.

Step 5 (optional): Advanced Customization

If you are unsatisfied with the available themes don’t get disappointed yet.  You can still modify your themes.

Within the themes folders that you have downloaded there should be a “style” file.  Make a copy of this file and open in with your favourite text editor.

In here you will see a page of code where you can modify colours, borders, and so on.  You may need to know some programing knowledge at this point but don’t get discouraged yet.  Changing colours and border lengths are easy.

To change colours hit ctrl+f to bring up a search window, type # and find next.  You will be brought to a part of the page where # is located.  Beside the # there will be a combination of letters and numbers.  This combination is what defines the colour you see.  Surrounding the colour should be some information on what the colour is for in the theme, if you are still not sure you can copy the colour code into Google or a program like Photoshop to view the colour and then you can choose a new colour code to replace it.  I would recommend clicking the replace tab in the search window where you searched for # and typing in the new colour code and replace all of the old colour code. Repeat this process for all the colours you find.

You can do the same by searching for border then changing the border thickness by changing the px. number which defines the amount of pixels.

Experiment with all the different values you find to continue modifying your new theme until is is the way you like.  To view the new theme keep uploading the new “style” file to where it is located on your server and changing the theme.

Here is a link to another similar tutorial: http://richardmuscat.wordpress.com/2009/03/25/using-wordpress-as-a-cms-step-by-step-tutorial/