We have been creating websites and coding in HTML and CSS. Up until now, we have only been able to view our website files through our web browsers on our own computers. It’s time we share our websites with the world! In this lesson, we will go over purchasing a domain name for our web site, purchasing web hosting, linking them up, and putting our websites on the World Wide Web.

Outcomes for this lesson:

  • Purchasing a domain
  • Purchasing a web server (web hosting)
  • Updating domain name’s nameservers
  • Uploading a website onto web hosting

Lesson Preparation

We are going to be purchasing domain names and web hosting so that we can get our websites online. You will need between $20 and $35 and a method to purchase these online (credit/debit card).

VERY IMPORTANT: Some web hosting companies give you the option to purchase a domain name through them while buying hosting. Even though this may be convenient, this is generally a bad practice. If possible, always purchase a domain name from one company (a domain registrar) and purchase web hosting from a completely different company. You will be able to link the two together after you purchase both.

Before we start, let’s get some background on domain names and web hosting to understand their purposes.

Domain Names

A domain name is the unique web address (or name) that tells your browser where to find a website. Google.com, reddit.com, and yahoo.com are all domain names that people use to find these websites.

Computer Talk

Domain names are actually a mask for something more complicated called an IP Address. An IP address is a unique number assigned to a computer that is connected to a network. Computers use IP addresses to communicate or “talk” with one another (send and receive data). There are specially formatted computers or “servers” (for the web, they are web servers) that store website files and send them to another computer when a user visits a website.

To understand how this works for the world wide web, let’s start with an example.

Say we want to visit the Reddit website. How would we do this (without knowing reddit.com)? Well, for us to be able to view Reddit, we need our web browsers to read Reddit’s website files. Now, we need to know the IP address of the web server that stores those files. Pretend that we know this IP address and it is 192.168.1.1 . We then type that in the address bar at the top of our browser and navigate to that web server, that then allows us to read the website files.

Painful right? And where would we begin to find these unique IP addresses and then remember them each time we want to visit a website? Well, domain names make this easy for us.

Domain names are “mapped” to a unique IP address (through a complicated process), most often to the IP address of a web server storing the files for that certain website. When someone types in a web address like reddit.com, our web browser uses that domain name to find the address of that website’s server, which serves up the website we want to visit. Domain names eliminate the need for us to remember complicated IP addresses.

An oversimplified step-by-step of visiting a website:

– Type domain name (web address) of website for browser to visit.

– Complicate process to match that domain name with an IP address ensues (we don’t have to worry about it).

– Web browser finds web server, and serves up the website you were looking for.

For a better and more thorough explanation, watch this six minute video:

Anatomy of a Domain Name

A web address will typically look like:

http://www.reddit.com/

Let’s dissect this.

http:// is called the protocol. It is a method of transporting information and we don’t need to worry about it. You will also see https://, which means it is a secure connection.

www. is called a subdomain. Subdomains are NOT purchased with your domain name. Subdomains are used to separate large parts of a website. For example, your domain name is webhosting101.com . A subdomain such as forum.webhosting101.com could be used to house the forum portion of your website. Subdomains are created via your web hosting control panel, and do not cost extra.

reddit.com is called the domain name. This is mapped to the IP address of your web server. This is what you purchase.

.com is called a Top Level Domain (TLD). There are many TLDs such as .com, .net, .org, .me, and .us . Functionally, we don’t need to know their difference.

Purchasing a Domain Name of your own

Domain names can be purchased through companies called Domain Registrars. A popular domain registrar you may have heard of is GoDaddy.com . We will be using the domain registrar Namecheap.com . They are reputable, ICANN accredited, and have a clean and easy-to-use interface.

Domain names are unique addresses, which means that only one person can own a certain domain name at a time. No two people will be able to own reddit.com.

Domain registrars have a search function so that you can check whether the domain name you want is available for purchase. They will also show you the domain name you searched for with different TLDs.

Different TLDs are priced differently, even for the same domain name. Domains are purchased on a per year basis (you can purchase multiple years at a time if you wish).

Note: A domain name alone is not sufficient to put a website online.

Let’s get to purchasing a domain name!

Domain Name Purchasing Step-by-Step

We will be purchasing our domains through Namecheap. Go to their home page. For this example, I am going to be searching/trying to purchase the domain name brendinnye.com . Think about a domain name you want to purchase for your website.

  1. Navigate to Namecheap.com.
  2. Search for the domain name you wish to purchase:Domain_Purchase_Guide1
  3. Check to see if your domain name is available. If not, either choose to use a different TLD (if available), or seach for a new, different domain name. In the pictuer below, you will see that the domain name I want is available. Also further down the list, notice there is a TLD option, brendinnye.me, that is grey’d out and says “Make An Offer”. This means that the domain has been purchased and is owned by someone else (I actually own this one). You have the option to make an offer to buy it from the person who owns the domain name. This is almost always a BAD idea (person will sell it only for a large amount of $, etc.) so in this case, you will need to search for a different domain name, or use a different TLD.Domain_Purchase_Guide2
  4. Once you have found a domain name that is available, add it to your cart (grey cart button on the right side of the domain name).
  5. Click “View Cart” to go to the Shopping Cart area:
    Domain_Purchase_Guide3
  6. The Shopping Cart is will have many options for your order before you confirm it. Let’s go through them:- In the “Domain Registration” section, you will see the domain name you want to purchase. You have the option of choosing how many years you want to register you domain name for. Keep it at 1 Year.- Keep autorenew off, unless you want to have them automatically renew your domain name for you and charge your credit/debit card for another year.- Free WhoisGuard is Namecheap’s service that anonymizes your Whois information. Whois is a public database that has the contact information of every person who registers a domain name (the contact information that you provide them when purchasing).- Namecheap provides this service for free for one year. You can choose to take this off by clicking the grey X to the right of it. If you keep it, make sure you have autorenew off so that they do not automatically bill you for it in a year.- Under the “Improve Your Site” section, you will see extra addons for your site (they cost extra $). Ignore them.
    Domain_Purchase_Guide4
  7. After you are satified with your subtotal and all of the options you want, click “Confirm Order” to continue the purchasing process.
  8. At the next screen, Namecheap will either ask you to create an account to continue, or sign in if you already have a Namecheap account. Make sure to save your login credentials somewhere for future reference.
  9. At the next screen, you choose your purchasing method and put in your billing/ purchase method information. This is pretty self explanatory, but I will tell you to pay attention to the section toward the bottom of the page labeled “Renewal Settings for Your Purchase” (shown in the image below). Make sure nothing is checked to ensure that your domain name and WhoisGuard (depending if you kept it) are not scheduled for auto-renewal (unless you want them on autorenewal).Domain_Purchase_Guide5
  10. Make sure to continue the purchasing process until you get an order confirmation.
  11. We are all done with purchasing a domain name! Congratulations! We will come back to Namecheap later, so make sure you know your login information.

Web Hosting

You should now have a web address (domain name) for your website. A domain name alone is not sufficient for putting a website online, because it just tells a web browser where to go. We need somewhere to store all of our website files (HTML, CSS, JS, PHP, etc.), so that when someone does type in your web address, their browser will be able to locate and read your website files.

This is where web hosting comes into play. Earlier, I mention there were specially formatted computers called servers. Well, to store our website files and allow users to visit our websites, we need a web server. Web Hosting is a general term for a service that provides a web server to store or “host” websites that can be accessed online.

We can purchase a web server from a web hosting company. Web hosting companies own and manange vast banks of servers. There are many web hosting companies out there, such as HostGator, Dreamhost, Mediatemple, and GoDaddy. As of 10/28/15, we will be purchasing web hosting through Namecheap.

There are many options or “plans” when purchasing web hosting. Web hosting can range from $2/month to $20/month to $175/month. The difference between them is the level of performance of the web servers hosting your website. The advantage of paying for more expensive web servers is your website will be able to handle more visitors.

The key here is your needs. We aren’t going to be running gigantic websites. We just need basic hosting that will allow us to put our HTML, CSS, images, and eventually WordPress websites online.

Let’s get to purchasing a web server!

Web Hosting Purchasing Step-by-Step

We will be purchasing web hosting through LithiumHosting. Go to their home page.

  1. Navigate to LithiumHosting.
  2. On their homepage, at the top or if you scroll down into the middle, you will see their hosting plans. There are three hosting categories: “Personal”, “Reseller”, and “VPS”. Since we just need basic web hosting, choose the Personal category.hosting_guide1
  3. Within the Personal Hosting category, there are a few options, each varying in storage space and bandwidth. For our websites, we just need the most basic hosting plan, Economy. It has enough storage and bandwidth for our websites. Click Order Now under the Economy section.hosting_guide2
  4. Before we continue with our purchase, we need to tell Lithium Hosting that we already have a domain name and DO NOT want to register a new domain with them. This may be easier, but it is a BAD PRACTICE. Choose I will use my existing domain and update my nameservers. Enter your domain name and its TLD (.com, .net, etc) and click “Click to continue”.hosting_guide3
  5. The shopping cart screen will update. You should see more options related to your web hosting purchase. Let’s go through them:- Billing Cycle: You choose the interval you pay at. Lithium Hosting automatically makes you hosting plan autorenew at each interval. Choose 12 Month Price. This means they will bill you one time each year ($19.50) You may choose 1 Month Price, but remember, they will bill you a little bit more ($1.95) per month.- Server Location: This is the physical location of the servers that will store your website. Choose USA.- Available Addons: Make sure this is unchecked. We don’t need this service.
  6. When you are satisfied with your options, click Checkout.hosting_guide4
  7. You will be sent to the “Review and Checkout” page. Here you will create a new account under “New Customer”(unless you already have an account). At the bottom of the page, you will choose your payment method, agreed to their Terms and Conditions, and complete your order. Save your login details (email and password) for future reference.hosting_guide5hosting_guide6
  8. You are going to receive a few emails from Lithium Hosting. Make sure not to delete these. The email title “New Account Information” has very important information to be able to finish setting up your website.hosting_guide7

Congratulations! You have purchased web hosting and are one step closer to hosting a website online. Make sure to save the “New Account Information” email from Lithium Hosting, you will need it in the next step and for future reference.

Namecheap Web Hosting Purchase Step-by-Step

  1. Navigate to namecheap.com
  2. Under the Hosting dropdown in the navigation menu, choose Shared Hosting.
    nc_hosting1
  3. For our class, we will be purchasing the Value hosting plan, which is more than enough for our websites. Choose the Value hosting plan by hitting Add to Cart.
    nc_hosting2
  4. In the Domain Name box, Namecheap gives you multiple choices in regards to what domain name you want to use with the hosting plan. At the time of this writing (10/28/15), Namecheap is offering a free .website domain name for 1 year with purchase of a hosting account. For the purposes of our class, choosing the free domain name for a year is fine (yellow arrow), but in general, you want to purchase a domain name separately from your hosting company. Normally, if you purchased a domain name from another domain registrar, you would choose “Use a domain I own from another registrar” (Green arrow)
    nc_hosting3
  5. Here, I chose to get a free .website domain for 1 year (image reflects this). After you have worked through the option you have chosen (here, I would hit Add New Domain to Cart) , click Continue under Your Order.
    nc_hosting4nc_hosting5
  6. Here you can check the items in your cart. Double check everything is the way you would like it. Once you are satisfied, click Confirm Order.
    nc_hosting6
  7. If you don’t have a Namecheap account, you will need to make one to continue with your purchase. A Namecheap account is needed to manage your domain name and other services.
  8. During your order, there will be a section detailing your renewal settings for your purchase. My recommendation would be to leave these boxes unchecked and if/when it comes time to renew your services, you can manually renew them.
    nc_hosting7
  9. Once you payment has processed, you can go to your Namecheap account dashboard. There you can see the domains/products you own. To see that your hosting account is active, click the Manage button next to your domain name.
    nc_hosting8
  10. Here you can check the status of your hosting account. If you click Manage, you can view and edit settings for your hosting account.
    nc_hosting10

Connecting Domain Name to Web Hosting: Updating your Domain’s Nameservers

By now, you should have a domain name and a web server, but we aren’t quite done yet. If you were to upload some website files to your web server and users were to type in your web address to find your website, they still wouldn’t be able to locate your web server or website files. Why?

Well, your domain name hasn’t been “mapped” to your web server yet. We need to update your domain name’s nameservers so that web browsers will be able to find your web server via your domain name. Nameservers are part of the complicated process that allows web browsers to find your web server (really its IP address).

Let’s update your domain name’s nameservers. You will need your Namecheap account login details.

Updating Nameservers Step-by-Step

Your web host should provide you with nameservers so that your domain name can be mapped to your web server. They provide their web server addresses in the “New Account Information”/”Your hosting guide”/new hosting account email they send you. Make sure that you have that email open as we go through these steps.

  1. If you haven’t already, open the new hosting account email from your web host. You are going to need the Nameserver addresses, Nameserver 1 and Nameserver 2 in the case of Lithium or Namecheap
    .nameserver_guide10nameservers_namecheapemail
  2. Navigate to Namecheap.com.
  3. Login to your Namecheap account, sign in is at the top of their web page.
  4. You should be at your Namecheap dashboard now. On the left, click Domain List
    nameservers_2
  5. Click the Manage button for the domain name (the one you just registered) whose nameservers that you want to change.
  6. From here, I won’t be able to take accurate screenshots, as I have already updated my nameservers on my domain to my current web hosts. Don’t worry, just follow my instructions carefully.
  7. Click the Advanced DNS tab.
  8. Under the DNS/Host Records section, click the Edit button.
    nameservers_4
  9. Under the Domain Nameserver section, choose the Custom option.
    nameservers_3
  10. Text boxes should appear. Here you will input your nameservers. For example, next to Nameserver 1, input the address of the first nameserver you were provided in your email. Do this for each nameserver you were given in your email.
  11. In the case of Lithium Hosting or Namecheap, they provided us two nameserver addresses, we don’t need to fill in any more. Leave box 3 and 4 blank.
  12. Hit Save Changes.

Nice, you have just update your nameservers! One important note:

When you update or change your name servers (DNS servers), it can take up to 24 (sometimes 48) hours for your domain name to fully map to your web server. This process is called “propogation”. From experience, I have seen the changes take effect after 2 minutes and a few hours.

Uploading your website

After some time, your domain name should propogate and be mapped to your web server. To check if it has propogated, search for your website in your browser, using your domain name. If it has propogated, you should see a Lithium Hosting generated page.

It’s time we utilize your web server and web address. Let’s learn one way to upload files to our web server.

Make sure to have your “New Account Information” email from Lithium Hosting open while you go through this.

CPanel and CPanel File Manager

Right now in regards to your web hosting, you have only seen your Lithium Hosting account. This is great for general account administration (such as lost passwords and such), but where or how can we access the web server we bought?

To access our web server, we need to use its control panel. There are different control panels between web hosting companies. One popular control panel that many web hosts use is called CPanel. CPanel is a graphical control panel that allows you to access and use the many different features of your web server. Lithium Hosting uses CPanel as their control panel for their web servers.

To access CPanel for your web server, go to:

yourDomainName/cpanel

For me, I would go to:

brendinnye.me/cpanel

Your browser should redirect you to a page that looks like this:

cpanel_guide1

Here, you will login to the CPanel for your web server. The login details are the ones provided to you in your new hosting account email from your web host. Here we have two example images, one from Lithium Hosting and one from Namecheap.

cpanel_guide2

cpanel_info1

These are not the login details you use to login to your Lithium Hosting account or Namecheap.

Your username and password are randomly generated. You can’t change your username, but you can change your CPanel password to something easier to remember. A guide on how to do this can be found here.

Login to your CPanel now.

You should arrive at a screen that will look something like this:

cpanel_guide3

This is the CPanel home. There are a lot of features here, but we won’t need to learn many of them.

Upload Files to Web Server Using File Manager

It’s time to upload a website on our web server. We need to access the storage space on our web server. One way to do this is through File Manager.

Click on File Manager:

cpanel_guide30

A popup should appear, just stick with the default choice and hit Go.

cpanel_guide40

You should arrive at the file manager:

cpanel_guide5

There are many folders here. For our website files to viewable online, we need to put them in either the public_html folder or the www folder. Both of them go to the same folder, so it doesn’t matter which you choose, but I prefer public html (had to leave the underscore out for formatting reasons).

Double click the public_html folder or click it on the left side bar to navigate into it.

The contents of my public_html folder will look different than yours because I have been using my web server already and you have a brand new hosting account.

cpanel_guide6

This folder is where you will upload your website files. You should see a folder called cgi-bin. Don’t touch/remove this. You should also see a file called lithium.php. This was the file that generated the Lithium Hosting page on your website earlier.

This folder is where you want your index.html file to go, so that the web server knows what website file to dish up for a site visitor.

There are commands at above the folder view that you can use, such as New Folder, Upload,Delete, and more. We are going to use Upload to upload files to this folder on our web server. Click the Upload icon.

cpanel_guide7

To upload a file, click Choose File.

cpanel_guide9

Once you have chosen your file, the upload screen will automatically upload your file and you should see a grey confirmation in the bottom right corner of your screen.

Nice, navigate back to your public_html folder (you can close the upload CPanel tab in your browser if you are all done) and you should see the file in chose in the folder. All done.

Homework Assignment

Part 1

For homework, as of 10/28/15, you need to purchase access to a web server. Follow the instructions above. You will also need a domain name that is mapped to your web server. If you signed up for web hosting through Namecheap and chose to get a .website domain for 1 year, they will automatically be mapped already.

Part 2

After your domain name has propogated and you can access CPanel, you will upload the two files I provide you here:

To save them on your computer, you need to right click the links and choose “Save link as”. Save them as “index.html” and “style.css”. You can download them here:
index.html, style.css.

  • Upload these files into your public_html folder.
  • Remove/Delete the lithium.php file if you are using Lithium Hosting as your web hosting company.

After you have uploaded them, confirm that they are the website that shows up when you visit your web address. Confirm this by going to your website in your web browser. For example, I would go to brendinnye.me.

To receive full credit on the assignment, when I visit your web address (you will submit this to me), I need to see the correct web page (index.html) with the correct styling (style.css).

Submission

Email wordpress@labs.everettprogram.org the following:

  • Email subject line in the following format: HW#4 Firstname Lastname
  • The web address to your website (the one that will display the files we provided you in Part 2)