Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Static site gen talk

2,670 views

Published on

Static site generators are 

Published in: Design
  • Login to see the comments

Static site gen talk

  1. 1. Static Site Generators DESIGN-DEV MEETUP 6/15/2016
  2. 2. How to make a dope website. DESIGN 101
  3. 3. STEP 1. Wordpress or Squarespace? STEP 2. Choose a ! theme. STEP 3. Profit """
  4. 4. But in reality it’s more like this ...
  5. 5. STEP 1. Buy a domain from GoDaddy
  6. 6. STEP 2. Buy hosting from GoDaddy ...
  7. 7. STEP 2. Buy Hosting from ________Buy Hosting from ________ (Because ... ???)
  8. 8. STEP 2. Buy hosting from GoDaddy ...
  9. 9. STEP 3. YouTube for hours to change DNS & setup Wordpress YouTube for hours to change DNS & setup Wordpress
  10. 10. STEP 4. Weep QuietlyWeep Quietly
  11. 11. STEP 5. Buy a ! Wordpress ThemeBuy a ! Wordpress Theme
  12. 12. STEP 6. Decide to change this 1 little thing .... Decide to change this 1 little thing ....
  13. 13. STEP 7. Open the WP Admin code viewOpen the WP Admin code view
  14. 14. STEP 8. WTF IS ALL OF THIS ?!!!WTF IS ALL OF THIS ?!!!
  15. 15. STEP 9. Make a change and everything breaks Make a change and everything breaks
  16. 16. STEP 10. Weep QuietlyWeep Quietly
  17. 17. STEP 11. Spend hours reading docsSpend hours reading docs
  18. 18. STEP 12. Download MampDownload Mamp
  19. 19. STEP 13. Install Wordpress LocallyInstall Wordpress Locally
  20. 20. STEP 14. Break site with a trailing space in WP Config Break site with a trailing space in WP Config
  21. 21. STEP 15. Weep QuietlyWeep Quietly
  22. 22. STEP 16. WTF ?!! None of my content is here WTF ?!! None of my content is here
  23. 23. STEP 17. Download & Import DatabaseDownload & Import Database
  24. 24. STEP 18. Hack at PHP until something works Hack at PHP until something works
  25. 25. STEP 19. Spend hours trying to redeploy your site Spend hours trying to redeploy your site
  26. 26. STEP 20. Weep QuietlyWeep Quietly
  27. 27. GREAT USER EXPERIENCEGREAT DEVELOPER EXPERIENCE + =
  28. 28. Fast Previews of change Great tooling (preprocessors etc.) Simple Templating Language Simple Deploys GREAT DEVELOPER EXPERIENCE
  29. 29. Fast Page Loads Focused / Relevant Content Great Design Accessible GREAT USER EXPERIENCE
  30. 30. The value of Simplicity
  31. 31. “If you don’t actively fight for simplicity in software, complexity will win … and it will suck” - Henrik Joreteg
  32. 32. SIMPLICITY: Predictable results Makes things easier to use / learn Allows you to focus Reduces the cost of change
  33. 33. By simplifying the development experience, you are able to focus on the things that matter - design and content.
  34. 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. 35. www.something.com Browser Webpage HTML / CSS / JS Server User Static Site - Page Load Process
  36. 36. You keep saying this word "static" ... but what does that mean ... really?
  37. 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. 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. 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. 40. If Static Sites are so great - then why do I need a “Static Site Generator” ?
  41. 41. www.something.com Browser Webpage HTML / CSS / JS Server User Static Site Generator JS CSS {template.data} Static Site Gen. Generator
  42. 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. 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. 44. Popular Static Site Generators BEGINNER INTERMEDIATE ADVANCED Cactus - Python Middleman - Ruby Docpad - Node Gatsby.js - React Roll Your Own Jekyll - Ruby
  45. 45. (This is me having so much fun with wordpress in 2009) + = Demo Time ...
  46. 46. @benadam11 Thank You!!

×