How to set up a simple professional portfolio site/blog in about four hours

29thDec. × ’07

Jan Lewandowski Primary Modern Languages

For her Christmas present this year my mum, Jan Lewandowski, asked me if I’d help her put together a site for her thriving consultancy business. She’s a “primary modern languages” consultant, which means she trains teachers around the UK how to teach children a modern language - French being her focus (it would be after thirty years as a French teacher, I guess!).

I thought I’d just write up the process to show how easy it is to set up a professional looking site with next to no budget. If you’re thinking of getting blogging this year (New Year’s resolution?) then hopefully this will give you a step-by-step method of doing it.

The first thing we did was to just sit down with a pen and paper. We worked through what it was that Jan wanted to achieve and how the web would help.

Here’s a simplification of some of the questions I asked (you could ask the same things of yourself):

What do you do?
I help teachers to teach modern languages using hands-on, creative activities that are fun for children and teacher alike: making things, arts and crafts, music, songs, stories, rhymes and food.

Who are the potential users of your website?
Mainly teachers, school staff and consultants who work at local authorities.

What are they looking for?
The government have brought in legislation that by 2010 all primary schools must be teaching a primary modern language - French, Spanish, German, etc. They want to find ways that teachers can gain the skills they need to make this happen.

How can you help?
I can offer workshops, language days, bespoke training packages and do public speaking at conferences.

What do you want these users to do?
Get in touch, attend a training event that I’m running or speaking at, or enquire about organising one.

Once we had the answers to these questions, it became clear that what Jan needed was a neat little site that would enable her to put up information on her offering, show that she is professional in her work and to encourage users to get in touch.

If you know what it is you’re trying to achieve, then it’s straight-forward to design the website around these aims. Want people to get in touch? Put your full contact details on every page! Want people to find out what you do - have a very simple page that explains it, with a link on it saying “Get in touch”, and so on.

With all of that in mind, here’s what I did to get her site built and online in four hours:

Domain name
The domain name or web address is a good place to start. You’ll find most obvious names are now gone, so you may need to be creative.

I usually use Instant Domain Search to check if something is available, and Name Boy to give me ideas of things that are available and then buy it with 123-reg.co.uk which gives you all the control you need. We chose to use her full name - janlewandowski.co.uk

Hosting provision
Every website needs somewhere to ‘host’ it - a computer somewhere in the world that is the home for all of the files that make up the website. There are plenty of cheap providers around that range from $1 per month to $16 per month for bigger sites, and if you haven’t done anything like this before there are providers that can offer domain name, hosting, email and everything you need in one monthly bill. Here are some good ones.

Wordpress
Wordpress is a great, free, easy to use blogging system that anyone can get to grips with and means that once the site is live Jan can run it herself - this is really important. I didn’t want to cause delays and problems for her down the line by being too busy and not able to help her with an urgent update for a client.

A good idea is to go for a hosting provider (Yahoo! Small Business, etc.) who offer a 1-click Wordpress installation with your hosting.

I’ve done this loads of times, so I used some space on my own server. Have a read of the Wordpress installation instructions to find out how to do this part.

A design
The great thing about Wordpress is that there are thousands of free designs available to use on the web. These are called Wordpress Themes, and when you find one you like you can just upload it to your website and turn it on, and suddenly your site will have a brand new design.

I wanted to give Jan something that was quite personal to her, so I found a good starting point using Google: a theme called Sharpfolio.

I downloaded it, and then uploaded it to the site in the folder called “themes” inside the folder called “wp-content”.

To do this you will need to use something called FTP (”File Transfer Protocol“) using a program like CuteFTP for PC or Transmit for the Mac. Your hosting provider will have sent you some details on FTP when you set up your account with them.

So back to the design. I didn’t really think that the “white text on black” look was appropriate for Jan, so I opened the Stylesheet - the page that describes how the webpage will look and changed all of the colours in my favourite text editor TextMate.

Then I saved the stylesheet and uploaded it again, and suddenly the site had a new colour scheme.

Then, because Wordpress is great at being customised I went to work editing bits and bobs, tweaking things here and there. This can get pretty advanced quite quickly but for the average user, if you just find a theme that you like - preferably one that supports something called “Widgets” - then you will only need to do this once you’ve got familiar with the site.

Text content
The most important thing next was to work out what text was going on the site, and this came down to some good old-fashioned copy-writing but bearing in mind that I was writing for the web.

I more-or-less interviewed Jan about her business, interpreted what she said into something that would make sense to and impress a potential visitor (bearing in mind that it would mostly be time-pressured teachers) and divided up the text into a series of pages.

Then in Wordpress, you log in to your Control Panel and it’s as easy as going to the Manage Pages section, pressing “New Page”, typing the text into a box and hitting “Publish”.

It’s probably a good idea to explain that there are two types of text that can appear on a site - “permanent” content and “time-based” content here. “Permanent” stuff would be Jan’s “About me” and “What I do” pages, but there also needed to be space for content that was about things she was up to, planning, ideas and so on - this is “time-based” because it’s related to a specific time - the day the things are added to the site.

So the Pages are in the main menu at the top, and the time-based content appears in the Blog. Wordpress calls these things Pages and Posts to differentiate them from eachother.

Some good photographs

Jan Lewandowski
Then, for a bit of a break from the computer screen, I fired up the camera, set up a black background and a light, took a few shots of Jan for the site and chose one for her About Me page.

Emily was also kind enough to donate some images of France that she took while she was on holiday, but if you want to include images on your site you need to make sure you have a legal right to do so. Try Flickr’s Creative Commons search or Stock Exchange for images to use on your site (you may need a small amount of cash for the latter).

I saved them all to my hard disk, opened them in Photoshop (you could use any image editor) and made some images that were exactly 580 pixels wide by resizing them. This size will differ from theme to theme, but about that size is good for the Web (at the moment anyway).

Once done, I saved them as 95% quality JPEGs and used the “Manage Pages” section of the Wordpress control panel to upload the images to the pages that I wanted using the “Upload” box below the main text editor.

Suddenly the site sprang to life!

Adding some Plug-ins
The rest is optional but I’d recommend it.

Wordpress comes with a great system that lets you add on “Plug-ins” to your website. This means you can add fancy features over time to suit your whims and make your blog/site more feature-packed.

Google Analytics

To start with, install the Wordpress Google Analytics plug-in. This is a way of tracking the visitors to your site, seeing which pages they go to and so on. Oh, and it’s free.

Google Sitemap
To get your site well ranked on Google it’s important to let it know about the structure of your website and submit it for indexing.

I use another Wordpress plugin called Google XML Sitemap Generator that does all the work for you.

And you’re done!
Once I was finished, I went through the pages with a fine tooth comb, fixing any broken links, checking for typos, and once I was happy, we sat back and relaxed. Job done!

A full website in four hours that’s easy enough for anyone with a bit of technical understanding to set up!

I hope that’s useful and I’m looking forward to seeing some new blogs popping up on the scene over the next few months.

Related posts:

  1. Give your homepage a mini facelift in about 3 hours “The plumber’s tap always drips”, or so they say. The...
  2. Out of Hours: To Blog or not to Blog This evening I’m heading over to the Light House...
  3. 10 things to ask yourself about your new web site home page layout I’ve just been chatting to a friend of mine, Chris...
  4. Top 10 Usability Mistakes for Blogs - How Does Yours Rate? The prolific usability guru Jacob Nielsen has a handy...
  5. Introducing Odadeo - a new site for dads For Fathers’ Day 2008 I have launched the ‘private...

Related posts brought to you by Yet Another Related Posts Plugin.

This entry was posted in Blog, upyerbrum. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

7 Comments

  1. Posted December 29, 2007 at 6:49 pm | Permalink

    A nice rounded guide showing Wordpress is not ‘just for blogs’. Picked up a couple of useful links too (although the textmate one is pointing at a squatter). Cheers!

  2. stef
    Posted December 29, 2007 at 6:58 pm | Permalink

    Ah thanks - I’ve fixed that link - it’s http://macromates.com/

  3. Posted December 30, 2007 at 12:24 pm | Permalink

    I’ve got to agree with Si (nice name!) - this is a great little write up of how WordPress isn’t just a blogging tool and Kubrick isn’t the only design for it. I like the level you’ve written for too - its not talking down to the reader although it’s also covering the very basics of building a website in a simple manner, such as http://FTP.

    Thanks for the pointer to the Analytics plugin too - I’ll be giving that a test run later today.

  4. Posted December 30, 2007 at 5:21 pm | Permalink

    Thanks again for the site Stef; best Christmas present ever (after Imogen!)

  5. Chaneille
    Posted February 11, 2008 at 11:23 pm | Permalink

    Sorry,but Iwanted to find out how to write a portfolio for my H.F.L.E class.Thanks anyway.

  6. Posted February 15, 2008 at 2:00 pm | Permalink

    Hi Stef.

    Just wondered if its possible to activate the comments and posts in the sharpfolio theme as I have searched the net and can’t find out where to do this anywhere and I noticed that you have acheived this on Jan’s website. So what’s the secret : - )

    cheers
    gareth

  7. stef
    Posted February 15, 2008 at 2:07 pm | Permalink

    Not sure - I do remember having some trouble there.

    < ?php comments_template(); ?>

    This line of code needs to go before the < ?php end while; ?> line in single.php

    However it might just be better for me to post the whole modified theme up here. Not sure how that stands with their Creative Commons licence though.

3 Trackbacks

  1. [...] post info By chromatouch Categories: web How to set up a simple professional portfolio site/blog in about four hours | Stefan Lewandowski [...]

  2. [...] That’s one of the reasons I wrote my post on how to set up a professional blog in 4 hours. I know a few people who just don’t know how to do this, or how to migrate their site content [...]

  3. [...] First is by Stef Lewandowski on how to setup a website in about 4 hours, and second is by Andrew Dubber on how to upgrade it. Both are essential for [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*