Netlify Deploys 101
Jessica Parsons
@verythorough
slides.com/verythorough/netlify-101
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488477/scroll.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488478/shield.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488476/scales.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488482/tools.jpg)
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":
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/10009586/pups.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488477/scroll.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488477/scroll.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488477/scroll.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488477/scroll.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458490/cats-html-word.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458406/file-server.jpg)
Web pages as files
Simple Static Sites
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488460/cats-html.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458406/file-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488470/laptop.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488460/cats-html.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488483/website.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458490/cats-html-word.jpg)
request "cats.html"
Web pages as files
Simple Static Sites
- Pros: pretty fast & secure, very simple
- Cons: repetitive to build
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488460/cats-html.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488466/dogs-html.jpg)
Web pages as files
Simple Static Sites
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458490/cats-html-word.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5977965/dogs-html-word.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488474/pets-template.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458415/pets-php-word.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488465/db.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458404/database-word.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488457/app-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458417/plus.jpg)
Templates & Databases
Let the computer do the work
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488470/laptop.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488460/cats-html.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488483/website.jpg)
request "cats.php"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458569/cats-php-word.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488457/app-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488474/pets-template.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488465/db.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488457/app-server.jpg)
Single-Page Apps (SPAs)
The browser as app server
- Pros: less time between pages
- Cons: slow first load; more work for client
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488457/app-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488470/laptop.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488468/gears.jpg)
Static Site Generators
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488474/pets-template.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458417/plus.jpg)
Automating in advance
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458413/pets-html-word.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488461/cats-md.jpg)
(or database)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488459/build-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5978115/cats-md-word.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488474/pets-template.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458413/pets-html-word.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488459/build-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458397/batch-md.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458396/batch-html.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458406/file-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458402/cdn.jpg)
Static Site Generators
Automating in advance
Static Site Generators
Web pages are files again
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458406/file-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488470/laptop.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488460/cats-html.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488483/website.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458490/cats-html-word.jpg)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488482/tools.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488482/tools.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488482/tools.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488482/tools.jpg)
Continuous Deployment
Let the computers do the work
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488482/tools.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488482/tools.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488482/tools.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488482/tools.jpg)
Collaborate and Preview
Add a pet to petsofnetlify.com
Basic instructions in the repository:
Netlify Deploys 101
By Jessica Parsons
Netlify Deploys 101
A 1-hour intro to deploying on Netlify and why it's awesome.
- 580