Hosting in 30 Minutes

Hosting in 30 Minutes

or

How can I make my website accessible to other people?

What is Girl Develop It?

• A 501c3 non-profit organization dedicated to making learning software development affordable and accessible to all women
• Founded in NYC in 2010 by Sara Chipps, CTO of the Flatiron School and Vanessa Hurst, founder of CodeMontage
• Now 36 chapters in cities around the US and growing.
• Thanks for supporting the Central VA chapter!

So... you made yourself a website in HTML class?

Congratulations!

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
• 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

Enter: 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
• 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

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.

• 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

Hosting your client application

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.com, 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!

• So, what kind of application did you make in HTML class?
• It's a client app! Why?
• It doesn't store or retrieve data, 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