Wednesday, 11 December 2013

Web design for academics, part 2: getting your site online

In the first post in this series, I gave a set of instructions on how to make a website. In this follow up, I'm going to talk about how to get that snazzy website you just made onto the internet so that everyone can see it.

1. Prepare your files

Cost: free

After following the instructions in part one, you should now have a nice set of html and css files, living in their own folder and all ready to go. These should be named in lowercase letters, and have been proofread and checked in a number of web browsers (especially internet explorer, which often puts weird blue lines around images that are links! You can fix this using these instructions from Stack Overflow).
We're going to add a couple more files to this folder. The first of these is a favicon. It's the little image that appears in the tab or address bar when people visit your website. See the orange 'B' in the tab for this blog? That's a favicon. To make one, choose the image you want (it's got to look good teeny tiny) then upload it to a favicon generator such as This new file should be called favicon.ico.

If you're an academic, you may also want to add pdf publications to your website. Add any pdfs you want to upload to your folder, then simply link to them from your site using the same format you have used for internal links (e.g. /myarticle.pdf).

2. Hosting 

Cost: free, or up to £5 a month, depending on your host

Next, you need to choose a web host and url ('uniform resource locator' - basically, a web address) for your site. There are numerous different hosting options, both free and paid. First, check with your institution's webmaster to see if you should host it through the university. If so, this is a great option, as you don't have to worry about organising the hosting, and you'll get an institutional url ( Your university will probably also have web content and layout guidelines that are worth searching out and checking your html against, as it's easy to overlook best practice rules on important things like accessibility.

If your university doesn't offer hosting, you then have to choose a host. There are so many options that it's largely a personal decision, but the advice I would offer is not to use free hosting, which often puts advertising on your site - the last thing an academic website should have. This is very much a decision for you to make yourself, but I personally like Nearly Free Speech. It's pay as you go, and I've found it very cheap (I'm talking pennies - especially for a simple html and css site) and simple to use, and as a small company it appears to be run along good principles. 

So now, just register with your chosen host, and pay the fee or sign up for monthly payments. The set up steps will be largely decided by what host you choose, but they should give you easy to follow step-by-step instructions. 

3. Uploading your site to the web

Cost: free

Now you need to get your html files to your host. Exciting! For this step you're going to need a Secure File Transfer Protocol (SFTP) client, which sounds complicated but it's essentially just the tool you use to get your files from your computer to the net. You should be able to download a good SFTP for free - I have a Mac, and I use Fugu, which suits my needs very well, but others such as Cyberduck and Filezilla should be just as good, and there are also plenty of free options for Linux and Windows - you can 'shop around' by reading online reviews before you choose.
Fugu. I wonder why I chose the fish?
When you open your SFTP client, you'll need to fill in some details about your host (which should be easily accessible on your member homepage on your host's website) and the client will then 'connect' your computer to your host. Now you can simply drag or copy (depending how your client works) all the pages from your special website folder to your host. As long as you have a file called index.html - which should be your 'home' page - and follow all the instructions given by your host, your website should now be ready to go.

4. Get a domain name

Cost: up to £5 a year

At the moment, your web address is going to be something like, which you probably want to change to get rid of the 'hostcompany' part. So the next thing to do is to find yourself a nice domain name. Again, there are loads of companies to purchase (or hire, as it's usually for a discrete amount of time) a domain name from. It shouldn't cost too much (definitely less than £10 for a couple of years, unless you want to call your site!) and there's often a price differential between .com,, .net etcetera which leaves you with a lot of flexibility. I've used Heart Internet a lot and had good service (they also offer hosting).

For ease of use, I'd probably advise purchasing your domain name from your host (most companies do both) which streamlines the process as the site and name will often be matched up for you, but if you care more about value than ease you can shop around. Again, without knowing which host and domain provider you're using, it's hard to give step by step instructions, but the process should be relatively well documented (especially if you are using the same company for hosting and domain) and simple to do.

And there you go! Your website should now be online, looking great and ready for people to visit. In the next instalment of this series, I'll talk about how to set up analytics so you can see who is visiting your website, and how they are using it.