Websites, hosting and domains: a simple (illustrated) guide

With a “tiny house" story time to explain these three foundational website pieces

Written on March 10, 2020 by Jessica Yaeger

You know what a website is. And if you are reading this article, you likely know that you need a website of your own. But if some of the stuff around the website is confusing (like hosting, domains, and yearly costs)… you aren’t alone. And don’t worry, because we’re here to help!

In this guide, I distill the relevant concepts into their simplest form, introduce a tiny-but-mighty metaphor, and have created some friendly graphics to help illustrate it all. I’m confident you’ll end this post thinking “Ah yes, I get it now.”

Story time: The tiny house metaphor

You know those tiny houses that have had a surge of popularity recently? They are usually tricked out, beautifully designed and unique to the intended inhabitants. A good portion of them are on wheels rather than a permanent foundation. These movable tiny houses are then “parked” in a location where the owner wishes to reside for a decent amount of time.

We’re going to use a tiny house on wheels as our website metaphor today. Let’s start with just the tiny house story, and then we’ll layer in the website stuff afterwards.

Please imagine with me that we have a dream: to build a new tiny house and throw an awesome party at it.

Our tiny house

First, we work with a builder to create us a beautiful tiny house on wheels. We tell them our personal style, and what features we need (and want) the tiny house to have. Then they build one that’s just right for us:

A blue tiny house on wheels.

It’s so pretty! But right now it’s just chilling in the builder’s garage, unavailable to anyone. And our end goals, of course, are to live there and have people visit. To do both of these, we need to park it somewhere.

Our plot of land

After scouring the classifieds, we find this wilderness plot nearby that is available for rent, and has a great view:

A plot of land with a "For Rent" sign stuck in it.

We like it! So we sign a one-year lease for the plot and then go park our tiny house there.

The blue tiny house parked on the "for rent" plot of land.

Now that we’ve settled in, we’re just itching to have a party. We really want folks to come over to check out our new digs and spend some time visiting with us. But, we still can’t send out invites just yet.

Right now we can only describe where our tiny house is located with the inherent latitude and longitude GPS coordinates for our little plot in the woods. And that’s not super easy for putting on a printed party invitation, nor for remembering how to say correctly when we’re inviting someone over that we ran into at the grocery store.

The blue tiny house, parked on the plot of land, with GPS coordinates listed beneath.

So, we need an address!

Our address

We go chat with the local post office and there we set up an official address, for a small yearly fee, for our tiny house.

Next, we stick a little sign out in the front of our plot, marking our tiny house with our new address. (And then we do a little celebratory jig, because it’s all feeling so real now!)

The blue tiny house, parked on the plot of land, with GPS coordinates listed, and a sign posted in front that says "Our Tiny House! 1234 Main Street, Walnutville, Kentucky."

Party time

Finally we can plan our party and send out those invitations, and our friends will all be able to find our new home-sweet-tiny-home in order to come over. Wahoo!

Added to the previous image is a smiling person with an arrow to show they are now able to get to our tiny house.

We’ve taken this from our dream all the way to reality. We have now established our own little home among the rest of the places in the world, each tiny house with their own plots and addresses and visitors. Score.

Four colorful tiny houses, all with GPS coordinates, on plots and with their own address signs out front. At the bottom are many happy faces and arrows to indicate they can visit all of these locations.

The 3 pieces needed to make a website (that people can easily visit)

I’m guessing you walked with me through that tiny house story just fine. Well give yourself a high five and keep reading! Because you’ve also already grasped everything you need to know to understand this website stuff, too.

In order to have a (self-hosted) website out on the internet, we will need to think about 3 different foundational pieces:

the website itself, its hosting, and its domain name.

If we take our tiny house story as a metaphor here, we’ve already thought about all of these elements! We’ve mentioned them above as our tiny house, our plot of land, and our address.

The tiny house is the website; the plot for rent is the hosting, and the address sign is the domain name.

None of these pieces are very useful by themselves, but all together they will set you up for website success.

But first… Why have a website at all?

To start us off on the right foot, let’s remember the point of even having a website! That is, to have folks visit it. Our goal is for our most perfect people, those clients or customers or fans or donors or visitors we really want, to be able to visit our site and check out what we have to show or offer them.

Let’s kick off our new website story by imagining this as our happy ideal visitor:

Smiling face icon representing our ideal website visitor.

Our mission is to make a website that they can (and do) visit!

So… how do those 3 pieces make for a website that our ideal visitors (or anyone) can easily get to? Let’s walk through them together! We’ll break down getting our imaginary website up and running in another story (that will feel very familiar).

1. Website

The best place to begin is with our website itself.

A website, at its most basic and good, is simply a collection of files, arranged in a pleasing way that makes sense to the user and communicates a message.

The files of a website are the pages and code and images and other media that make up your site. Depending on how your website is built, these might include .html files, .php files, .png, .jpg files, and databases.

Icons of sitemap, text, photos, video file, audio file and a paintbrush.

Structuring and designing all of the content, and implementing any functionality or features you want, is what creates the website!

Parts & considerations of a website

  • Site architecture (the pages and menus)
  • Copy (the words)
  • Media (the images, video, audio)
  • Design (the colors, fonts, page layout, etc.)
  • Features (such as a blog, contact form, e-commerce, etc.)
  • Accessibility (responsive on all devices, accessible to those with disabilities or restrictions)

You can build your own website it you know how, or hire a designer/developer to do this for you. A website can be coded from scratch or utilize a template or content management system (such as WordPress). A website can have as many or as few pages as you want or need.

Moving along in our website story, now our new website is built. It has the right pages, great copy, compelling photography, beautiful design, and is focused on serving our visitors.

Here it is, all the parts of our website, represented in the tiny house of our metaphor:

Blue tiny house with icons of sitemap, text, photos, video file, audio file and a paintbrush displayed on it.

What a huge accomplishment! But lovely as it is, just having a nicely designed and functional website is not enough, because right now, no one can get to it.

Here we can see people happily visiting other websites, but our website is currently isolated and unreachable to folks on the internet (like when our tiny house was stuck in the garage).

On the left is colorful tiny houses shown reached by smiling faces; On the right is our blue tiny house in a garage, and a sad face beneath, unable to get to it.

If we want people to actually be able to visit it, we need to go park it somewhere out in the world. Our website will need to live somewhere that can be accessed via that world wide web that is the internet.

That brings us to…

2. Web hosting

A typical web hosting company owns large web servers that are exposed to the internet (and thus, are accessible by the world). These servers are set up to host internet traffic to and from them. The hosting company also does the work of maintaining the servers, keeping them online, performing updates, etc.

You can rent space on these servers for your website to live on. This is called a web hosting plan for your site, and you generally pay per year for this. (It’s like when we rented a plot of land to park our tiny house on. The plot is the hosting!)

Color tiny houses parked next to a plot of land with a "For Rent" sign stuck in it.

Next up in our website story, we’ll sign up for a year of imaginary website hosting with a reputable hosting company. In doing so, we have rented space on their server for that time. Once we put our website there, it’ll be accessible to the world wide web. Let’s do that:

The blue tiny house parked on the "for rent" plot of land.

And now, we have both a website and a place for it to live that people can actually reach (via our hosting plan). Yippee!

Colorful tiny houses, including the blue tiny house, parked on plots and shown being reached by smiling faces.

But: we’re not finished yet. Because right now, reaching our site isn’t actually very easy for anyone. That’s why there is one more element to go.

IP address

Computers speak to each other in numbers, so our little rented plot on the web host’s server currently has a built in “address” of sorts that is all numbers; this is called its “ip address”. (This is comparable to the GPS coordinates of our tiny house.)

All the colorful tiny houses parked on plots of land, with IP addresses listed beneath.

Those numbers are certainly not so great for printing on our business cards or mentioning to potential clients! We don’t want to have to rely on anyone correctly remembering and typing our website’s ip address number in order to come to our website.

The blue tiny house, parked on the plot of land, with IP address listed. Below that is a confused face.

What are we to do? We just need some words! Words are way easier for us humans to remember and use. That brings us to a…

3. Domain name

A domain name allows people to visit a website by typing a relevant, easy-to-recall string into the address bar of their browser. The domain name is then pointed to your website where it is sitting on the hosting server.

Domain name are usually purchased from a company called a domain registrar. You generally pay them, per year, to retain the right to use that domain name.

Thus, to finish our website story with a website that is easily reachable by all, we’ll lastly need to register a domain name for it to use. This will allow people to access our site in the way they are used to doing with other sites.

Let’s buy a year’s usage of our domain name from a domain registrar. (This is like our address in the tiny house story.)

A sign that says "www.MyCoolSite.com"

Then we will point that domain name to our website where it’s sitting on the hosting server.

The blue tiny house, parked on the plot of land, with IP address listed, and a sign posted in front that says "www.MyCoolSite.com". Below that is a smiling person with an arrow to show they are now able to get to the tiny house.

And, ta-da! We now have our website, its hosting, and its domain name… everything we need to have people visit us on the web.

There is our pretty website now, out in the world with all the rest of the websites.

Four colorful tiny houses, all with IP addresses, on plots and with their own address signs out front. At the bottom are many happy faces and arrows to indicate they can visit all of these locations.

And our second story is complete! We’ve gotten through all three pieces that you need to have a website that is easy for folks to visit: The website itself, the hosting, and the domain name.

The tiny house is the website; the plot for rent is the hosting, and the address sign is the domain name.

A drill-down on costs

There are costs associated with each piece of getting your website out there, and they all work a little differently. Some of the costs are front loaded as you first build up your site; others are ongoing or recur on a yearly basis.

Note that you cannot launch your site and then ignore any of these three pieces of it! As your website is a tool, it needs regular maintenance to keep serving you best. It requires frequent checks to keep it secure and up to date. You may wish to continually improve and change your website as you grow, too.

Here’s some typical timing of website-related costs:

Up-front costs

  • Initial website build.
    This is usually the biggest chunk of change that goes into launching a new site. It includes either the time cost of your own DIY efforts, or the project price of working with a professional designer/developer (like us here at Blustery Day Design 🙂) to make your site for you.
  • First year of your hosting.
    Usually, you start your relationship with a web host by signing up for a set time period (often a year) for which you are paying for hosting.
  • First year of your domain name.
    You generally procure a domain name at a domain registrar, paying for a set amount of time (often a year) to own that domain.

Future costs

  • Ongoing maintenance and improvements to your website.
    This could be monthly, yearly, or as-needed. The costs here could include the time cost of your own work, the cost of enlisting a pro (like us!) to help you with this work, and any recurring costs for any paid plugins or features that your site utilizes.
  • Each year of your hosting.
    Your hosting will be up for renewal at the end of the period you paid for at the start (usually a year); you’ll need to continue to pay for hosting each year your site is up and running.
  • Each year of domain name.
    Your domain name will be up for renewal at the end of the period you paid for at the start (usually a year); you’ll need to continue to pay for your domain name each year your site is up and running.

You’ve got this!

And now you’ve gotten through our primer! With this tiny house metaphor and cost information, you’re hopefully feeling more confident in your understanding. You now know the three foundational pieces all needed to be out on the world wide web (and then stay there): your website itself, its hosting, and a domain name.

A well-built and well-designed website does a lot of work! It conveys your message, serves your visitors, and supports you in doing the thing you were meant to do. With these foundational pieces in place, you’ll be ready to welcome the world to check out the amazing work you do.

Read more like this

Blustery Day Design bio pic

1 Comment

  1. Jen on March 10, 2020 at 1:04 pm

    Love the tiny house metaphor… makes it all so easy to understand!

Leave a Comment