Skip to content

Instantly share code, notes, and snippets.

@rogerwschmidt

rogerwschmidt/Class12.md

Created May 23, 2017 00:13
Show Gist options
  • Save rogerwschmidt/e03c182c58be8e19dcad8d9eb19a897c to your computer and use it in GitHub Desktop.
Save rogerwschmidt/e03c182c58be8e19dcad8d9eb19a897c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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.

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.

  • If you completed your project in Codepen:
    • Create a file called index.html
    • Make sure index.html has an <html>, <head> and <body> tag. See JS for Kids for details on these tags and how to use them.
    • In index.html, add your HTML from Codepen to the <body> tag.
    • At the bottom of your <body> tag, just before the closing </body> tag (inside <body> but at the end of it, after all the other HTML)- create a <script></script> tag.
    • Add all of the JavaScript from your JS window to the inside of the <script> tag. Don't put it all on one line, make sure it looks just like the JS window of your Codepen.
    • In the <head> tag, add a <style></style> tag. Add the CSS from your Codepen to the inside of this tag. Make sure it's not all on one line, make it look just like the contents of your Codepen.
    • Make sure to save 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment