Introduction to Web Hosting

How can I make my website accessible to other people?

So... you made an awesome website in HTML/CSS/Javascript?

But... now what?

What we'll cover

• Hosting: how a file on your computer becomes a public website
• Components of hosting and website architecture
• Options and Tradeoffs of various hosting providers
• A simple example using Dropbox

Your Local Development Environment

• When you created an index.html file in your HTML class and loaded it up in your browser, your browser treated it like a real website
• But it is really just a file on your computer
• The browser's address bar will tell you if the file you are looking at is being loaded from your computer or from the World Wide Web

Your Local Development Environment

• The goal of setting up hosting is to get that file that lives on your computer to a place where everyone can load it up in their browser

Can that place be your computer?

• By default, random people on the internet cannot access files on your computer
• You can give them permission to access files on your computer though
• Example: you can set up a webserver on your computer
• Downside: but then your files will become inaccessible if your computer isn't on
• Common solution: put your files on a server on some other computer that stays on all the time

Hosting

• Hosting basically just means: a place where you can put your files, made accessible via a server being run on a computer someplace else, managed by someone else

Hosting Examples

• Example: when you check your gmail, your browser is displaying the webpage that is your gmail inbox, after loading this webpage from a server somewhere else, managed by google
• Example: when you create a website on wordpress.com, your website files are running on a server somewhere else, managed by wordpress

Big Picture

And now a little bit more about the world wide web

Home and daily life of a web site

A typical web site will live or is "hosted" on a web server. Web servers are often large computers connected to a network.

The Story

• Type a web site address into the address bar
• DNS connects you to the hosting server
• The files are then sent back to your computer for display
• Sometimes code must be compiled before being sent back to you.

Example: twitter

Clients vs. Servers

Clients vs. Servers

• While any type of computer can be used as a server, they are generally larger and more powerful than others.
• Client applications run on a client machine that you are interacting with (like your browser)
• Server applications run on a machine someplace else, that your client or client application can talk to

Hosting your client application

• Your index.html and style.css files are client code.
• After your web browser loads them up, they are run by your web browser to display your page.
• To make it so that anyone's browser can load them up, we will put them on a computer somewhere else (the host)

Hosting your client application

• A server on that computer somewhere else will be the gatekeeper that lets anyone's browser load up your files (the client code)
• In this example, your code is the client code, and the server only acts as a gatekeeper

So, which hosting provider should I use

Types of Hosting Providers

• File stores: a place to put files; Example: S3, Github Pages, Dropbox
• Package Providers: a place where you can get a domain name, optional preinstalled software; Example: wordpress.org, bluehost.com
• Roll your own: a place where you can set up and manage all the website components on your own, including databases, servers, domain names, etc. Example: EC2, Heroku, Linode, Digital Ocean

When to use them?

• File stores: when you just need to make static files available
• Packages: when you need a cheap way to roll out a whole website (for a small business for example), and need everything to "just work" but dont need customization
• Roll your own: when your software or business dictates you need full control; for example, most tech companies build their own website architectures and hosting solutions

Tradeoffs

• File stores: good for static pages or client applications, insufficient for server applications
• Packages: good for people who want to create and manage content, frustrating for techies who want more control or want to use software components not on the "allowed" list
• Roll your own: more time consuming, need to be a techie to implement and maintain, but full control, ability to deploy/host any kind of client or server application, often cheaper

Let's deploy your website!

• We will use an example that doesn't store or retrieve data. It involves only client code and no server code.
• Which type of hosting provider best fits our use case?
• File store
• (Technically you could use any hosting solution, this will just be faster, if we are ok with the associated tradeoffs)

Dropbox

• Goal: we will put your index.html and style.css file in a location that is accessible to the public
• Step 1: log in to your dropbox.com account
• Step 2: click on the "Public" folder
• Step 3: click "upload" and select your index.html file, upload it, and then do the same for the style.css file
• Step 4: Back in the file viewer, select (but do not open) index.html, then click "Copy public link"
• Step 5: Copy and paste that link into a browser.
• There's your website! Anyone can view it now!

Summary

• So that was pretty easy. What's next?
• Deploying changes: every time you make changes to your local file, and want to see these changes reflected in the public site, you need to reload these files
• But the link is ugly, how can I fix this?
• Tradeoffs again: you cant control the hostname of a Dropbox hosted file. **
• Goal of this exercise: identify the needs for your website, and then choose the hosting provider that best fits your needs

For more information!

Click here

THE END

Thank you for your attention!