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
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
-
Visit https://static-sample.netlify.app/
-
Right click on the page, and select View page source (or use a different method)
- 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]
Clicking this 👆 button will automatically:
- Connect your GitHub account to Netlify.
- Clone my sample repo to your GitHub account.
- 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: