Static site generators are 

1. Static Site Generators
DESIGN-DEV MEETUP 6/15/2016

2. How to make a dope website.
DESIGN 101

3. STEP 1.
Wordpress or Squarespace?
STEP 2.
Choose a ! theme.
STEP 3.
Profit """

4. But in reality it’s more like this ...

5. STEP 1.
Buy a domain from GoDaddy

6. STEP 2.
Buy hosting from GoDaddy ...

7. STEP 2.
Buy Hosting from ________Buy Hosting from ________
(Because ... ???)

8. STEP 2.
Buy hosting from GoDaddy ...

9. STEP 3.
YouTube for hours to change
DNS & setup Wordpress
YouTube for hours to change
DNS & setup Wordpress

10. STEP 4.
Weep QuietlyWeep Quietly

11. STEP 5.
Buy a ! Wordpress ThemeBuy a ! Wordpress Theme

12. STEP 6.
Decide to change this 1
little thing ....
Decide to change this 1
little thing ....

13. STEP 7.
Open the WP Admin code viewOpen the WP Admin code view

14. STEP 8.
WTF IS ALL OF THIS ?!!!WTF IS ALL OF THIS ?!!!

15. STEP 9.
Make a change and everything
breaks
Make a change and everything
breaks

16. STEP 10.
Weep QuietlyWeep Quietly

17. STEP 11.
Spend hours reading docsSpend hours reading docs

18. STEP 12.
Download MampDownload Mamp

19. STEP 13.
Install Wordpress LocallyInstall Wordpress Locally

20. STEP 14.
Break site with a trailing
space in WP Config
Break site with a trailing
space in WP Config

21. STEP 15.
Weep QuietlyWeep Quietly

22. STEP 16.
WTF ?!! None of my content
is here
WTF ?!! None of my content
is here

23. STEP 17.
Download & Import DatabaseDownload & Import Database

24. STEP 18.
Hack at PHP until something
works
Hack at PHP until something
works

25. STEP 19.
Spend hours trying to
redeploy your site
Spend hours trying to
redeploy your site

26. STEP 20.
Weep QuietlyWeep Quietly

27. GREAT USER EXPERIENCEGREAT DEVELOPER EXPERIENCE + =

28. Fast Previews of change
Great tooling (preprocessors etc.)
Simple Templating Language
Simple Deploys
GREAT DEVELOPER EXPERIENCE

29. Fast Page Loads
Focused / Relevant Content
Great Design
Accessible
GREAT USER EXPERIENCE

30. The value of Simplicity

31. “If you don’t actively fight for simplicity in software,
complexity will win … and it will suck”
- Henrik Joreteg

32. SIMPLICITY:
Predictable results
Makes things easier to use / learn
Allows you to focus
Reduces the cost of change

33. By simplifying the development experience, you are able to focus
on the things that matter - design and content.

34. www.something.com
Browser
Database
Webpage
HTML / CSS / JS
Server
User
JS CSS
{template.data}
PHP loop()
Sever Rendered Dynamic Site - Page Load Process

35. www.something.com
Browser
Webpage
HTML / CSS / JS
Server
User
Static Site - Page Load Process

36. You keep saying this word "static" ... but what
does that mean ... really?

37. “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

38. 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:

39. 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:

40. If Static Sites are so great - then why do I need a
“Static Site Generator” ?

41. www.something.com
Browser
Webpage
HTML / CSS / JS
Server
User
Static Site Generator JS CSS
{template.data}
Static Site Gen.
Generator

42. 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 Site
postDate: 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

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

44. Popular Static Site Generators
BEGINNER INTERMEDIATE ADVANCED
Cactus - Python
Middleman - Ruby Docpad - Node
Gatsby.js - React
Roll Your Own
Jekyll - Ruby

45. (This is me having so much fun with wordpress in 2009)
+ =
Demo Time ...

46. @benadam11
Thank You!!