Skip to main content

Workshop: Basic Automatic Project Deployment using Netlify

Trainee exercises and notes.

NOTE: Wait!#

Don't start each exercise until the teacher asks you to.

Setup: Creating a netlify account - ONE TIME ONLY#

(If you have not already done this for homework...)

  • Log in to github with the account you use for CYF coursework
  • Visit https://www.netlify.com/
  • Click "get started for free"
  • Choose github under "Sign up with one of the following"
  • Read the permissions you are granting and click "authorize netlify"

Exercise 1: deploy "responsive cakes" site#

  • Deploy your "responsive cakes" homework using the instructions below
  • project name: cakes
  • Name the site cyf-YOUR-GITHUB-USERNAME-cakes e.g. cyf-nbogie-cakes

Instructions: the instructions are here.

Exercise 1b - push some code changes#

  • Make some VERY quick visual changes to your site in vscode (change an <h1> or a background colour)
  • Commit and push the change to github (to the same branch you chose at setup)
  • Check your site url again - is it updated? (it might take 60 seconds)
  • Check on someone's phone, too.
  • Check your neighbour's site (send the link via slack)
  • (Celebrate!)

Note: CYF site-naming conventions#

Use the standard format for site names for all CYF coursework projects - see site naming conventions

  • cyf-[your github username]-[exact project name as supplied by teacher]

Examples:

  • cyf-lucymac-cakes.netlify.com
  • cyf-nbogie-cakes.netlify.com

Exercise 2 - deploy karma clone#

  • Set up netlify to automatically deploy it
  • Set up the site title correctly
  • Test the deployed site to check it seems ok
  • Make (and push) some changes to check the site is redeployed automatically
  • Test the site on your phone, and bookmark it
  • Test the site of the person sitting next to you!

Exercise 3 - deploy a p5.js site#

  • Fork this repo: p5js minimal example

  • deploy it as cyf-username-p5js

  • Set up netlify to automatically deploy it

  • Set up the site title correctly (CYF naming conventions!)

  • Test the deployed site to check it seems ok

  • Make (and push) some changes to check the site is redeployed automatically

  • Test the site on your phone, and bookmark it

  • Test the site of the person sitting next to you!

Exercise 4: delete a deployed site#

Instructions for deleting a site (if you need them).

Reference material#

For when you forget!#

Learning more#