Skip to main content

Workshop 1: Mentor Notes

What's this?#

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.

Workshop goals:#

  • 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.

NON-goals:#

  • 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.

Workshop pre-requisites:#

Trainees should have:

Trainees don't need to know anything about the command line or npm.

Computer setup#

Wipe the projects from your netlify account, if you've previously given the workshop.

Overview:#

  • 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.

Live coding:

Demonstration #2. (Another 60-second demonstration.)#

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]

Examples:

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

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.

Instructions here

Group exercise, recap & vocab#

In your table, define what these things mean to you:

  • deployment
  • automatic deployment