Class12.md

Deploying Files

Today's exercise will teach you how to actually deploy your work to a hosting provider, so that you can show it to the world!

There are two providers we'll use, you can pick.

• Surge
• Paperplane

If you're comfortable with the command line, pick Surge. Otherwise, you can host files with Dropbox and Paperplane.

Exercise 1

Pick an assignment from the last group of assignments to deploy. You can use any complete assignment.

• Start by creating a new folder for this assignment
• Create two files in this folder, index.html & index.js and open them in atom
• Copy over the javascript code from the assignment into index.js
• Copy the html code from the same assignment into index.html (If the assignment doesn't have any html create a simple html file)
• Add a <script> tag at the end of the head in index.html and set the src attribute to point to index.js
• If you have css from the assignment go ahead and make a new style.css file, copy the code into it and add the link tag in index.html

• Depending on the provider you chose, follow their directions to deploy index.html
  • With Paperplane, you'll need to put index.html somewhere in your Dropbox
  • With Surge, index.html can be anywhere- we recommend having a folder for your code in your home directory, with a subfolder for each project. ~/src/websites/myProject would make a great file path.
  • With both providers, choose the option that doesn't involve Github. If you know Git already, congrats! Try with Git. If you haven't looked at Git before, it's important to know but is way beyond the scope of this class.

Exercise 2

Download a template from this website: https://startbootstrap.com/ Avoid the "premium themes", just download a free theme. If you can't pick, use this one

• Once you have chosen a template, you'll get a .zip file. It'll end up in your downloads folder. Unzip the file.
• Once you've unzipped it, it will create a folder with a bunch of files in it. Move this entire folder to the place you're keeping your projects.
• Deploy this whole set of files using the provider of your choice. Make sure the HTML, CSS and JS are all working. There are other files in the folder too, but don't worry about them. Just ensure you can get HTML, CSS, and JS files all working and linked together properly.