/ Beginner

Everything you need to get a website up and running

We live in 2011, complete with computers and the ever present internet and world wide web. Nearly everything has a website, but do you? This guide will attempt to explain everything you need to do, starting from scratch, to get a website up and running. Whether it is a personal website, a new business website such as a restaurant, or a complex number-crunching website such as Google, I'll detail each step and provide enough information for you to get started. Here is a rough outline:

  • Determining your domain/brand name

  • Finding a web host

  • Registering your domain name

  • Designing the website

  • Uploading/Updating your website

  • Troubleshooting and testing

Each of those bullet points will have a dedicated section below, so feel free to skip to those sections if you'd like. You may be wondering what my motivation is be to make this guide. Well, to be honest, this is an experiment. I was sitting in front of my computer a couple years ago, surfing the web, and suddenly realized that with all these websites in the world, why didn't I have one? I was standing in your shoes 2 years ago. That started the journey into researching just exactly how to go about it. I researched costs, web hosting servers, domain registrars, and different ways to create the actual HTML and CSS that powers a website. Along the way, I realized there was a lot of bad advice and even more false advertising. People made biased guides just to get others to sign up for their webhost and collect a profit, and other guides were just full of advertisements for a particular technology that no one needed. I'm here to give you some personal advice, as well as plenty of choices and options along the way.

I'm not trying to get you to sign up for my web host. I'm not trying to sell you some sort of EZ-Website Maker Deluxe. I'm not telling you which domain registrars to use, or which products to buy. But I will offer my advice and the lessons I learned while creating my first website.

So, let's begin...

Determining Your Domain / Brand Name

Basically you have two routes here-- do you already have a name (such as a restaurant or company that's been in business for awhile) or are you startup company and you want one of those ambiguous, catchy "web 2.0" names like Google or Bing?

If you are going for the latter, you're in for some bad news (but don't be too sad). Unfortunately for you, the world wide web has been around for some 20+ years, and domain registrations are only around $10 / year. That means someone can buy tens or even hundreds of domain names and hold on to them. Imagine a company that makes a relatively small profit of $3 million per year. They could buy thousands of domain names for an insignificant amount of cash. Now imagine Apple, Google, or Microsoft, which make billions of dollars per year, and imagine how many domain names they can simply "hold onto" just in case. Do they do that? Probably.

What I am trying to get at is the fact that domain names are fairly cheap and there is no limit to the number you can have. Many of the short, catchy, one or two syllable, "good" domain names are already sold and registered. Does that mean you can't ever get them? No. But you'll certainly have to pay more than $10 dollars to get one.

There are many websites out there that allow you to bid on or buy existing domain names. The prices here will vary, from as little as $30 to upwards of $500. For short 4 or 5 letter domains, you may be expected to pay thousands.

If your company or business already has a name, you might be inclined to use that as your domain name. However, there are a few things to be aware of.

Is your business name catchy? Do you have a strong brand? Do you expect people to already know your name? In that case, go ahead and use that as your domain name.

However, if your business is relatively unknown, or if you are expecting your website to bring in visitors you may want to include some keywords in your domain name. For example, I could have named this website stephensswriting.com but I instead wanted my domain name to explain my website's purpose. That's right, picking out your domain name is the first step in optimizing your website for search engines and discoverability. If your company was a small ceramic company called Bakerlite, you might want to try bakerliteceramics.com. The other option, www.bakerlite.com is not very helpful to search engines unless people already associated Bakerlite with ceramics. In that case, it would be wise to reinforce the brainwashing, er... I mean, association.

Let me conclude with some ideas of pricing and how to go about registering your domain name. First of all, expect to pay no more than $10/year for a domain registration. In addition to a domain name registration, you also need a web host (more on that below). Many places that host your website also offer domain registrations. You should also be able to register a domain through one company, and then host it at a different company.

Finding a Web Host

Now that you have a domain name picked out (and possibly registered) you'll need a web host. This is essentially a "computer" connected to the internet. This "computer" is always on, stores your website (this includes text, pictures, video, HTML, CSS etc.), and accepts incoming connections (visitors) and serves them the data that they want (the text, pictures, video, HTML, and CSS etc.)

In fact, your computer right now could theoretically host your website. The problem is that you'd always have to have it turned on and have a fast connection to the internet. Additionally, you'd need some software running to receive HTTP requests. The most common software to do this is the Apache HTTP Server.

The thing is though, if you are reading this guide (meaning you're a beginner) you probably won't have the technical skills and resources to personally get your own Apache HTTP Server up and running. It would be much easier for someone else to do it.

There are a lot of good resources for picking out the company that will ultimately host your website. While you are doing your research, keep in mind some of these keywords:

  • Bandwidth - This is how much data flows to your visitors. If you plan on having lots of images, files, or movies on your website, bandwidth becomes important.  Many web hosts advertise "unlimited" bandwidth. There is no such thing as unlimited bandwidth, but instead the company will hope you never notice or push up against the limit.
  • Disk space - This is how much data is on your website. If you plan on having images, files, or movies, keep in mind that they take up a lot of space. Again, there isn't really anything such as unlimited disk space. If you plan on backing up your personal hard drive onto your web host's disk space, they'll likely make the transfer so painfully slow that you'll give up.
  • Uptime - This is how frequently the web server will stay on. Ideally this number should be 100% (always on). Many companies advertise 99.999% uptime, which is some statistic that is likely made up. The best way to determine how true this claim is is to ask current customers. Check the company blogs and twitter and look at customers' comments. Are they happy?
The web host that you'll ultimately pick is up to you. A small website for your friends and family (maybe 300 visitors/month) won't need all the bells and whistles as website like like Google (maybe 30,000,000 visitors/month). You should realize though that if you have a small website and one day you post something that is incredibly awesome and "goes viral" on the internet, expect your website to go down. Many web hosts offer upgrade paths to allow your website to grow, but don't expect this to happen on the hour your website suddenly becomes popular.

If you choose wrongly about your web host or you get upset at them, keep in mind that unless you signed up for an incredibly sketchy web host, it shouldn't be too difficult to take your content and move to a different web host. Your website (the content including text, design, pictures, etc) is your website. You own it. Not your web host.

I will briefly mention that after doing quite a lot of research around the web I found that Dreamhost sounded like a good web host. It wasn't the cheapest option out there, but it looked to be the most trustworthy. It also helped that it had a large base of satisfied customers. If you're interested, check them out here. Disclaimer: I receive a referral bonus if you sign up for them through that link.

Registering your Domain Name

The next step (or the same step) is registering your domain name. The reason why this might be a different step is that your domain name and your web host can be two separate entities. You can register your domain name at Company X and host your website at Company Y. It might be a little tricky and there will be more steps involved if you do this, but this is an option.

As mentioned, when you sign up for a web host, they'll often include 1 domain registration with the web hosting, sort of a bundled "package". If they don't include 1 registration, you can likely pay the $10 for it through the same company at the time of sign up.

You might be wondering who is in charge of all the names of all the websites that make up the world wide web. After all, isn't the world wide web supposed to be a collection of independently created content that spans international and  inter-continental distances? Where does your $10 dollars go when you register a domain name (Who's making all the money? And why didn't I think of that!?).

The answer that you are probably looking for is the International Corporation for Assigned Names and Numbers (ICANN). But they don't directly receive your $10 dollars. Instead, the ICANN delegates the tedious job of selling and registering domain names to various ICAAN-accredited domain registrars. An example of an ICANN-accredited domain registrar is GoDaddy. These second-tier registrars are the ones usually interfacing with the public (you and I) and asking for the $10 dollars in return for registering a domain name. The difference is that second-tier registrars may purchase a few million addresses (they're buying in bulk) and resale them at a "retail" price to customers.

So now imagine that we have a domain name and a web host. The next step is...

Designing the Website

When you type in www.google.com in your web browser, what happens? Well, behind the scenes, your web browser first seeks a dynamic name server (DNS) to translate a human-readable address, such as "www.google.com" to an internet (think "computer-readable") address of 74.125.226.176. Next an HTTP request is made to the server located at 74.125.226.176 that basically says "I want your data". Now that you have an address (or domain name), and a server (a web host), you can send some data to people whose browsers are making HTTP requests.

What exactly is this data that comes from a web server to a client (a visitor)? Well, for the most part, it is a bunch of text mixed in with some images, perhaps a movie, or maybe an Adobe Flash game. This is what is referred to as content on a website. A website consists of content:

  • Text - You are reading a bunch of text right now, aren't you? Other text may be interactive and include hyperlinks to pages or other websites.
  • Multimedia - Any pictures, videos, music, PDF files, Flash applications, Silverlight applications, Microsoft Word Documents that you can download.
  • Design - This includes any CSS (and accompanying HTML) of your website. CSS will be described below, but in short this is the code that describes how your text and multimedia should be presented to the end user (a visitor).
Let's first examine what a website really looks like, before your web browser makes it all pretty. Depending on your web browser (such as Mozilla Firefox, Internet Explorer, Google Chrome, Safari, etc.) these steps may be a little different.
  • Firefox - Go to View and then select Page source. Alternatively you can right-click anywhere on a page and select View page source.
  • Chrome - Right-click anywhere on a page and select View page source.
  • Internet Explorer - Go to View and then select Source.
As you can see, there is quite a bit of text. You might see some common themes though, such as <a href="some_address">Some text</a> or maybe some <div id="something"></div>. An image might look like <img src="address_to_image" alt="alternative text" />. Your web browser takes all of this text and renders it into a web site that is pleasing for humans to see and interact with.

What is all this code that I see? Are there some reoccurring themes?

  • HTML is very common and can be thought of all the little pieces or building blocks of a website. It describes where headers, paragraphs, links, pictures, divisions, and just about everything else goes.
  • CSS is used in conjunction with the HTML elements. CSS describes how a particular header looks, the indentation of a paragraph, or the length and width of a division to name some examples.
  • Javascript is code that performs tasks or functions for the visitor. Many websites can function without Javascript, but other websites will usually have Javascript code running to control simple things like fading images or advanced  things like asynchronous calls to a database or for formatting a website on the fly. A quick thing to note-- Javascript is NOT the same thing as Java (another programming language). It’s also primarily used for client-side execution (meaning the code is run on a visitor’s computer, different than code that is running on the website’s computer or server). Code that runs on a web server (such as PHP, Python, Perl, Ruby, etc) is code that a visitor will not ever see and therefore you will not see it by looking at the page source.
Okay, so how do I create this content? Now here is where it can get complicated. There are literally hundreds (possibly thousands) of editors and website generators that you can use. You can use a pre-formed template and fill in the missing blanks. You can use a graphical editor where you drag images and word blocks around to position them on the screen. You can use a simple text editor like Notepad or Microsoft Word (though MS Word is not usually a good idea for web design). You can use a hybrid editor like Adobe Dreamweaver. You can even use an editor that is inside your web browser, such as the WordPress editor (which is actually called the TinyMCE editor). The thing to keep in mind, at the end of the day your visitor is still receiving the same HTML/CSS "data" that was described above*.

Why the *asterisk? It's very possible that the "helper" editors such as Dreamweaver or WordPress will accidentally add in extra spaces, extra <span> blocks </span>, or occasionally refuse to format your paragraphs and content exactly how you want them to look. Most of the time this isn’t a big issue, but there are always those purists who need maximum control and love to dive into the nitty-gritty raw HTML and CSS. Many of these purists will use simple text editors like WordPad or Notepad. Let’s look at what a very basic web page looks like in one of these editors:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Super Basic Website</TITLE>
<META name="keywords" content="Test" />
</HEAD>
<BODY>
<H1>Welcome to the super basic website</H1>
<P>Here is a paragraph on a website</P>
<div id="sidebar">
<P>Hello sidebar!</P>
</div>
</BODY>
</HTML>

If you’re adventurous, you can open up a new WordPad or Notepad document, copy and paste the above HTML into the editor, and save it something like testwebsite.html. You can then open that in your web browser (Firefox, Internet Explorer, Chrome) and see before your very eyes how the web browser takes the HTML and renders it into a web page.

At this moment I’d like to point out so-called WYSIWYG editors that stand for What You See Is What You Get which usually means you will not be working with basic raw HTML like what is shown above. Instead you’ll be editing text that is already rendered out as it would be in a web browser. Instead of seeing:

<strong>This text is bold</strong>

you’ll see something like:

This text is bold

What’s great about many WYSIWYG editors is that they usually let you switch back and forth between working the rendered mode and the raw HTML mode to get the best of both worlds. I find that it is much easier to work in a rich, full featured rendered mode for nearly everything, but when there are extra <span> blocks or indentations and lists are not working exactly as intended I can click a button and switch over to the raw HTML.

I’ll make a quick note about a raw text editors. Notepad and WordPad are suitable for writing basic, unformatted text, but aren’t the best for writing and examining code. Take a look at the same HTML in each of these two editors:

You’ll notice that everything is color coded and indented nicely. This makes editing code drastically more efficient without adding any additional complexity (a rare win-win with most new technology). Another feature of coding editors is that brackets </>, curly braces {...}, and parenthesis (...) change colors or boldness to let you know where you left one off. For these reasons I would strongly suggest using something just slightly fancier than WordPad or Notepad for editing code such as HTML. An excellent tool that I have used (and many, many others have used) is NotePad++. It’s free, light-weight, open-source, and is not any more difficult to use than a regular text editor.

Now let’s move onto something more advanced than just typing the raw HTML into a text editor-- using WordPress to create content for a website. What’s neat about editing on WordPress is that you can edit your website on your website. What does that mean? It means that you open up a web browser, go to your website, press the log-in button or link, and can start typing up a new post right inside of your web browser. Notice the two buttons that let you switch between typing in a WYSIWYG editor and typing out some raw HTML. You’ll spend most of your time in the WYSIWYG editor, or what WordPress refers to as the “normal” editor.

Uploading/Updating your Website

Okay so imagine you picked out a domain name, registered it, and purchased web hosting. Now how do you put your first web page out onto the World Wide Web? Here are a couple options:
  • You can FTP/SFTP to a web server to upload a file such as about.html or index.html. FTP stands for File Transfer Protocol and SFTP stands for Secure File Transfer Protocol.
  • If WordPress or some other Content Management System (CMS) is installed on the webserver you can visit your website, log in, and edit pages through your web browser.
Let's look at the most basic approach first-- uploading a file to your web server. Imagine you created the HTML file that discussed earlier. This is a web page in its simplest form. You can name it whatever you'd like, whether that is testwebsite.html or blahblah.html. Now you need to put it onto your webserver so other people can visit the webpage and see it rendered out in their web browser.

Hopefully once you signed up for a webserver they gave you a username and password for it. Now you just need a piece of software that will connect to that web server and allow you to transfer the testwebsite.html file to it. An excellent free, light-weight, and open source tool that I use all the time is FileZilla. Here's how I transfer a file to the webserver:

Here the file is on my desktop

Here I am transferring the file using FileZilla SFTP software

And after typing the address into any web browser, here is the new page on the world wide web!

Comparing web browsers
That was pretty simple, right? In FileZilla you can also create directories. Right-click on a folder and select Create Directory. Give it a name, maybe "about", and now you can put web pages in various directories. For example, you can create a page called thecompany.html and thefounders.html and put them in a directory called "about". Visit those pages by going to www.yourwebsite.com/about/thecompany.html or www.yourwebsite.com/about/thefounders.html.

One thing to note is the special name index. If you name any file as index, that is the file that will show up if no other file is specified. This works when you want to have a specific page show up with you visit your web site. If I renamed TestWebsite.html to index.html, I would visit the page by just typing in www.netinstructions.com instead of www.netinstructions.com/TestWebsite.html.

Now let's move away from using FTP/SFTP software and a text editor to create web pages. Instead, let's create a web page using WordPress. The following pictures and steps assumes that you already have WordPress installed on your web server.

Just visit your website by typing in the address

Visit the website

Log in with your username and password (this will be set up right when you install WordPress)

Log in

Now you can create a new post or edit an existing post by just typing into the text box. Click update or publish when you're done.

Edit the content

Note that you can switch between looking at the raw HTML and the rendered content

Note the HTML option to look at the underlying raw HTML

As you can see, editing and adding content through WordPress is pretty simple. Many websites these days allow users to add content through software that runs on the web server and is accessible with a web browser. This lets you maintain your website on just about any device (computer, tablet, phone) anywhere in the world at any time. Other content management systems (CMS's) exist besides Wordpress such as Joomla, Drupal, Plone, Tumblr, Blogger, and many more.

Troubleshooting and Testing

As you're going through these steps, you may have some issues. I've selected a few of the more popular problems that pop up from time to time.

To FTP or to SFTP? And where to put the files?

When you want to upload files to your web server or web host the most common way to do this is with a client using the (Secure) File Transfer Protocol. It is strongly suggested that you do not use FTP and instead use the secure protocol (SFTP). It's not difficult to use SFTP instead of FTP. For example, you'll want to use port 22 instead of port 21 when you are using FileZilla. Many other FTP and SFTP clients will just have a checkbox or a setting to switch between the two. The reason why you do not want to use FTP is that your username and password is passed from your computer across the internet to your web server in an unencrypted and exposed way. When you instead use SFTP, your username and password is encrypted before it it sent out across the internet. If a man-in-the-middle were to intercept your transfer of packets, they wouldn't be able to "see" your username and password.

Is it really possible for someone to "intercept" your packets? Yes, absolutely. It may not be likely, and it will probably not be a human, but there is certainly the possibility that some router that your packets travel through to reach the web server will have software or code looking for insecure FTP credentials. If you are really curious how many routers are in the middle of you and your web server, an easy trace route will show you. On a Windows machine, go to your command prompt by typing Run... and then cmd or typing in cmd to the search bar. Once you're in the command prompt, type tracert yourwebsite.com. After a moment this will show you all the routers that your information passes through before it reaches the destination.

One thing you'll notice when you use the SFTP for the first time is the need to accept the key initially. A warning box may appear such as shown below:

It is probably safe to trust the host when connecting to it for the very first time. If you add this key to the cache, regularly connect to the host, and one day the server's key changes, you can start to act suspicious.

Another helpful point to make is where you'll want to stick your web pages. Most web servers are running Linux (the operating system) and Apache (the software that listens for and allows incoming HTTP requests). On those machines you'll typically want to stick your web pages and content at the site root. Some site roots might look like:

  • /home/user_name/yourwebsite.com/stickyourpagehere.html
  • /home/www/yourwebsite.com/stickyourpagehere.html

DNS settings and how to change them!

DNS (Dynamic Name Server) settings are typically associated with your domain name. When you own your domain name you should be able to change some of the DNS settings if you so desire (and most of them time you probably wouldn't unless you were manually setting up email services, pointing your domain at a new host, setting up Google Apps for domains, or adding subdomains). But I'm including this here so you know they exist. Here are some fields and possible values (a complete list of DNS record types are here):
  • A is for mapping a hostname (think domain) to an IP of the host
  • MX is for use with mail exchange
  • TXT is for a simple textual message and you could theoretically put a random message here, but why would you?
What are your DNS settings and record types? There are lots of web tools out there that let you see them. Let's see what the settings are for netinstructions.com:
  • MX 10 ASPMX.L.GOOGLE.com means Google is handling my mail. This is because I have Google Apps for domains because I really like GMail to handle all of my email needs.
  • MX 20 ALT1.ASPMX.L.GOOGLE.com is backup in case the first email exchange server is down. Redundancy is important! The higher number indicates the order of preference.
  • MX 20 ALT2.ASPMX.L.GOOGLE.com is yet another backup. You'll also see many more.
  • A 173.236.239.73 is the IP address that is used to visit the website.
  • SOA server: ns1.dreamhost.com means that the server hosting my website is located at ns1.dreamhost.com. It's possible to look at DNS records of other websites to determine who their web host is.
To change your DNS settings you would want to visit the place where you registered your domain, not necessarily the people who are hosting your web site (unless they are the same company).
Lastly I'd like to mention that DNS settings take time to propagate throughout the internet. If you change your DNS settings at the company that you bought the domain from, and then immedietly go and run a DNS records look-up tool at network-tools.com, you probably won't see the changes. A number you'll see attached to most of the records is a suggested refresh interval such as 14400s or 4 hours. This is a suggested time for routers to update their routing tables throughout the internet.

PHP/MySQL Requirements for WordPress

When you are picking out a web server to host your website, you'll probably want support for certain web based programming languages and databases (PHP, Perl, Python, MySQL to name some). Even if you don't plan on writing your own custom code immediately, it is likely that you or someone on your team will want to expand your website's capabilities in the future. If you plan on using any Content Management Systems such as WordPress, Drupal, Plone, or any others, your web server will need to support the languages that those CMS's are built on. Wordpress requires PHP and MySQL, whereas Plone requires Python.

A good web host will proudly list all of the web languages and services that they support, as well as the current version. For example, the web host Dreamhost currently supports PHP 5 and MySQL 5 and the current WordPress version requires PHP 5.2.0 or greater and MySQL 5.

Conclusion

Hopefully at this point you have seen a very broad overview of how to make a website starting from nothing. As discussed, there are multiple ways of accomplishing each task. As you work on building your website you'll discover what works best for your needs. Personally I built my first website using Adobe Dreamweaver (a WYSIWYG editor)  and by following the book Dreamweaver CS3: The Missing Manual by David McFarland. My second and third websites were all done in NotePad++ and uploaded via FileZilla. For those I wrote a custom PHP backend interacting with a home built MySQL database. I found the book PHP 6 and MySQL 5 by Larry Ullman to be very helpful for those two projects. My last three websites have all been WordPress based and I am currently learning how to write my own custom themes. You'll soon realize that each approach towards building a website has its own set of pros and cons.

I would encourage you to do some of your own research in finding a decent web host and domain name registrar. Find a company that you trust and is transparent about their uptime. See if you can find any real customer reviews (I found a lot of fake reviews and fake websites built just for recommending Company X or Company Y). After doing lots of research my personal choice was Dreamhost. If you sign up with them through that link, I will receive a referral bonus (thank you!). I have been a customer of Dreamhost for about 3 years and have been very happy with them. However, do your own research! They are a great host for me, but your needs may be different.

Lastly I'd like to add that this is my first tutorial. Any feedback, criticism, experiences, or opinions are welcome and encouraged. Leave a comment below!