Front End Web Basics

Deploy a Site to Netlify

Make an account on Netlify

  1. Go to Netlify
  2. Click Sign Up in the upper right
  3. Choose "Email" sign up (unless, of course, you already have a GitHub or Bitbucket account)

image of netlify account creation

  1. Check your email to confirm. Click the verify button
  2. Go back to Netlify, you should be logged in or able to log in.
  3. Click through the dialogues until you see this:

image of netlify dashboard

Download your HTML, CSS, and JS files from codepen

  1. Log into your codepen account and visit the pen you'd like to deploy to Netlify
  2. Click "export" in the lower right
  3. Choose .zip
  4. Click download .zip

image of codepen export zip

  1. Find the .zip file on your computer - look in the Downloads folder
  2. Open it up
  3. Find the dist folder.

image of src and dist directories

Upload the files to Netlify

  1. Drag the dist folder over to the dropzone on netlify where it says "Want to deploy a new site without connecting to Git? Drag and drop your site folder here"

  2. Wait for it to build...and voila!

  3. You will probably want to change the url to something that makes more sense. In Netlify, go to "Site Settings" for your site.

  4. Click the "Change site name" button

change site name interface

  1. Now you can visit your site! Pet Quiz

← Other Learning Resources →