Mentor notes outlining an in-class workshop in which trainees will learn the basics of automatic deployment of their (simple) html/css projects using Netlify and GitHub.
Who's it for?
It's for trainees in the HTML/CSS module.
It's intended trainees attend the actual workshop session, which this document supports but does not replace.
Later in the course, a more advanced workshop may be given.
After this first 20-minute workshop, trainees should be able to:
- Configure the automated deploy of any STATIC (non-generated) site they create on github in future (including all significant CYF coursework projects).
- Recover from common mistakes they make during deployment configuration.
- After this first workshop, the trainees DON'T need to be able to explain HOW it is working (only what the trigger(s) and results are). We'll have time in later sessions.
Trainees should have:
- made some very simple sites (even a single index.html)
- the source of at least some of those sites as repos on github.
- know their github login
- created netlify account for homework
Trainees don't need to know anything about the command line or npm.
Wipe the projects from your netlify account, if you've previously given the workshop.
- demo 1
- demo 2
- practice deploy 1
- site naming conventions
- practice deploy 2
- practice deploy 3
Demonstration #1. A 60-second demonstration
Demonstrate VERY quickly, to build curiosity. We'll break it down later.
- Show teacher's copy of cake repo on github nbogie/responsive-cake-webpage
- Modify the content to prove we are live (trainees can suggest some silly (text) content.
- State: I wish to publish at https://cyf-nbogie-cakes.netlify.com/
- Post to slack
- Have a trainee check there's nothing there yet
- Add the site to Netlify
- Observe deployed site (random name)
- Change site name
- Observe at new location
- Commit and push
- Observe deployed site (maybe wait 60 seconds)
- Have trainees observe at new location
Demonstration #2. (Another 60-second demonstration.)
- If you haven't already, fork the project from https://github.com/CodeYourFuture/p5js-minimal
- Show the project source
- Deploy it
- Change the site title
- Observe site
- Commit & Push a change
- Observe site
About the demos
- I configured a free service called Netlify to automatically deploy one of my github repos as a website, whenever there was a change on the master branch.
- It made the website available at a random site name under netlify.com
- I configured my choice of site name.
- I tested it was working by pushing new changes to that branch.
This is what you'll learn to do now this workshop.
Setup: Creating a netlify account - ONE TIME ONLY
Exercise 1: deploy "responsive cakes" site
Exercise 1b - push some code changes
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]
Exercise 2 - deploy "karma clone" site
Demo Linking to your site from your github repo
- Put your full URL into your github repo website field
- Also, include it in your homework submissions.
Note: don't worry about "unfinished" sites
Don't worry that you are deploying "unfinished" projects - you can continue to make improvements over the next couple of weeks and your changes will automatically be deployed.
We just need to repeatedly practice the process so that you can do it on your own in future.
Trouble-shooting - when things go wrong
Mentor notes - points to cover:
- Simplest approach is often to delete & recreate site. (e.g. if you use the wrong github account or repo).
- Renaming site is possible
- When repos don't show up in the menu
- If site is not deploying on push to master (logs, branch awareness, propagation delay)
Note: Alternatives exist, but we'll use Netlify
Many alternatives for hosting exist (heroku, github pages) but we'll do it this way for CYF projects, to make it easier for volunteers. (You are free to deploy elsewhere in ADDITION to netlify!)
Deleting your hosted site
If you decide you don't want a site public, you can delete it.
Practice deleting a site.
Group exercise, recap & vocab
In your table, define what these things mean to you: