How to build and host a website for free - 1

Part 1 - Your Website ... The Big Decisions

Decisions to make
Creating a site
Flat and dynamic sites
Domain names
 
Websites
Lots of people need to have a website now, but apart from "What will it cost?", there are two major hurdles to get over first:
- what's it all about and how do I do it?
- where do I find all the kit I need?
OK, well, we'll try and distill a ton of knowledge into a very short space here. It can't be that short, though, 'cause it took about 10 years to learn it!
 

Is it really free?

You can build, host and run a site entirely for free, no matter what type - even giant CMS (content management system) sites. Of course there is a catch - you most likely won't get hosting that is absolutely ideal in all respects, especially traffic bandwidth, or maybe with the right URLs (page addresses) due to restrictions, but that's all. Apart from that, it really can be done.
However, let's be honest here, the 100% free route is best for small sites without a commercial agenda. A business site needs paid hosting - but the free version is fine for many types of basic sites. And of course, you can try out your site building capabilities, and whether the host is any good, before paying up.
 

How it all works

1. Buy a domain name
2. Arrange hosting for site
3. Build a site on your PC, upload it to the server -OR- install website software on the server
4. Open champagne
Firstly - how to build your website (we look at how to buy a domain name further down the page).
You can create a website on your PC then upload it to an Internet server. Alternatively, you can install software on a server that does the whole lot for you. But you still have to write the content though :)
Servers are rented out by hosts, aka a web hosting provider. Although most people choose shared hosting, you can also find free hosting. There are always restrictions of some kind, so it's not optimal - but these vary between the different free hosts, so you may well be able to find one that suits.
Shared hosting is the normal type of deal, and it's where there are 50 other sites or more on the server. The less sites the better, as the server slows down with a lot of sites on there as you might expect. You can get paid hosting from $50 (£25) a year and up, but high quality hosting - which means servers limited to a maximum of 50 sites - starts around $150 (£100).
Otherwise, hosting at around $70 - $100 means maybe 200 - 300 sites per server, and free hosting and up to $60 a year may mean thousands of sites per server. For example I checked a server at GoPappy (or similar) and there appeared to be 3,400 sites on it. This is OK for many types of sites (especially HTML sites), but not ideal for business sites run off a database.
A new site doesn't need to worry too much about this, you can always move to better hosting later on. You don't lose anything in any respect by moving hosts.
 

Creating your website - the decisions

Firstly you need to make some decisions -

• is your site going to be easily classified as, for instance, a family home page, a club site, a blog, wiki, forum, or CMS (complicated stuff) type?
• is it going to be 4 or 5 pages, or 50-plus?
• are you going to do it all yourself or hire people?
• is it going to be a temporary site, maybe for an event, at minimum cost?
• do you want it to earn money in some way?
• will it be a shopping cart / ecommerce site?

It's best to know exactly where you're headed for, otherwise things get messy later. If it's a simple site with a few pages and no complicated functions, then a standard HTML site is indicated - that's the usual type with ordinary web pages that exist on the server. You can also go this route with temporary sites for one-off events.
If it's anything else, you would probably be better off with a database-driven website like a blog or a CMS (content management system). This applies especially if you have any commercial intentions. Any site with over 50 pages should use a CMS of some kind unless there are very good reasons not to - and there are plenty of people who would take that number right down to 10 pages, including me. And maybe lower - a micro-cms is just fine for those jobs.
 

Flat sites

A flat site is an HTML page one, that you build on your PC with something like Kompozer or Dreamweaver. It's called 'flat' because it has static pages that don't change once they're built. You upload the pages to the server and it hands them out when requested.
Images such as photos and graphics come from the folders on the server that you uploaded them to. These folders are called directories, but they are the same thing.
The advantages of an HTML site are:

• it's very simple
• you can have precisely the page design you want
• it only takes up a tiny amount of web space
• it's fast on the server
• badly-run servers will still be OK with a straight HTML page website

The disadvantages are:

• someone has to hand-code it
• to edit a page you must do it locally in a visual or code editor then upload the page
• page code changes are not always easy
• it has very limited functionality
• nothing too adventurous is going to be attempted, unless you get a developer in (aka a coder or programmer)
   

Dynamic sites

These run on a database (DB) and the pages don't exist, they are built on demand by the web application on the server, which gets the info from a database. This is the type of site construction that many modern sites use now, and probably most websites with any kind of commercial or advanced functionality will use in the future. Even sites that look fairly simple on the surface use databases now, and some sites, like forums and ecommerce, can't really exist without database-driven functionality. Examples of this type of site are ecommerce, CMS (content management systems), and blogs.
Advantages:

• no coding to do at all, even for the most complex sites, it all works out of the box
• functions / features are added quickly with plugins
• will handle the most complex tasks if someone did that before somewhere (a plugin will be available)
• templates are used for page layout, and they can usually be changed
• building a 1,000 page site is no harder than a 10-page site, the machinery generates the page structure
• menus are created automatically
• all links everywhere are adjusted every time you make a change, there are no dead links
• page edits are done live online via your browser, and they go live immediately

Too many advantages to list, in fact.
Disadvantages:

• needs more webspace than a flat site
• needs a database, usually MySQL
• often needs a better class of host, as servers with old and outdated software and/or poorly set up servers will work OK for HTML sites but not for dynamic ones
• security becomes an issue because there are a lot of attack vectors for these webapps, as against HTML sites
• there is a steep learning curve for newcomers
• to make the templates unique to your site, you need to be able to do basic coding (HTML and CSS)

But in general you will probably know which of these two main classes of website you are going to use. A small and simple site is best created as an HTML site. Also, a site with a complex and different artwork-based layout on every page will need to be an HTML site (or one of its close variants such as PHP or ASP).
Anything else is probably better off as a dynamic site, ie a DB-driven one. This applies especially to a wiki, CMS, forum, shopping cart / ecommerce, membership, directory, or blog website as these can't really function properly without a database.
There is another class of webapps which is dynamic but doesn't use a 'real' database - the flat-file database apps. These are wikis or CMS etc that use a flat-file as the data source, this is a type of text file located among the normal web files. These apps do the job for smaller dynamic sites that don't have a big agenda, and do it very well. They have less functionality but often that isn't a problem. They are excellent for use on a poor server, or one without a database (same thing really), or one where the account management is restricted.
Examples: SkyBlueCanvas CMS, PMwiki.
 

Choosing a domain name

A domain is the title deed to run a website under that name. It's exactly the same situation as with a house, the title deed is the main thing - not the website, which like a house, is just something parked in that space, and that can be rebuilt if needed. But you can't do anything without the domain, and if you lost it, you'd be pretty well sunk - you'd have to start from scratch. In addition, your domain name can help or hinder you to a remarkable degree, especially for a commercial site.
For these reasons I advise you to think long and hard about your domain name. It will cost you $8 a year to rent but it's worth an inestimable amount more. Once you 'buy' it, it's yours to rent indefinitely, unless you let it lapse.
There are only two realistic choices for a commercial site - a .com domain, or the one specific to your country such as .co.uk for the UK, .ca for Canada. Most sites need to buy both, but trade under the .com domain. There are other choices like .org for a non-profit, .edu for academic resources, but let's assume that this doesn't apply here.
Don't buy a cheap domain because it will cost you a lot of money (unless you're talking about a family site, then it doesn't matter). For example you should avoid a .info domain as these were sold for 60 cents at one time to dump them - and they're still cheap in places - so spammers bought millions of them to 'churn and burn', which means to put spam sites on that would probably be discovered and then banned by search engines, while the spammer built another dozen to replace it. So '.info' means 'cheap rubbish' to a search engine, unless and until proven otherwise. You don't want that, search engines are a site owner's best friend.
Domain name choices
There are two choices - a 'search term' domain or one that takes your fancy. The first type is created to score highly for searches in your chosen niche, so if you're blogging about techno-garage music you pick 'techno-garage.com'. Easy.
Trouble is, the best ones all went years ago, so you have to get a bit creative. Just choose a name that includes whatever people are searching for in your space, add something else if you have to, and break the words with hyphens. Don't get clever or people won't find you.
So for our music blogger, if the first-choice name has gone, we'd maybe pick 'techno-garage-music.com' or something. If you do this, then when someone searches for this material your site is placed higher in the results, as it's more likely to be relevant. And if their search is for *exactly* the words in your domain, this is called an exact-match domain, and you can get right to the top even if your site otherwise rates at #50. This is due to the search engine having to put you up there in case the searcher is looking for your specific site.
Or, you can just choose a name that sounds good to you. This can be a good branding exercise, in that you pick a name that has the vibe you want. Whatever you do, don't choose very long names, or names with tricky spelling. Keep it simple. The best marketing names are simple and easy, like Omo, the soap powder. Chucksbestbarbecueribsandsupplies.com is a mistake. Here's a good example of a successful working domain: picture-research.com
- because it's a search term, it's an exact match, it's easy to remember, and it sounds good for an enterprise.
Go to:
www.namecheap.com
...and create a free account there. This is the best domain name registrar I know of. Their reputation and facilities are superb and you will find the best control panel in domain management there. Actually their prices are nowhere near cheap :) , but you get quality instead.
Login via the *secure* login, so that traffic between you and them is encrypted (in the browser address bar you should see https:/ and not http:/). Research the available domains and buy one or two. Set up the free WhoisGuard identity protection on them, it cuts out spam and other approaches. Do not use spoof names and addresses if you intend that your website has any value - Namecheap are to be trusted (unlike some domain registrars who unfortunately I can't name here), and they handle the business of many major concerns. Note that you should have the site operator's name and address on the website - domain ownership name protection is a different matter.
Otherwise, if you're just dipping a toe in the water, you can get a 'free domain name' at one of the free hosts. It looks like this:
yourname.freeh0st.com
It's not a real domain, it's a sub-domain, and you can't take it with you - it's just a folder on their site. But if this area isn't of much concern to you, if you are putting up a temporary site at minimum cost - it's just fine. Likewise the el cheapo domains like .co.cc and so on. It's OK if you are happy that your business looks to be working out of the Cocos Keeling Islands :)
NEXT:

How to build and host a website for free - 2

Part 2 - Building a small site the easy way

First steps
Let's start with the assumption that you're going to build a simple site with a few pages for your family, or a local group that has a fairly simple agenda. In this case we can use the normal web page type of site, and there'll be maybe 10 pages or less. This will be what is called an HTML site / a flat site / a hard-coded site / a hand-coded site.
As we saw in Part 1, you will need to do these things:
- buy a domain name
- choose a web page editor
- build the site
- choose a host
- upload the pages to the server

Web page editors
These come in two basic types: text code editors (aka HTML editors or raw code editor) and visual (aka wysiwyg) editors. Visual editors are what most of us use, including me - I build the first stage in a visual editor then adjust the code in an HTML editor - and a what-you-see-is-what-you-get editor is just fine for now.
There are two types of these: the popular type like Kompozer (free) and Dreamweaver (commercial), which can all work with HTML files - and the one-way rapid layout type like WebDwarf (free) or SiteSpinner (commercial), which work in a proprietary code then export to HTML, but cannot import or work with HTML pages.
In addition there are online versions of the visual type that are normally called sitebuilder apps or something similar.

The 2 easy ways to build a web page
Here's my take on this: the single hardest thing for any newcomer is laying out a web page so that it looks like what you want, and the bits go where you want them and stay there.
This is so difficult for a newcomer that I cannot even start to recommend a visual editor of the Dreamweaver or Kompozer type, unless a template solution of some kind is used - otherwise you'll simply spend days trying to get the tool to work. And your page still won't look how you want, because your aspirations will be handicapped by what you can do with the tools. You'll know exactly what I mean if you ever started on a website and just gave up because it was too difficult - and that applies to tens of thousands of people.
You really don't want to go this route because it might put you off websites for ever.

Easy method 1
However, as stated, if you use pre-built templates then it is much easier. It works just fine, if you can find the template you need. Search 'free website templates' and you can find plenty of resources.
Online and host-supplied template site-builders work in exactly the same way, you pick one then add your content. Again, this is fine if you like what's on offer. Their template entirely determines what your site looks like. The advantages are that you get your site up fast, and the design will be OK - in contrast to what will happen if you try to go it alone the first time. The disadvantage is that you may need to search for a time, to find a template that is acceptable to you.

Easy method 2
On the other hand my preferred method is to use a rapid-layout app because that way you get exactly what you want, without the layout hassles. You can layout a page exactly how you want almost immediately, and move anything anywhere instantly. There are none of the issues that you have with Kompozer, for example, trying to get stuff to stick on the page where you want it. But the fast layout apps have two disadvantages: they are one-way only, they work in a proprietary file format and then export to HTML - you can't tweak an existing page, you can only rework the master file and then re-export it. And also you have to design the page yourself, there are few templates for use with these apps.
Nevertheless, this is my preferred solution. One you can try is WebDwarf, which is free. The best commercial version that I know of is SiteSpinner. These applications export to HTML based on divs and CSS, which is a layered, vector technology that is now recognised as the best (and now of course the only acceptable) system. They did so years before Dreamweaver had cottoned on to this, and was still using tables for layout. Table-based layout is the old, 90s-era method, that is now long superseded except for tables of data.
WebDwarf is a free version of SiteSpinner and is still developed, CoolPage is similar but ceased being supported in 2002, though it is still viable for specialist use. WebDwarf validates to HTML Transitional but not Strict, meaning that it is not of the highest quality but acceptable for our purposes.
My easy web page build method is quite simple: build the page in a rapid-layout app, then clean it up in a text code editor. In your case you will use a simple visual editor like Kompozer for this second stage.
As it's not easy to find a quick review of webpage editors from someone who puts usability as the #1 feature for any tool anywhere, and a review having the potential to save you you a huge amount of grief, I figured I'd oblige. ==>
Dreamweaver
One of the best web page editors. Does everything - visual and code, layers or table-based, HTML / PHP / ASP. Extremely hard to use for the beginner, like Photoshop, but probably even harder to get the result you want. Good for improvers, very good for experts. Much of the benefit comes from all the add-on features, like the very good validation tools.
SiteSpinner
Another of the top apps. Was using the current code layout system of divs and CSS a long time before Dreamweaver. A one-way fast layout program with capabilities similar to Dreamweaver, but far easier to use. Builds the same page in about a tenth of the time it takes in Dreamweaver, as it works in real code and with layers. The page is output to .ims format, which is then exported to HTML.
Frontpage
Microsoft's venerable web page editor. Was a good tool in the 90s when pages were built with cells and tables - very low quality by any modern measurement. Produces poor-quality code, with low accessibility and code validation scores. Using it with Frontpage Extensions on a server provides hackers with lots of nice attack vectors. Hard to lay pages out correctly until you learn its ways (like many web editors though). Frontpage-created websites are often crude, due to the restrictions imposed by the creaking method of page construction using cells. RIP!!
NetObjects Fusion
Another one-way app. An alternative to SiteSpinner, but on balance SS is better. In theory NetObjects can read / import HTML pages but you need to see the result - 'not usable' is a polite description.
CoolPage
One of the leading layer-based web editors back in the day, around 2001, this is one-way quick layout app was maybe 5 years ahead of most other apps. Developed by a brilliant coder who was years ahead of his time, this is the fastest of all web editors - you can layout a complex page in a couple of minutes, to pixel-perfect positions, with anything wherever you want. However there are numerous drawbacks to this program now and I certainly don't advise you to use it, it's a fascinating example of what could have been if it had sold and was still supported. The code isn't good now, it's old HTML, upper case, validates to HTML Transitional with a little work. Not for use except by experts who can clean up the resulting code - but the best there is for concept layouts.
Kompozer
This is an update of Nvu, the open-source web editor which ceased being supported. Kompozer is also not one of the busiest projects. It's basically a simpler version of Dreamweaver - you'd use it if you like that style of working but don't want the complexity. Not a bad editor in this style. For novices, its best use is for adding stuff to a page created in a basic rapid-layout app like WebDwarf. You can build a page fast in WebDwarf, export it to HTML, then touch it up with Kompozer.
MS Sharepoint Designer
Lots of arguments about whether this is a valid choice or not as a web editor. Some say it can only be used within the Sharepoint system (and this seems to be Microsoft's stance), others that it's OK, and yet others that it somehow caused system problems and had to be uninstalled. Given the latter I think this one is best avoided, since there are plenty of alternatives.
There are also of course a very large number of other choices in free web editors - check out the page on this site:
Best Free HTML Editor
I'm not familiar with the editors on that page so perhaps one there is a better choice than the one I'll suggest for you. You need to ask two important questions though:
1. Can you lay out a page fast with it?
2. Does the code validate?
These are the crucial issues with web editors now, due to real-world requirements that include time constraints and commercial results. If the answer is no to both, then I think it wise to look elsewhere. The ideal web editor builds a page very fast in rapid-layout mode, and the resulting code validates to a Strict doctype (a Transitional doctype is basically a bodge-up that puts a browser into quirks mode). The only one I know that complies is SiteSpinner, though since this isn't my game any more (I only work with CMS and ecommerce now), I can't state this as fact.
WebDwarf
The free version of SiteSpinner, this is the web page editor I advise if you're interested in usability. For me this is vital as I just want to lay the page out quickly and get on with other stuff. It's a one-way app that doesn't work in HTML, it builds the page in a proprietary code (.ims) then exports it to web format. This is a fast way to build a page that has a lot of advantages over the Dreamweaver type that only work in HTML native. The problem with native HTML apps is that you can't really do much in HTML, it's a pig to work with and very limited - much better to work in real code and then export it. However, this means you can't import and work with a web page.
Download WebDwarf

Build that site
Let's go ahead using WebDwarf. We'll build a small, simple site, and upload it to our chosen host. You'll need these basic pages:
1 - the index page, aka front page or home page
2 - some 'inside' pages with your desired content
3 - an About Us page, with your name & address, and what the site's purpose is
4 - a Contact page, with quick-contact details such as your email and phone number
5 - a Links page, for weblinks to other useful sites, and for building reciprocal links
6 - a TOS page, with your terms of use for the site and any conditions, copyright etc
So you can start with 4 to 6 pages or so, and that will do fine. But note: if you are definitely going to have 10 pages or more, don't use this method - I advise you to use the micro-cms method we will look at later on. It's far less painful and it's the modern way. In the hands of novices (of course it's different for experts), the HTML page method is suitable for very small sites with a limited agenda.

Local site folder
You need a folder for your local site, ie the master files on your PC. Create a folder within My Documents or wherever else you think best, and call it 'website' or whatever. Inside it create three folders: html, gfx, and master. These folders hold the web pages, the graphics used, and the master files or source materials.
Set up WebDwarf to open in and save to the master folder. We should start with the index page or index.html - this is the filename of the front page (and is always this name or a close variant). I advise you to use the .html file extension, out of the possible variants such as .html, .htm, .php, and .asp.

Building pages
How to actually build pages and link them is really the subject of another tute, in Part 3. For now - just experiment. An outline of what you need to do is as follows: in WebDwarf, create your first page either from scratch or by using a template. I recommend the latter for your first-ever page, using one of the templates they provide, or simply by modifying the start page they give you.
Save the page as 'master' (the page filename). Use it as your own template, and build all your pages from it as a master layout guide. After making this basic page, you'll use it as the basis for all the site pages. So:

• save the master
• export to html
• view the page and check it
• create a template
• build more pages