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