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

• karma clone
• project name: 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!

• The CYF Netlify auto-deploy CheatSheet (for when you forget all this stuff)

Learning more

• We'll revisit Netlify deployment later in the course.
• This video tutorial (2 minutes) is old and has some inaccuracies.
  • you can watch it, but for detail use OUR instructions.
• These written instructions are also not perfect:https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/ (you should not fill in "dir" and "build command" (until the React module))
• The official Netlify docs may be initially overwhelming - you won't need to use many of their features.