How this website was made.
I’ve always been puzzled by the fact that although new technologies allow for, and indeed often preach, the free sharing of information and transparency of seemingly complicated processes, that I’ve not been able to track down a properly step-by-step idiot’s guide to making a website. I often wondered that if one of these were available then would it prevent the extortion that occurs quite regularly of artists by web designers who charge upwards of £100 a day for doing something that can easily be learnt oneself?
In an attempt to help rectify this I have produced in the following paragraphs a step-by-step guide written by an idiot – me – explaining how I went about setting up this website. I hope it’s useful but please don’t sue me if it blows up your computer or erases large chunks of the internet.
1. Buy server space and domain name.
In order to have a website that isn’t a blog or wordpress (which are great free options) then you need your own webspace. I got mine from http://www.dreamhost.com/ (look in 'web hosting' in the 'hosting' section). You can get a cheap package that includes a domain name for something like $10 per month. It’ll give you plenty of space and all the support you need to run the software below. A domain name (e.g www.andyabbott.co.uk) is included in this which will automatically point to the server space.
2. Website building application.
Unless you want to learn lots of html code then you might, like me, prefer to use some readymade website building software. Indexhibit is free and means you have something that feels somewhere between making your own website and maintaining a blog. Go to http://indexhibit.org/ and look in downloads section and download Indexhibit CMS v0.70e which is the first thing on the list. You want the plug-ins also (especially the horizontal exhibition format one) but they aren’t essential.
3. Installation of Indexhibit.
This bit is quite complicated and luckily they have a ‘guide for dummies’ on their website: http://indexhibit.org/help/installation-for-dummies/. If you follow this you will be guided through some of the steps above and also get a FTP client application. I use Cyberduck. The info you need to log on to Cyberduck is provided to you in an email from Dreamhost when you set up your account with them.
The bit that is still left unclear even in the Indexhibit guide is the exact info you need from the server client (Dreamhost in this case) to finish the installation. It isn’t just the username and password you use to manage your account; you have to set up a new ones relating to a ‘mySQL database’.
What I did was go to the Dreamhost main page. In ‘Goodies’ choose ‘mySQL database’. At the bottom of this page you can create a new mySQL database. Choose a name for the database – something like ‘andyabbottwebsite’ – and then create a NEW username and password for specific access to this database. Then click ‘create database’. It says ‘success’ but your database doesn’t appear. Just click ‘add new database now’ and it’ll appear.
When you go to install Indexhibit follow the instructions from the ‘dummies guide’ they provide, changing the permissions and then entering the website address to start installation process. Note that when you copy Indexhibit to your server space via Cyberduck you should only copy the contents of indexhibitv070e folder (‘files’, ‘htaccess’, ‘index.php’ and ‘ndxz-studio’) and not the ‘indexhibitv070e ‘ folder itself like I did first time round.
4. Getting ‘in’ to Indexhibit.
Assuming the permissions have been set the page you get to that requires info has a number of boxes.
First box is ‘exhibition name’ which you can call whatever you like: ‘andyabbott’ would make sense in my case. Second is ‘database server’ (this is the ‘Hostname’ address which can be found above your list of databases e.g mysql.andyabbott.com.). Third is the ‘Database name” (this is the one you chose to name the ‘new mySQLdatabase’ in step 3 – in this example ‘andyabbottwebsite’). Fourth is ‘Database username” (this is the NEW one you chose above) and last is the ‘Database password’ (ditto; the one relating to your NEW username used to create the mySQL database.)
Then submit the details and you should be in! You always get given the same login and password for Indexhibit to begin with (username: index1 password:exhibit) which you should change immediately (go to ‘preferences’ on the Indexhibit back-end site) and then delete the install.php from your server space file as it says.
4. Making and customising the website
There’s no need to repeat the instructions from Indexhibit here: they can be accessed at http://indexhibit.org/tutorial/how-to-use/. With this you can put all your text, images and sections as you like. However, there isn’t a lot of immediately obvious instruction about how to customise your site meaning it looks really ugly and boring if you leave it in the default settings.
To customise the basic framework of the website requires that you alter a lot of code in the files provided by Indexhibit. This can’t be done through the nice usefriendly web interface used to add text and images though; it has to be done like ‘proper’ web designers, editing files by accessing them through Cyberduck. You’ll need a texteditor – I use Textwrangler.
First port of call for me is to find a template that has comments and instructions like the one found here: http://www.ednacional.com/indexhibit/index.php?/identity/theme/. Download this and then copy it into the ’site’ folder in ‘ndxz-studio’ via cyberduck. (this time you want to copy the whole folder across, not just the contents).
Once it is in there go to ‘settings’ on your indexhibit site and turn ‘advance mode’ on. Then you can choose ‘osd_commented’ as your theme. It’s very nice but you might want to change it. This is achieved by going to the ‘osd_folder’ where it was placed in ‘site’, opening it, choosing ‘style.css’ and clicking edit. It’ll then open and tell you which bits of code need replacing to change the font, size, some layout and colours. Then you can pretty much just tweak bits to make something more customised for you.
5. Expanding Menus
The final thing I wanted to do with my website was to have expanding menus on the left-hand side and it was such a pain in the arse to find out how to do that I thought it might be useful to write it down here. First go here: http://www.rosscairns.com/downloads/ and download both files. One of these is a set of instructions of how to modify the java script and php files and the other is the java script file itself. Follow the instructions but substituting ‘osd_commented’ for ‘sample’ as this is the theme that you are modifying. You can have as many collapsable menus as you like but you’ll have to write them down in that index.php so I just wrote about 20 a la:
6. That’s it
You should be able to find all relevant info for tweaking bits of the css style sheet online. A colour chart with all the relevant codes is here http://www.w3schools.com/css/css_colornames.asp and you can find and test fonts here http://www.typetester.org/. If you are a real beginner and need to know how to write code for links and embedding video and that sort of thing then that can be found here http://www.quackit.com/html/codes/ but actually Indexhibit means that you don’t have to know much of that!
Also, the amount of server space you have means you have plenty of space for building extra websites and hosting them in the same place to make the most of your money. Or perhaps offer some of that server space to a friend - spread the cost or, even better, be a generous soul!
Anyhow, this bit of writing has come out much more like a cack-handed tutorial than a document of my experience making a website but I hope it’s of some use and not too patronising. Why pay someone a load of wonga to do something you can do yourself on a spare afternoon with perfectly functionable results? You might then feel like you can reward yourself with some of that free beer all these open source guys seem to have a stash of. Cheers!