Starting your own website

View list of forum discussions about computers, IT, the internet etc.

If you spend enough time discussing an issue on online forums and blogs you will eventually find that they don’t do justice to the effort you put in. The obvious next step is to start your own website. It is fairly cheap these days, and has the potential to make you money, though you shouldn’t give up your day job just yet. If you actually have something to sell direct to the public, or an organization to represent, even better. While there are a lot of good tutorials online, they don’t offer much broad perspective, which is what I hope to give here, ranging from advice for beginners to some of the more frustrating issues you may encounter.

It’s been a steep learning curve over the last few weeks and my primary motive for writing this article is to share what I’ve learnt before it got forgotten, so that I could save others the same problems. It was not my intention to give an exhaustive tutorial but to make you aware of what options are available and what to search for if you want to find out more. I have only gone into detail where I was not able to find useful information online.

Free options
top

If you are new to this, you should probably start with a free online blog or website. You supply the content and they take care of the technical stuff for you, but you do not get to choose your URL and they get all the advertising revenue. They may also put annoying popup ads on your site. A free website will tend to give you slightly more control over appearance etc than a blog, which is little better than a glorified forum/bulletin board. Most sites give you a subdomain of the form www.yourname.hostname.com, where hostname is the name of the company hosting your site, and yourname is whatever you choose. I started out with a website like this for political issues relevant to recreational fishermen.

Buying a URL
top

If you want to start a ‘real’ website, the first step is to choose your URL (web address). It is worth taking your time to choose a good one, as it can be hard to find one that isn’t taken. I think I was lucky to get ozpolitic.com. The ‘brand name’ of a URL can be very valuable and it could cost you traffic if you decide to move somewhere more appropriate later on. A lot of potential URL’s are ‘parked’ which means that ‘speculators’ have bought it with the intention of selling it later for profit. If you get desperate you could always buy one. Alternatively, there are plenty of ‘extensions’ (eg .info) that have been created to give people or not-for-profit organizations access to cheap or free URL’s. If you hope to make money eventually, a .com or .com.au (or whatever your local .com is) is probably better as it is easier to remember, though you will have fewer options for short URL’s. I chose an American .com URL, even though this site is primarily targeted at Australians, because it is a lot cheaper than .com.au (less than AU$20/year). Hopefully it is also easier to remember.

Hosting services
top

The other cost you need to consider is the cost of hosting, which is actually more expensive than the URL. At the time of writing this site was hosted for just over AU$6/month. This can be shared between up to 4 different websites. The host stores the website files on a computer for you. The alternative is to host it on your own computer, but that would mean that it would have to be online all the time. More importantly, you would have to deal with hackers. Unless you really know what you are doing it is probably better to get the site hosted by someone else. The host does not own your site and you can move hosts at any time. The URL registration and hosting for this site was done through the same company.

Your next big decision is how to create your website. You can either write up the code yourself, or use software to create it for you. I went down the path of writing it up myself, but I wouldn’t recommend it for everyone. If you are comfortable with any other programming language, then html will be a breeze for you. But if you aren’t technically inclined you are probably better off going with software that will write the code for you (if that is the case you might as well skip the next few sections). Writing the html yourself gives you far more control and flexibility. It may take a bit more time, but you can create pages of the same complexity as any software package. In addition, the files will be smaller and people will be able to browse your site faster. No matter how powerful, a software package will always limit your designs by limiting your ability to take advantage of the full range of html capabilities. By simplifying the process, they inevitably limit your options. You may become dependent on the software package you use, which may become obsolete one day.

Programming philosophy
top

For those who are only familiar with html programming or who are not experienced programmers, I will start with some basic tips that apply to all programming languages. First, remember that you don’t have to start from scratch. Find something that is similar to what you want and pinch the code from that. So long as you modify it significantly and have a final product that doesn’t look the same, then you haven’t done anything illegal or unethical. Even if you did start from scratch, it would be highly unlikely that you would end up with something that is not very similar to another product (in this case a website) that already exists.

‘Stealing’ code
top

To ‘pinch’ the code from another site, got to view -> source and save the file somewhere. (Note that the instructions I give are for windows/IE systems. If you use a different system you should be able to figure it out. If all else fails look for the file in your temporary internet files.) Do a text search (edit -> find or ctrl-f) to find some text, then look outwards from there to find the code that controls it’s location and appearance. This is where you will probably see a problem caused by many software packages – they create a lot of useless code that is hard to understand. When I was creating the files for the Australian People’s Party section of this website, I wrote most of the files starting from the text provided by Stuart. However, I asked him to convert one of the later documents to html for me. He must have done it by getting MS word or some other package to convert a document to a html file. The file ended up being about 150kb in size. Not huge, but far bigger than necessary for a simple text file. I opened it up and deleted a large block of code from the header. This halved the size of the file without changing the appearance in any way.

HTML intro
top

If you are not fluent in html, or are a complete beginner, it would be a good idea to do an introductory course, even if just as a refresher. When I started out I knew some basics and had created simple web pages. I did the free course at http://www.w3schools.com/default.asp, which has ‘test areas’ where they give you some sample code that does something interesting and allows you to change the code and view the effect by clicking a button – this is more convenient than editing a text file, then switching to a browser and refreshing. Keep in mind that html is designed to create pages that can be viewed on screens of various sizes and resolutions, so the appearance of a page is not fixed. It is always a good idea to check how a page looks on different screens after you have finished coding. This can be done by altering your screen resolution (minimise all open applications and right click on your desktop, choose properties -> settings).

Offline development
top

When you get round to creating your own code, write it in notepad, with text wrap on (toggle this in the format menu). Have the same file open in internet explorer, and hit refresh each time you save the file. Make sure you specify a html extension when saving the file, and choose ‘all files’ rather than ‘.txt’ so it doesn’t add .txt to the end of the file extension. It may help to select notepad as the default program for opening html files. Do this by right clicking on the file, then selecting open with -> choose program and ticking ‘always use the selected program…’ before choosing notepad. This can be undone later.

Search, replace, compare, backup
top

I have already mentioned the text search feature in notepad. Most programs have the same feature. In addition, explorer (what you use to browse your PC if you have windows) has a handy search feature that allows you to search for files with a word in their name or containing certain text. This is handy for finding files in your temporary internet files folder, or where you have saved them on your hard drive.

As you write code, make regular backups. This isn’t just so you can go back to an old version if things go awry, it also helps you to debug (find errors). Get your hands on some software called araxis merge, or something similar (there is probably a freeware version available). This software allows you to open two files (say, your current buggy version and your most recent backup) and highlights the differences for you. You can then undo some of the changes (be careful you don’t lose your backup – it’s probably a good idea to create an extra backup of both files if you aren’t familiar with this process). Using this method, you can ‘re-implement’ the changes one at a time until you locate the one that causes the error. This is much better than guesswork for difficult problems. This method prevents you from ever getting ‘completely stuck’ on a bug.

Meta tags
top

So, now you have the basic tools needed to start building your own webpage, either starting from scratch or by modifying someone else’s code. Make sure you use the title tag as that specifies the name that appears in the task bar and along the top of IE. Use the description meta tag to improve your ranking with search engines. Make sure you use the keywords from the description as often as possible in the body. Finally, use the robots meta tag to encourage or discourage search engines from listing your site. An example of these tags (from the ozpolitic home page) are given below. Until you start using external style sheets (see below) this is all you really need in the header (<head></head>) section of your html files.

<title>Australian Politics</title>

<meta name="description" content="Australian Politics, Forum, The Australian People's Party, Global Warming, Green Tax Shifts, Electoral Reform, Sustainability, Gardening, Evolution in Education">

<meta name="robots" content="index,follow">

Creating multiple pages with a similar appearance
top

Most programming languages are designed for instructing a computer to do a series of repetitive tasks. HTML was not designed with this in mind, however it becomes necessary when you start creating a website with many pages. There are aspects of the appearance, as well as text and links that will be common to all or most pages. There are different ways of handling this, depending on whether you want to replicate content (text and links) or style (colour, font, background etc). Styles are dealt with via external (cascading) style sheets (.css files) and content via javascripts (.js files).

External style sheets
top

A lot of the old html tags, such as the font tag, have been ‘deprecated.’ While they will probably continue to be recognized, the new system has big advantages. It allows you to define ‘styles’ that can be applied repeatedly throughout your html document without repeating numerous specifications. These styles can be defined within the html code in a similar manner to the old font specification, in the header section of your html document, or in an external file. The external file is a useful option if you have multiple pages with similar features. You can specify fonts, background colours, background images, padding, borders, text alignment etc. Then, by changing a single file, you can alter those properties throughout every page on your site. The file extension is .css, which stands for cascading style sheet. This refers to the way that specifications within your code take precedence over specifications in the header, which take precedence over the specifications in your external style sheet. This means you can override some or all of the styles at a local level, on a case-by-case basis.

Java scripts
top

Java scripts are similar to C code and allow you to add ‘dependencies’ in your page. For example, you can make a greeting dependent on the local time of a person browsing your site. Though it was not their original intention, you can also use javascripts to handle content (text and links) that is repeated throughout your site. For example, the links down the left hand side of this page, the links in the header, the copyright text in the footer and all of the ads are specified in separate .js files, and each html file calls those javascripts. I can now add a link on the left of every page in this site by changing a single file.

You can encounter problems when you get javascripts to refer to other javascripts, and I am yet to come across a satisfactory explanation for this. It is probably something to do with the fact that this was not the intended purpose of a javascript. By using a javascript in this manner, you are effectively inserting more html code into each html file. There is an alternative way to do this – by using ‘server side includes.’ The key difference with this option is that the server inserts the code before the user downloads the files, so the user cannot tell that it is happening. This can harm your rank on search engines because there is a lot of ‘irrelevant’ code on your page, which reduces your ‘keyword density.’ Your site will also be slightly slower, as the code is inserted into each page, rather than a file that only has to be downloaded once.

I ran into this problem with ‘nested javascripts’ when dealing with the google ads, which have there own javascripts. I managed to work around the problem by not including div tags in the javascripts and by using a separate javascript for each google ad. The downside to this is that if I want to alter the order of the two google ads on the right of the page (the vertical ‘banner’ ad and the referral ad just below it), ad another google ad, or put something between them, I may have to change every single page for the site. The danielmcinnes.com ad at the top was added via a javascript and did not require changing each html file.

HTML to javascript conversion
top

There are several websites that will convert html to javascript for you, or you can do it manually.

Folders and local vs absolute referencing
top

When you start dealing with multiple pages, chances are you will have the same image appearing in them, and you will also start using subfolders. This is a good time to start using absolute references. An example:

Local: <img src="ozpolitic.jpg" alt="OzPolitic logo">
Absolute: <img src="http://www.ozpolitic.com/ozpolitic.jpg" alt="OzPolitic logo">

The files on this site that start with http://www.ozpolitic.com/gardening are contained in a folder on the host server called gardening, and also in a folder called gardening on my PC when I am doing offline development. Local referencing can be used to refer to files from a different folder, provided they always stay in the same relative position (for example, ‘go up two folders then look in the images folder’ would look like ../../images/ozpolitic.jpg). When you start having multiple sub folders, and sub-sub-folders, the relative position will not always be the same. This is true even if the image is called from a single javascript file, because the browser takes the position to be relative to the html file, not to the javascript file that it calls. For this situation absolute referencing is needed. This makes it harder to wok completely offline because the pages try to load images from the web.

The reference to the OzPolitic logo, and all the links down the left hand side and in the header at the top of the page, are all contained in javascript files that use absolute references, so that they will work from anywhere. The photos in the gardening section, which only appear on one page each, are referenced locally, directly from the html file.

Advantages of local referencing: easier, especially for offline development, html file and image can both be moved into a different folder without changing the html code Advantages of absolute referencing: multiple pages from different locations can include the same image or link via a javascript.

Shortcomings of html/css – tabs with curved corners
top

One of the most frustrating tasks I encountered was trying to get curved corners on the tabs:

The problem is that html only allows one background image. With .css files you can go a step further and have a background image for each section (eg, one for each <div> tag). However, this is still not good enough as four different images are required. The width of each tab varies depending on the amount of text it contains, so you cannot simply have one background image that contains all four curved corners. The height may also vary, for example if I decide to change the text font (or if a user’s browser does something different with the font). Apparently the next version of html or style sheets will get around this by adding a function to create the rounded corners. However this is likely to take some time to come into general usage. It also may not be flexible enough to handle all the different things people may want to do with multiple background images.

Eventually I came up with a technique that worked. I had come across vague references to it, but not anything that works. You will find the code for it in the header-xxxx.js files, where the xxxx varies depending on which section of the site you are in. Let’s take the example for the picture shown above. I will convert from the javascript back to html:

<li class="headerlink3"><a class="headerlinkleftlow" href="#"><span class="curvespace"></span></a></li>
<li class="headerlink3"><a class="headerlinkleft" href="#"><span class="curvespace"></span></a></li>
<li class="headerlink3"><a class="headerlinkcurrent" href="http://www.ozpolitic.com/index.html">Home</a></li>
<li class="headerlink3"><a class="headerlinkright" href="#"><span class="curvespace"></span></a></li>
<li class="headerlink3"><a class="headerlinkrightlow" href="#"><span class="curvespace"></span></a></li>

You can view the javascript files (eg header-home.js) and the ozstyles.css file by entering the following URLs into your browser:

http://www.ozpolitic.com/header-home.js
http://www.ozpolitic.com/ozstyles.css

If given the option, save the file to your hard drive and then open it in notepad.

The code above is a series of five list (<li></li>) tags. Usually you only need one for each of the links in the header, however for the ‘current’ section you need the extra four tags – one for each curved corner. Each ‘class’ statement refers to a section in the ozstyles.css file. The ‘headerlink3’ class tells the browser to put each list item on the same line, rather than creating the default bullet point list. Within each list tag is a link (<a></a>) tag. Only the central one contains a working link, with a class ‘headerlinkcurrent’. In the css file, this class is given the lighter background colour with the darker text. The other four link tags are included to make use of the references to classes in the css file. The four different classes: headerlinkleftlow, headerlinkleft, headerlinkright and headerlinkrightlow each specify a different background image. Each image is a small square with one curved corner. The curve is in a different location in each image and the background colour is light for the two central sections and dark for the outer two. The .css file specifies where to place the image – the bottom left, the top right etc. It also specifies the different background colours – light for the inner two and dark for the outer two – and the top and bottom padding. Finally, there is a span (<span></span>) tag within each of the four extra link tags. The ‘headerlinkcurrent’ tag specifies no padding on the left and right of the text. The span tags specify (via a class) the width of each section containing the curves, so that the two sections on each side of the text have the same width as the padding on the left and right of the other links in the header.

No doubt you are a bit confused by all this. I posted the actual code because I could not find a working example posted online anywhere and it took a lot of experimentation to get it working well. To try it out, copy the ozstyles.css file, the header-home.js file and the index.html file to a folder on your hard drive. Edit the relevant sections of the .css file on your hard drive until you get a feel for how it works.

Advertising
top

Even if your primary motive is advocacy or politics, you can still offset the cost of your site with advertising – if the cost is a concern for you.

At the time of writing, roughly 6 weeks after I launched this website, I had only made AU$1.09 from the google ads which are hosted here, via 9 ‘clickthroughs’. I have no idea whether this is a competitive rate as the income from each click is highly variable (from 2c to 40c), and neither google nor it’s competitors advertise rates. In any case, there isn’t much point to setting up advertising until you get a reasonable number of visitors. It may even work against you by putting people off and diverting traffic away from your site. Pop-ups should certainly not be used. By the time you get enough traffic to make advertising worthwhile, you may be able to attract enough interest to negotiate advertising directly. If you do decide to use google ads, please sign up for the scheme via the ‘referral ad’ under the vertical banner ad on the right of this page, so that I get a kickback (it won’t affect your earnings). One advantage that google (and the competing schemes) have is that they can negotiate ‘targeted ads’ based on the content of each page on your site. Businesses bid competitively for ads on your site (or more likely, on sites that contain certain key words) and can also bid based on the location of your visitors, so a visitor in America sees a different ad to one in Australia. All this means higher rates from advertisers who wouldn’t normally bother talking to you, though google obviously gets a big cut.

Forums and spam
top

You should get easy access to forums, blogs and many other features through the control panel provided by your hosting service. These can be installed at the click of a button. If you don’t have such access, there are plenty of freeware packages available that you simply upload onto your site. I do not have enough experience with these to recommend any in particular. The yabb forum here works fine, but they have not got a good anti-spam package yet. I suspect that spam is a fairly new problem on yabb boards. In any case, it sounds like the next version will have good functions for reducing spam, and there are plenty of hacks for reducing spam on the current version. I have recently added a hack that creates an error when new members or guests post URL’s. I have had no spam at all since.

RSS feeds
top

For some reason it is very difficult to find online how-to guides for displaying RSS feeds. Most of what you will find explains how to create feeds for others to display. I will explain here how to set up feed displays such as what you see in the news section of this site. That is, where you display feeds that someone else (eg a newspaper) has created.

The first and easiest option is to go with a free feed displayer. There are plenty of sites that do this (google free javascript RSS feed displayer), but I can't recommmend any because I decided pretty quick to go with the second option. If you go with the first option, you copy and paste the URL for the RSS feed into the appropriate location on the free feed generator site, then select a nice display. The URL is given on the newspaper site or wherever you want to get the feed from. Just click the little RSS logo when you see it. If you follow the link it will look like a heap of code (normal anyway). Once you've pasted this URL in, the site then gives you a very short piece of javascript which you include in your html file. That's all you have to do. The downside is that you are dependent on the other site to provide the feeds for you. They always include a link to their site at the bottom of the feed. Finally, while the display options they give you look fancy, they will probably end up being restrictive.

The second option is to upload some free code onto your site that gives you complete control over what goes on. You need PHP working on your site for this. Most hosting packages include this (PHP) as a standard feature. I haven't seen a really simple set-up for this, so I put one together myself. It will set up some feeds just like the news feeds on this site - or at least, the early version of it. Obviously you will want to change it later, but it helps to get something up and running first as you can't test this stuff offline (that is, I don't know how to test it offline). Start by downloading this zipped file. Copy and paste the URL into your browser and it should give you an option to save it locally.

http://www.ozpolitic.com/articles/rss_feed_display.tar.gz

Extract all the files, keeping the folder structure, then upload them onto your site so that the file news.php is located at www.yoursite.com/news/news.php (you can change this later). Navigate to the news.php file, and the feeds should work. It's that simple. If it doesn't work, you may have to change the write permission on the folder news/RSS/templates_c. Your hosting control panel should have this option somewhere. If you are getting errors and that doesn't fix it, try getting the latest versions of the software (as appropriate for your version of php), as described further below.

Now, you are likely to want to change a few things, so I will run through how to change the location of the php file, how to change some of the file and folder names, how to get the latest version of the software used, and how to change the feed layout. Note that the appearance will be different because I have not included the css and javascript files that do all the formatting for this site, so you might as well just get rid of the code for that in the news.php file.

To change the file location, move the entire news folder, keeping the file and directory structure under it the same. Then, change line three of the php files in /news/RSS (eg feed-left.php) to reflect this. That is, change

$mydir = "/news/RSS";

to

$mydir = "/newfolder/newsubfolder/RSS";

where the news.php file is in newsubfolder.

It's the same story if you want to change the name of the 'RSS' folder - just change the last folder name on line three. You can change the name of news.php file without making any other modifications. If you change the name of the php files in the RSS folder (eg feed-left.php), you need to make the corresponding change in news.php. Do not alter the name or layout of any of the subfolders under the 'RSS' folder (unless of course you figure out how to, but there's not much point as users do not need to navigate there).

The overall layout of the news feed, that is, the two columns shown, is controlled by html code for tables in news.php. Within each feed, the layout is controlled by code in /news/RSS/templates/itemlist.html. To change the number of items displayed in each feed, change 'loop=5' to whatever you want. To display all the available feed items, change it to 'loop=$items'. If you are familiar with html, you should be able to figure out how to adjust the borders etc around each section.

The two items of freeware used by this package are magpierss and Smarty. Once you get the hang of things, you are probably better off getting the latest versions of these packages by searching online. Download and unzip them, then upload them to your site under the 'RSS' folder. You can remove everything that was previously under the magpierss and Smarty folders if you tried the sample setup I gave above. Make sure you remove the numbers from the magpierss and Smarty root folders, so that they are /news/RSS/magpierss and /news/RSS/Smarty (eg change magpierss-0.72 to magpierss and Smarty-2.6.12 to Smarty). If you want to start from scratch, all you will need is the latest versions of these two packages, plus three more files and four more folders on your site. So, upload the latest versions to www.yoursite.com/news/RSS/ keeping the supplied folder structure, then create the following additional folders: /news/RSS/cache, /news/RSS/configs, /news/RSS/templates and news/RSS/templates_c. You may have to change the write permission on templates_c. Try it as it is first then if you get errors look there first. Finally, you will need three more files to display some content. I will give you simple examples rather than the 'complete' package avaialable above.

First, create the file /news/RSS/templates/itemlist.html with the following text as content:


{* very simple template for a table with RSS items *}
<table>
{* Show the feed title as a header in the first row of the table *}
<tr><th style="font-size: 24px; border: 1px solid black;">{$feedtitle}</th></tr>
{* loop through all items and add date, link, title and description in the follwing section *}
{section name=x loop=$items}
<tr><td class="rssitem" style="border: 1px solid red;">
<strong>{$items[x].pubdate}: <a href="{$items[x].link}" target="_blank">{$items[x].title}</a></strong><br>
{$items[x].description}
</td></tr>
{/section}
</table>
{* That's it. Table can be formatted using some CSS classes *}


Then, create the file /news/RSS/feed.php with the following text as content:


<?
/* The folder where this file is located. Change to whatever you need */
$mydir = "/news/RSS";

/* Include magpierss and Smarty library */
require_once($_SERVER["DOCUMENT_ROOT"].$mydir."/Smarty/libs/Smarty.class.php");
require_once($_SERVER["DOCUMENT_ROOT"].$mydir."/magpierss/rss_fetch.inc");

/* Create a template object for further use */
$tpl = new Smarty();

/* Set folders for Smarty object. This folders have to exist on your web server (Check A.3) */
$tpl->template_dir = $_SERVER["DOCUMENT_ROOT"].$mydir.'/templates/';
$tpl->compile_dir = $_SERVER["DOCUMENT_ROOT"].$mydir.'/templates_c/';
$tpl->config_dir = $_SERVER["DOCUMENT_ROOT"].$mydir.'/configs/';
$tpl->cache_dir = $_SERVER["DOCUMENT_ROOT"].$mydir.'/cache/';

/* The URL of the feed we want to include */
$url = "http://rss.news.yahoo.com/rss/world";

/* magpierss does all the work! */
$rss = fetch_rss($url);

/* Uncomment the following line to see the object and array data returned. Good to see which other information has been processed by magpierss */
// echo "<pre>"; print_r($rss); echo "</pre>";

/* If the RSS could be parsed, add it to the template */
if ($rss) {
/* Sends the feed title to the template engine */
$tpl->assign("feedtitle",$rss->channel["title"]);
/* Sends the RSS items as an array */
$tpl->assign("items",$rss->items);
}
else {
/* RSS problem? */
$tpl->assign("feedtitle","Problem with: $url");
}

/* Fill the template file itemlist.html with the information and return it */
$feedhtml = $tpl->fetch($_SERVER["DOCUMENT_ROOT"].$mydir."/templates/itemlist.html");
/* Do with $feedhtml whatever you want */
echo $feedhtml;
?>


Finally, create the /news/news.php file with the following text as content (you can add more html around it):


<table>
<tr>
<td width="50%">Left column with some information</td>
<td>Right column contains the feed<br /> <? include "rssdemo/feed.php"?></td>
</tr>
</table>


Displaying html code
top

In the example above I showed a lot of html code. If you type that code into a html document, it will try to execute the code rather than displaying it as text. To get the text to show, you need to replace every < with a special character: &#60;. So paste the text into a new notepad file. Go to edit -> replace and replace every < with &#60;, then add <br /> to the end of each line, including blank lines. That's it.

Transferring between hosts
top

What I learned the hard way, or stuff the standard guides to transferring hosts don’t tell you.

There are plenty of guides to transferring hosts floating around in cyberspace. They are very useful, but contain pretty much the same information and leave out some things that I consider important from hindsight. To start of with, the basics are:

Find a good host.
Backup, backup, backup.
Get your new account set up.
Test your new account thoroughly.
Warn your users about potential downtime etc.
Set up your MX (email exchange settings) on your new host if necessary.
Change your DNS settings.
Cross your fingers.

Find a good host.

I went with the cheapest host I could find that gave me everything I need with plenty of room to expand. The company was based in a very different time zone. Maybe that's why it took them so long to get started, but don’t assume your new host will be any better just because you are paying more. The cheapest way to do this should be for it to happen automatically. So my first bit of advice is not to wait until your old hosting account is about to run out. Most guides say you need 48 hours for DNS propagation and that you should allow 4 or 6 days to make sure. Add two weeks onto this figure for your new host to realise you are a customer, set up your account, install all your files, then fix the inevitable server errors before you do the DNS changes. Add another week for asking around for references to good hosts. I found mine by word of mouth, not google (actually, on the support forum for my forum software). So, get started at least four weeks before your old account runs out. Remember, the squeaky wheel gets the grease, so make sure you keep hassling the new host if necessary. The changes you require are necessary and they would have to do it at some point anyway.

Get your new account set up.

If both your old and new hosts use cPanel, do a full backup, upload it to the top directory in your new host, then ask them to install it from there. Do not try setting stuff up yourself so you can test it, as this just confuses them (I don’t see why, as they created an entirely new cPanel account for me at this stage). Maybe you should offer the file to them before they set up your account. If not, try to move the backup file directly between hosts using cPanel rather than downloading and uploading. I got this to work once by trying to use the 'restore home directory' function in the cPanel backup facility, but using a full backup file still located on the old host server. The restore function did not work, but the file got transferred. CPanel changed the file name and dumped it in one of the upper level directories. Change the filename back to the original name. You can probably also transfer the file directly by Using the cPanel file upload function, but pasting the URL in where the local path goes. Note that you have to shift the backup file to the public directory on your old host for either of these options to work. Make sure you move it back to an inaccessible location afterwards in case it contains sensitive information.

There was a server error on my account after they set up my files. I tried submitting a ticket, which got a response indicating the problem would be fixed soon. A few days later, with time running out, I happened to check their site when live support was online. They didn't seem to understand that you can test the site while it is offline. Then they said they weren't allowed to edit their hosts file (only the admin can). They wanted me to change my DNS settings, even though the new site wasn't working at all and hadn’t been tested, so that they could debug it after it came online. Maybe this was because I was already asking for a refund and threatening to buy another 12 months with my old host. Luckily I refused and they came back with the other offline testing method (see below). The problem was fixed shortly after.

Test your new account thoroughly.

There are two ways to test your site while it is offline:

The 'shortcut' way is to use a URL like this: http://IP/~username/, where username is the login name your host gave you for cPanel and ftp transfers. For example http://89.67.45.123/~ozpolitic/. You can get the IP address from cPanel or the email the host sent you. If this doesn't work, ask your host as they may use a variation on this theme. Note that navigating your site will tend to take you to the online site if you use absolute URL's, so you need to edit the URL directly to keep the IP address in there. This is not very useful for extensive testing.

Alternatively, you can change your local settings. This only worked on one of my PCs, probably due to a firewall or security setting of some sort. Open your hosts file. For most windows users, this is at C:\WINDOWS\system32\drivers\etc\hosts. The file has no extension, so open it with notepad. Add the following lines:

# new host: #89.67.45.123 ozpolitic.com
#89.67.45.123 www.ozpolitic.com
# old host:
#123.123.45.45 ozpolitic.com
#123.123.45.45 www.ozpolitic.com

To view the new site, remove the # symbols as follows:

# new host:
89.67.45.123 ozpolitic.com
89.67.45.123 www.ozpolitic.com
# old host:
#123.123.45.45 ozpolitic.com
#123.123.45.45 www.ozpolitic.com

To view the old site:

# new host:
#89.67.45.123 ozpolitic.com
#89.67.45.123 www.ozpolitic.com
# old host:
123.123.45.45 ozpolitic.com
123.123.45.45 www.ozpolitic.com

You may need to close all browsers or open a new one for the changes to take effect. Make sure you delete the extra lines when you are done, or you could end up forever stuck at the old site.

All of the databases worked well after the new host set them up for me. Luckily, they weren't very active so I didn't need to update them again with recent changes. My one early attempt at ‘restoration’ of databases from a backup did not work. The only non-server error I encountered was on a perl based gallery, which required the absolute path to files. I couldn't find the new root directory name. The gallery help suggested using debug mode to find the path but that didn't work. I found the path by editing a file in cPanel. CPanel shows the absolute path at the top of the page during editing.

Warn your users about potential downtime etc.

I provided a lot of information, including the above instructions for checking the old and new site. Maybe that was too much and just confused people. I didn’t notice anyone switching between hosts.

Set up your MX (email exchange settings) and/or other email stuff as necessary on your new host.

This was one of the first support tickets I submitted, but they didn't get around to doing it until after the DNS settings were changed. I think your mail will always end up somewhere accessible, such as on the email program that came with your hosting account.

Change your DNS settings.

I had the new site working well, but I was running out of time so I changed the DNS settings before copying over the most recent posts to my forum. There was a large number of new posts due to the several days it took the new host to fix the server error. This is where the learning curve got a bit steeper. The first thing I learned was that most users got directed to the new host almost immediately, so I didn't have the lag time I expected to copy the posts over. This may have been because we are from the same area.

The second lesson I learned was that downloading and uploading via ftp takes a lot longer when you are watching it happen. I think it would have taken about 10 hours to recopy the entire public_html folder. So, copy the critical folders first (forum and yabbfiles for a YaBB forum). Or better still, do a full backup and direct transfer as described above in setting up your new account. Put the .tar.gz extension back on then get the file manager to extract it. Then, move the public_html directory and replace the 'old' one.

The third lesson was that both servers only displayed the first 2000 'entries' (files and subfolders) in a folder to an ftp request. Even if you download the entire folder, only the first 2000 get copied. This is another good reason to use the backup facilitiy instead of ftp and unpack it on the new host’s cPanel. I got around this problem by temporarily moving the first 2000 files into a subfolder, then copying the next lot of files to show up.