How to build your first website in six hours (with a hangover)

I made on a Sunday afternoon, the day after a house party ending at 4am. I’m not much of a coder, so I was surprised how little time it took.

Lots of people I know want to make websites but assume it must be really difficult, so I thought it might be helpful to share how I did it.

I’ve built a couple of sites before, but I’m going to go through everything step by step. My aim is to write the post I wish I’d read the first time I tried to make a website.

This is roughly how I looked when I made my website

You will need:

1. A computer

2. The internet

3. Six hours

4. A hangover (optional)

Let’s go!


1. Buy your domain name 

The domain name is the web address where people will find your website – e.g.

You need to buy the domain name you want from one of the many companies that sell them. cost me £8.89 from

(I’ll talk about the specific companies I used to make my website, but there aren’t any affiliate links in this article – I used these services before and found that they work just fine).

2. Buy your hosting

The hosting is where the files that make up your website will live.

Again, lots of companies will be happy to help you.

I bought the basic package from BlueHost (it cost about £50, and I can use it to host several sites). Whoever you choose, make sure that (like BlueHost) they offer one-click WordPress installation.

3. Connect your domain name with your hosting

You have to do this so that when visitors go to your domain name, they’ll be able to see your website.

First, go to your hosting provider account and find what’s known as the ‘nameserver’ addresses. For Bluehost, the nameserver addresses are NS1.BLUEHOST.COM and NS2.BLUEHOST.COM – if you’re using another hosting provider, it’ll be something similar.

Second, go to your domain name provider account. Select the domain name you just bought, and change the nameserver details to the nameserver details for your hosting provider. If you’re using UKReg, hover over ‘Domain names’, click ‘Registered domains’, click the domain name you want to use, and click ‘Change nameservers’. Then select ‘Specify nameservers’, type in the nameserver addresses, then click the save button.

(No caption required)

Third, go back to your hosting provider account, and tell them that you’ve assigned your domain to their nameservers. If you’re using BlueHost, go to this page.

You’ll probably get a message saying it’ll be 48-72 hours before the nameserver changes have been made. I think they’re being rather conservative with their estimate, though – when I did it for, it only took about 90 minutes.

4. Install is a super-simple way of making and managing your website.

You might be familiar with WordPress as a place to write a blog. That’s – they provide a free and easy way of creating a blog. is run by the same crew, but it’s more flexible and powerful – that’s one reason why I wanted to use it for making

The other reason is that the ‘open-source’ community at has created loads free tools for things like showing your tweets or allowing people to subscribe to your blog by email. We’ll look at those tools (known as ‘plug-ins’) in a bit.

Since in step #2 you cleverly signed up to a hosting provider that offers a one-click WordPress install, setting up to run your site is easy. Just find the relevant page in your hosting provider account and follow the instructions. If you’re using BlueHost, there’s a WordPress icon in the ‘SimpleScripts’ section of the ‘cPanel’ page. You’ll probably have to create a username and password as part of the process.

You should be taken through a handful of easy steps to complete the installation of When it’s all done, you can start playing around with your site. Woohoo!

Yeah, I do love WordPress a bit

Type your domain name into your browser, then add /wp-admin on the end. That’ll show you the login screen for managing your website. Log in. Right, let’s start on the site itself…

5. Choose your website design

The first thing you’ll probably want to do is make your site look sexy-beautiful by choosing a sweet theme. Themes are design templates for your website.

Click on ‘Appearance’, then ‘Themes’. You’ll see your current theme (the default one) at the top of the page. To see all the themes available, click ‘Install themes’, then click the ‘Find themes’ button.

Yep, there are thousands of them!

Scroll through to find one you like (mine is called ‘Clean Home’). To narrow down the selection, click ‘Search’ to get the search option tick-boxes to appear.

Don’t worry if you can’t decide – you can change themes any time you like.

Be sure to choose your theme from the official theme directory. If you get it from anywhere else, you risk letting bad guys hack your site – or, at the very least, having crappy code on your site. [Hat-tip to Mike Taylor for the warning.]

Once you’ve found the one you like best, click ‘Install’, then click the ‘Install now’ button.

Open a new browser tab and type in your domain name – you should see your beautiful-looking site right there on the internet!

If you don't read The Oatmeal, stop everything until you have. This is part of

6. The basics

You might want to change the title and subtitle of your site. To do so, go to ‘Settings’ in the left-hand menu, and select ‘General’.

I made my ‘Site title’, and my subtitle (‘Tagline’) is at the time of writing ‘Man, alive.’ You can also change some basic details like the time zone, the way dates are displayed. Click the ‘Save changes’ button at the bottom when you’re done.

7. Add pages

The default page is a blog page. But it’s easy to add pages – most people want an ‘About’ page at the very least.

To add a page, click ‘Pages’ in the left-hand menu, then click the ‘Add new’ button. If you want to add an ‘About’ page, type ‘About’ in the title box, then write something about yourself in the main text box, and then click the blue ‘Publish’ button.

Now go to, and you’ll see your new page. BOOM!

8. Changing your home page

I didn’t want my blog page to be the front page of my site (the one that appears when you go to So I made a different page the front page instead.

If you want to do the same, this is how to do it. First, add a new page using the info in step #6. You can make the page title whatever you like – rather unimaginatively, I called mine ‘Home’.

If you want to keep the blog page, but don’t want it as your front page, go to ‘Pages’ in the left-hand menu, then click the ‘Add new’ button. Type ‘Blog’ into the title box, don’t type anything at all in the main text box, and then click the blue ‘Publish’ button.

Once you’ve done that, or if you don’t want to keep the blog page on your site at all, go to ‘Administration’ in the left-hand menu, then click ‘Settings’, then click ‘Reading’. In the ‘Front page displays’ section, choose ‘A static page’, then select the page you want to use (I chose ‘Home’ at this point). Click the ‘Save changes’ button, and you’re done.

Now put your domain name (e.g. into a browser: you should land on the page you just chose, instead of the blog page. Huzzah!

9. Widgets

On the right-hand side of pages you’ll see a couple of widgets.

One is named ‘toddmgreen’s links’ – I’ve listed my Twitter stream, LinkedIn page, and the RSS feed from my blog.

The other appears as ‘Latest blog posts’, which displays the last three posts on my blog.

There are a dozen or so widgets available. I think the exact list depends on which theme you’ve chosen.

Adding a widget to your page is straightforward – here’s how it works.

Pink widgets make me a little uncomfortable

First, click ‘Appearance’ in the left-hand menu. Then click the ‘Widgets’ link in the ‘Current theme’ section at the top of the page.

You’ll see a big box full of available widgets. You can drag and drop each available widget into one of the sections listed on the right-hand side of the page. Almost all themes will offer you ‘Sidebar’ as a minimum.

‘Recent Posts’ is a pretty popular one for the sidebar (that’s where I’ve got it too), so let’s look at how that works. First, click on the Recent Posts widget under ‘Available widgets’, and drag it over to ‘Sidebar’ in the right-hand menu. Drop it onto Sidebar, and Recent Posts will automatically open up for your to customise it.

Type in the widget heading you want to appear on your site into the ‘Title’ box (I called mine ‘Latest blog posts’). Then choose how many posts you want to have in the list, and click the ‘Save’ button. Done!

You can add, edit and remove widgets whenever you like.

10. Plugins

The best thing about in my book is the plugins. Plugins make it really simple to add popular functions to your site – things like the neat little sharing buttons I’ve got on my site (e.g. at the bottom of this post), and tools that make your site easier for Google searchers to find.

Plugins are contributed by the guys who run WordPress, by members of the community, or by third-party services wanting to reach users. Some require you to sign up for the relevant service, and/or edit some simple settings (though even then none will take you >5 minutes to set up). Almost all are free.

A shameless plug

I’ve got nine plugins installed on You can find them by clicking ‘Plugins’ in the left-hand menu, then clicking the ‘Add new’ button, then using the search box to find the one you want, and then clicking ‘Install’.

AddThis Social Bookmarking Widget – provides the sweet-ass sharing buttons on my site

All in One SEO Pack – helps Google find your site

Google Analytics for WordPress – Google Analytics tracks lots of stats about the way people use your site; this plugin connects your site to Google Analytics

Google XML Sitemaps – helps Google et al understand all the content on your site, so it’s easier to find

IntenseDebate – makes the comment box at the bottom of your blog posts look nicer. I just installed this yesterday, but it looks cool

Jetpack by – the mack daddy of plugins: made by the WordPress guys and featuring some top plugins that they bought, it offers a range of useful things – definitely install this one

W3 Total Cache – helps your site load faster

WordPress Backup for Dropbox – I use a file backup service called Dropbox; this plugin makes it easy for you to backup your site in Dropbox

WordPress Importer – if (like me) you’ll be turning a site into a one, this is the way to do it smoothly

WPTouch – this one adapts your site nicely for mobile browsers

Plugins are wicked, so get some. You can always ditch them in a couple of clicks on the ‘Plugins’ page if you don’t like them.

11. Changing the finer details of your site’s appearance

You can edit pretty much every detail of the way your site appears. I’ve done a (very) little bit of coding before, but you don’t need to know anything more than what I’m about to tell you.

The code files are like the DNA of your site – and lets you act like the scientist guys in Jurassic Park by fiddling around with anything you like. Just don’t use frog DNA.

Oh shit, they're breeding!

I’ll take you through a couple of examples of things I changed so that you can see how simple the basic stuff is.

All of them use the ‘Stylesheet’ file. The Stylesheet is a big document written in CSS, a coding language that determines how your site looks. That means that to change how the site looks, you need to change the CSS.

As the CSS for each theme is different, giving loads of specific examples is a bit pointless. So what I’ll do instead is explain the basics of how to edit your CSS.

Open the ‘Stylesheet’ by going to ‘Appearance’, then clicking ‘Editor’, then clicking ‘Stylesheet’.

At the top you’ll see a block of text that looks much like this:

body {
font-family: 'Shanti', sans-serif;

Let’s go through it line by line to see what it does.

body {   ->   This tells you that the section { between the curly brackets } relates to the ‘body’, which is the main chunk of text on the page. I’m writing this sentence in the body of this page.

font-family: ‘Shanti’, sans-serif;   ->   This defines the font that appears on the page. I’ve got one called Shanti from Google Fonts API, with the generic sans-serif as the back-up in case Shanti doesn’t work in the reader’s browser. Google Fonts API has clear instructions, but if you don’t want to bother with it just choose one of the fonts listed on this page – they work everywhere.

font-size:15px;   ->   This determines the size of the text on the page. Make the number higher/lower to make it bigger/smaller.

font-style:normal;   ->   This is the style of the font; you can choose ‘normal’ or ‘italic’.

font-variant:normal;   ->   This enables you to display the font as ‘normal’ or small caps; not sure why you’d want the latter!

font-weight:normal;   ->   This decides the thickness of the letters. I’m using ‘normal’; you could choose ‘bold’ or use a number to get a specific thickness (e.g. ‘900’ would make it thicker than the standard ‘bold’).

line-height:1.7em;   ->   This defines the spacing between the lines of text.

}   ->   This tells the browser that the section of code relating to the ‘body’ – all the stuff we’ve just been looking at – is all done.

There we go – that’s the section of code that enables you to change how the ‘body’ text looks on the page.

If you want to change other stuff, no problem. The one thing you can definitely find on the internet is information about how to make stuff for the internet. So if there’s anything you want to change about the way your site looks, type ‘CSS [what you want to do]’ into Google and you’ll most likely find the answer.

Don’t be scared by the code – it’s not the Matrix. Sadly :(

Is this sandwich real?

12. Give it a try!

All that should be enough to get you going.

The tools available to layman website-creators these days are pretty awesome, but they are not always that easy to understand. I hope this post helps to bridge the gap between what’s technically possible and what non-specialists are able to understand.

Good luck, and have fun.

~ Todd

Author: toddmgreen

I really like making internet projects. I work on apps, games and websites at a TV company. I write stuff, make stuff, and accidentally break stuff. You should probably follow me on Twitter - @toddmgreen.

4 Replies to “How to build your first website in six hours (with a hangover)”

  1. Thanks for the article.

    I had one client who had already chosen Bluehost, and it worked fine. For all my sites and my clients' sites, I use, and so far they have had 100% uptime, with unlimited disk space and bandwidth. Plus, they're pricing is the lowest I've seen.

    WordPress is great for a simple site, like a blog; but for ecommerce, you'll need a true CMS.

    1. No probs; thanks for the comment. I agree re ecommerce. is great for simple sites like mine; hence it's good for beginners. If you want to do something more complex, you'll need more complex tools.

  2. Hey Todd. This is great. I'll be using it instead of writing log emails in future. The one warning I would give people is beware the free themes. Pony up a few dollars for a well thought through, well designed, well supported one. And I really like for URL and site hosting. Nice people.

    1. Thanks Mike. I've updated the post with a warning and a hat-tip. Do you mean free themes available outside I think WordPress moderate all themes available through their own directory.

What do you think?