static site gen talk
TRANSCRIPT
![Page 1: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/1.jpg)
Static Site GeneratorsDESIGN-DEV MEETUP 6/15/2016
![Page 2: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/2.jpg)
How to make a dope website.
DESIGN 101
![Page 3: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/3.jpg)
STEP 1.
Wordpress or Squarespace?
STEP 2.
Choose a ! theme.
STEP 3.
Profit """
![Page 4: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/4.jpg)
But in reality it’s more like this ...
![Page 5: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/5.jpg)
STEP 1.
Buy a domain from GoDaddy
![Page 6: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/6.jpg)
STEP 2.
Buy hosting from GoDaddy ...
![Page 7: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/7.jpg)
STEP 2.
Buy Hosting from ________Buy Hosting from ________
(Because ... ???)
![Page 8: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/8.jpg)
STEP 2.
Buy hosting from GoDaddy ...
![Page 9: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/9.jpg)
STEP 3.
YouTube for hours to change DNS & setup WordpressYouTube for hours to change DNS & setup Wordpress
![Page 10: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/10.jpg)
STEP 4.
Weep QuietlyWeep Quietly
![Page 11: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/11.jpg)
STEP 5.
Buy a ! Wordpress ThemeBuy a ! Wordpress Theme
![Page 12: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/12.jpg)
STEP 6.
Decide to change this 1 little thing ....Decide to change this 1 little thing ....
![Page 13: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/13.jpg)
STEP 7.
Open the WP Admin code viewOpen the WP Admin code view
![Page 14: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/14.jpg)
STEP 8.
WTF IS ALL OF THIS ?!!!WTF IS ALL OF THIS ?!!!
![Page 15: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/15.jpg)
STEP 9.
Make a change and everything breaksMake a change and everything breaks
![Page 16: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/16.jpg)
STEP 10.
Weep QuietlyWeep Quietly
![Page 17: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/17.jpg)
STEP 11.
Spend hours reading docsSpend hours reading docs
![Page 18: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/18.jpg)
STEP 12.
Download MampDownload Mamp
![Page 19: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/19.jpg)
STEP 13.
Install Wordpress LocallyInstall Wordpress Locally
![Page 20: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/20.jpg)
STEP 14.
Break site with a trailing space in WP ConfigBreak site with a trailing space in WP Config
![Page 21: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/21.jpg)
STEP 15.
Weep QuietlyWeep Quietly
![Page 22: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/22.jpg)
STEP 16.
WTF ?!! None of my content is hereWTF ?!! None of my content is here
![Page 23: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/23.jpg)
STEP 17.
Download & Import DatabaseDownload & Import Database
![Page 24: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/24.jpg)
STEP 18.
Hack at PHP until something works Hack at PHP until something works
![Page 25: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/25.jpg)
STEP 19.
Spend hours trying to redeploy your siteSpend hours trying to redeploy your site
![Page 26: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/26.jpg)
STEP 20.
Weep QuietlyWeep Quietly
![Page 27: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/27.jpg)
GREAT USER EXPERIENCEGREAT DEVELOPER EXPERIENCE + =
![Page 28: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/28.jpg)
Fast Previews of change
Great tooling (preprocessors etc.)
Simple Templating Language
Simple Deploys
GREAT DEVELOPER EXPERIENCE
![Page 29: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/29.jpg)
Fast Page Loads
Focused / Relevant Content
Great Design
Accessible
GREAT USER EXPERIENCE
![Page 30: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/30.jpg)
The value of Simplicity
![Page 31: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/31.jpg)
“If you don’t actively fight for simplicity in software,
complexity will win … and it will suck”
- Henrik Joreteg
![Page 32: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/32.jpg)
SIMPLICITY:
Predictable results
Makes things easier to use / learn
Allows you to focus
Reduces the cost of change
![Page 33: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/33.jpg)
By simplifying the development experience, you are able to focus
on the things that matter - design and content.
![Page 34: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/34.jpg)
www.something.com
BrowserDatabase
Webpage
HTML / CSS / JS
Server
User
JS CSS
{template.data}
PHP loop()
Sever Rendered Dynamic Site - Page Load Process
![Page 35: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/35.jpg)
www.something.com
Browser
Webpage
HTML / CSS / JS
Server
User
Static Site - Page Load Process
![Page 36: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/36.jpg)
You keep saying this word "static" ... but what
does that mean ... really?
![Page 37: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/37.jpg)
“Static content are files that don't change based on user input,
and they consist of things like JavaScript, Cascading Style
Sheets, Images, and HTML files.”
- Wikipedia
![Page 38: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/38.jpg)
Pages display viewer-specific content (eg. user profiles)
Pages have content that changes too quickly to easily republish
Pages display content conditionally (ie. member-only pages)
Pages have information that is calculated on the fly
WHY I WOULDN’T USE A STATIC SITE:
![Page 39: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/39.jpg)
I want my website to load really fast
I want want to focus on design and content
Don’t want to deal with database or server hassle
I don’t want to worry about security
WHY I WOULD USE A STATIC SITE:
![Page 40: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/40.jpg)
If Static Sites are so great - then why do I need a
“Static Site Generator” ?
![Page 41: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/41.jpg)
www.something.com
Browser
Webpage
HTML / CSS / JS
Server
User
Static Site Generator JS CSS
{template.data}
Static Site Gen.
Generator
![Page 42: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/42.jpg)
The Anatomy of a Static Site Generator:
{ header.html }
{ footer.html }
<h1>{data.postTitle}</h1>
<span>{data.date}</span>
Templates / Partials Compiler / Plugins
———postTitle: My Awesome SitepostDate: 6/15/2016___
YAML / JSON / Data
Markdown
# Heading 1
## Heading 2
Paragraph Content
JS CSS
Static Assets
<%= underscore.js %>
{{ handlebars.js }}
{% django.py %}
{{ liquid.rb }}
Template Language
templates / data / assets
static html / css / js
![Page 43: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/43.jpg)
Static Site Structure
posts
post.md
static
styles
js
images
partials
header.html
footer.html
templates
.build
index.html
post.html
home.html
posts.html# Hello World
post.md
## Mardown 101 - Static Awesomeness
## Doge ... Such Wow
This article is floated online with an aim to help you find the best dvd printing solution. Dvd printing is an important feature used by large and small DVD production houses to print information on DVDs. Actually, dvd printing is a labeling technique that helps to identify DVDs. Thus, dvd printing is essential part of your commercial DVD production.
Your DVDs usually come coated with directly printable lacquer films with ability to absorb ink, and the process of directly printing the lacquer films on your DVDs is technically known as dvd printing. Your dvd printing solution lies in – inkjet dvd printing, thermal transfer dvd printing, screen dvd printing, and offset dvd printing – which you may choose according to need and requirement. The printing process using CMYK Inkjet printers is known as inkjet printing.
This article is floated online with an aim to help you find the best dvd printing solution. Dvd printing is an important feature used by large and small DVD production houses to print information on DVDs. Actually, dvd printing is a labeling technique that helps to identify DVDs.
![Page 44: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/44.jpg)
Popular Static Site Generators
BEGINNER INTERMEDIATE ADVANCED
Cactus - Python
Middleman - Ruby Docpad - Node
Gatsby.js - React
Roll Your Own
Jekyll - Ruby
![Page 45: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/45.jpg)
(This is me having so much fun with wordpress in 2009)
+ =
Demo Time ...
![Page 46: Static site gen talk](https://reader035.vdocuments.site/reader035/viewer/2022081605/58a548911a28ab4f088b6aaf/html5/thumbnails/46.jpg)
@benadam11
Thank You!!