Netlify Deploys 101

Jessica Parsons

@verythorough


slides.com/verythorough/netlify-101

What we'll cover

  • The simplest site ever,
    and how Netlify makes it cool

     
  • The challenges of more complex sites, and how Jamstack helps solve them
     
  • The life-changing magic of continuous deployment with Netlify and Git

The simplest site ever

 

Right-click on the link below

and select "Save link as":


index.html

Add an image

Right-click on this image and

and select "Save image as":

Add an image

 

 

Copy this text into your index.html file:

<img src="pups.jpg" alt="Three little puppies"/>

A slightly less simple site

 

  1. Visit https://static-sample.netlify.app/
     
  2. Right click on the page, and select View page source (or use a different method)
     
  3. Try comparing the source code in different pages. How are they the same? How are they different?

A Little History

Web pages as files

Simple Static Sites

request "cats.html"

Web pages as files

Simple Static Sites

  • Pros: pretty fast & secure, very simple
  • Cons: repetitive to build

Web pages as files

Simple Static Sites

Templates & Databases

Let the computer do the work

request "cats.php"

get template

query database

fill content

Templates & Databases

Let the computer do the work

  • Pros: quicker to build and change
  • Cons: slower, less secure, more complex

Templates & Databases

Let the computer do the work

Single-Page Apps (SPAs)

The browser as app server

  • Pros: less time between pages
  • Cons: slow first load; more work for client

Static Site Generators

Automating in advance

(or database)

Static Site Generators

Automating in advance

Static Site Generators

Web pages are files again

request "cats.html"

"Semi-handmade" site

Build and drop

[demo time, because you don't want to do it this way]

Deploy to Netlify

Clicking this 👆 button will automatically:

  1. Connect your GitHub account to Netlify.
  2. Clone my sample repo to your GitHub account.
  3. Set your Netlify build settings and start building your site.

Continuous Deployment

Let the computers do the work

Collaborate and Preview

Add a pet to petsofnetlify.com

Basic instructions in the repository:

https://github.com/netlify/petsofnetlify