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 Github

Your Local Development Environment

  • When you created an index.html file on your computer 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 make requests, servers fulfill them (usually).

Requests are like questions: clients ask them, and servers answer them.

For our web discussions, client = browser.

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)

Github Pages

  • Goal: we will put your index.html and style.css file in a location that is accessible to the public
  • Step 1: Create a new repository in Github
  • Step 2: Use Sourcetree to link your API practice website.
  • Step 3: Add a new branch called gh-pages
  • Step 4: Find the new URL in your repository setting.
  • 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?
  • 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!