Generating static web sites with

MiddlemanFrontenders Valencia - Enero 2015

By Tony Camaiani @tonycamaiani

Hi, I'm

Tony Camaiani - tony.camaiani.me @tonycamaiani

born grew up aging

Laurea in Computer Science, University of Bologna“Usability Guidelines and User-Centered Design“

Frontend Web DeveloperWeb Designer & UX

About this TalkOld Version

New VersionMiddleman

Layout

Styles

Data

Config

Heroku

Next Steps

Old VersionStatic Html / Css

2 index.html

Copy index.html to past.html

Add talks slides

Css images for sponsors

Header and Footer duplicated

Why change?Update content more easily

Separate content from markup

No css edits

Status of Event

HAML & SASS

Common Header and Footer

Static Site GeneratorsA static-site generator simply takes your pre-compiled (and pre-processed) languages like Haml, Jade,Sass, LESS, Stylus, CoffeeScript, and others, and compiles them into the equivalent language that isunderstood by the browser; HTML, CSS, and JavaScript, respectively.http://drewbarontini.com/articles/middleman/

Middleman Jekyll Assemble.io...

https://www.staticgen.com

CodeKit Hammer Mixture

...

Middlemanmiddlemanapp.com

Command-line tool for creating static websites, with Ruby and the Sinatra web framework.

ERb, Haml, Sass, CoffeeScript

Multiple asset management solutions, including Sprockets

Pretty URLs

LiveReload extension

CSS minification and Javascript compression

Support for numerous templating languages to simplify your HTML development, which will allow youto add variables, call methods and use loops and 'if' statements.

Middleman: Installmiddlemanapp.com

Middleman: Initmiddleman init new_project

Middleman: Servermiddleman server

Middleman: Buildmiddleman build

Frontenders Valencia Middleman

LayoutHAML

Layouts

Partials

Pages

Layout.haml!!!%html %head ... %link{:href => "http://fonts.googleapis.com/css?family=Rambla:400,700", :rel => "stylesheet", :type = stylesheet_link_tag "all" = javascript_include_tag "libs/modernizr"

%body = partial 'partials/header' = yield = partial 'partials/footer' ...

Partials: _header.haml%header %hgroup %h1 = link_to data.static[:h1_logo_text], "/", :title => data.static[:h1_title] %span= data.static[:h1_logo_subtext]

%h2 = data.static[:h2_scream_line_1] %span= data.static[:h2_scream_line_2] %span= data.static[:h2_scream_line_3]

%nav %ul %li = link_to data.static[:nav_page_1], "/frontenders.html", :title => data.static[:nav_page_1_title], :class => is_page_selected("/frontenders/") %li = link_to data.static[:nav_page_2], "/past.html", :title => data.static[:nav_page_2_title], :class => is_page_selected("/past/")

Partials: _footer.haml%footer .fgroup .first %h3= data.static[:participate] %p =data.static[:participate_how] =mail_to data.static[:participate_email], data.static[:participate_email]

.middle %h3= data.static[:follow] %p = link_to "@frontendersVLC", "https://twitter.com/frontendersVLC", :title => "@frontendersVLC on Twitter", :target => "_blank" %p = link_to "#frontendersVLC", "https://twitter.com/search?q=%23frontendersVLC", :title => "Hashtag #frontendersVLC", :target => "_blank"

.last %h3= data.static[:partner] %p = link_to data.static[:partner_name], data.static[:partner_url], :title => data.static[:partner_url_title], :class => "partner ir", :target => "_blank"

Index.haml---title: a meetup for Frontend UI Developers, UX Web Designersready: true---...

%main{:role => "main"} %p.main_paragraph = data.static[:main_paragraph_text_1] = link_to data.static[:partner_name], data.static[:partner_url], :title => data.static[:partner_url_title], :target => "_blank" = data.static[:main_paragraph_text_2] = link_to data.static[:main_paragraph_link_text], "frontenders.html"

%h2.title = data.static[:next_meetup] %time = data.static[:week_day] #{date} = data.static[:day_hour]

%section{:class => "#{type}"}

- homepage.talks.each do |f| %article %h3= f[:title] - f.text.each do |t| %p= t - if active - f.author.each do |t| %p = t[:name]

frontenders.haml---title: ¿Que es? Frontenders---

%main{:role => "main"} %section %h2.title= data.static[:frontenders_title] %p %b= data.static[:frontenders_def_text_1] = data.static[:frontenders_def_text_2] %cite =link_to data.static[:frontenders_def_source_text], data.static[:frontenders_def_source_url], :target => "_blank"

%p= data.static[:frontenders_text_1] %p= data.static[:frontenders_text_2] %p= data.static[:frontenders_text_3]

%p = data.static[:frontenders_text_4] = succeed '.' do =mail_to data.static[:participate_email], data.static[:participate_email]

past.haml---title: Los eventos anteriores---

%main{:role => "main"} %h2.title= data.static[:past_title]

- data.archive.meetups.each do |m| %h2.section_title = data.static[:week_day] = m[:date]

- if m[:hangout_url] = link_to m[:hangout_url], m[:hangout_url], :class=> "ico hangout", :target=> "_blank"

%section{:class => "#{m.type}"} - m.talks.each do |f| %article %h3= f[:title] - f.author.each do |t| = t[:name] = twitter_url(t[:twitter])

- f.text.each do |t| %p= t

- if f.links - f.links.each do |t| %p.links = link_to t[:label], t[:url], :target=> "_blank"

StylesSASS

Partials

Flexbox

Mobile First

Own breakpoints

Styles

Styles: _variables.scss// _varables.scss

//// Basic Colors

$white: #fff;

$gray: #53585e; /* text */ $gray_light: #f5f5f5; /* background */ $gray_lighter: rgba(161, 161, 161, 0.5);

$orange: rgb(230, 126, 34); $orange_light: rgb(243, 156, 18); $orange_dark: rgba(211, 84, 0, 0.5); $orange_darker: rgb(220, 105, 17);

$blue: #1ea0ce; $blue_light: #339ACC;

//// Background Colors

$background_color_body: $gray_light; $background_color_header: $orange; $background_color_button: $orange_light; $background_color_button_hover: $orange_dark;

$shadow_color_header: $gray_lighter; $shadow_color_article: $gray_lighter;

$border_color_article: $white;

Flexbox: footerfooter { .fgroup { display: flex; justify-content: center;

div { margin: 0; flex-grow: 1; flex-basis: 0;

&.first { text-align: left;} &.last { text-align: right;}

} // div } // .fgroup } // footer

Flexbox: articlemain { section { article { margin: 0 2% 30px; p { font-size: 18px; } } // article

&.double { display: flex; flex-flow: row wrap; justify-content: center;

article { flex-grow: 1; flex-basis: 0; }

div { flex: 1 100%; } } // section.double } // section } // main

Breakpoints@media only screen and (min-width: 768px) { ... }@media only screen and (min-width: 896px) { ... }@media only screen and (min-width: 1024px) { ... }

“Start with the small screen first, thenexpand until it looks like shit. Time for a

breakpoint!” - Stephen Hay

Data

Data: default.ymlmeetup: date: "8 enero 2015" type: "double" talks: - title: Espacio libre text: - ¿Tienes algo interesante que contar sobre temas de desarrollo frontend, diseño web, UI y UX y te gustaría compartirlo con nosotros? - Envíanos un correo a <a href="mailto:frontendersvalencia@gmail.com">frontendersvalencia@gmail.com - title: Espacio libre text: - ¿Tienes algo interesante que contar sobre temas de desarrollo frontend, diseño web, UI y UX y te gustaría compartirlo con nosotros? - Envíanos un correo a <a href="mailto:frontendersvalencia@gmail.com">frontendersvalencia@gmail.com

Data: new.ymlmeetup: date: "8 enero 2015" type: "double" eventbrite: https://frontenders-enero-2015.eventbrite.es talks: - title: "Generando sitios web estáticos con Middleman" text: - "Frontenders tiene casi dos años, ¡y también su web!. Ha llegado el momento de pasar de una Web estática a algo más ágil para actualizar la información (en casa del herrero...)." - "Para ello vamos a hacer uso de “Middleman”, un generador de sitios estáticos. Hablaremos del proceso de migración y las ventajas de usar este tipos de herramientas." author: - name: "Tony Camaiani" twitter: "tonycamaiani" bio: "es Frontender en @peerTransfer & coorganizador de @frontendersVLC." - title: "Diseña y venderás" text: - "¿Por qué un usuario entra a mi web y no sabe a donde ir? ¿Cómo consigo dar confianza a mis usuarios en una compra online? ¿Como escribo un texto persuasivo?" - "Un buen diseño puede ser la clave para conseguir tu objetivo en Internet, pero no la única. Hoy hablaremos de diseño, pero también de usabilidad, de marketing y de experiencias, para responder a estas preguntas." author: - name: "Juanma Martínez" twitter: "juanmamartinez" bio: "es Web Designer & UX en @Increnta, agencia especializada en Inbound Marketing y Marketing Digital." sponsor: name: "Kuombo - Consultoría y desarrollo de comercio electrónico" url: "http://kuombo.com/" image: "logo_kuombo.png"

Data: archive.ymlmeetups: - meetup: date: "13 noviembre 2014" hangout_url: "https://plus.google.com/u/0/events/c43la6lak11lgpo6g7q6bgumfpc" type: double talks: - title: "¿Comprar online es una experiencia? UX para ecommerce" text: - "El comercio online es un mercado durísimo donde las empresas invierten multitud de recursos para crear experiencias seductoras que les diferencien de la competencia." - "En esta charla aprenderemos los secretos para crear experiencias enfocadas en el usuario de ecommerce, y sacarles provecho para convertirlas en propuestas de valor que ayuden a alcanzar el objetivo de cualquier negocio online: vender más." links: - url: "/slides/Dani_Frontenders_UX_ecommerce.pdf" label: "slides »" author: - name: "Dani Catalan" twitter: "dani_catalan" bio: "es Desarrollador Frontend en @kuombo, agencia especializada en el desarrollo del negocio de tiendas online." - title: "Maquetación con Flexbox" text: - 'CSS empezó con mal pie cuando nos dio el "float" como medio de distribución de elementos y luego lo intentó arreglar con "display: table".' - 'Pero ahora tenemos el módulo de Flexbox, con el que podemos maquetar con propiedades simples e intuitivas (o no) alterando los espacios entre objetos y el tamaño de los objetos en si. Vamos a dar un paseo por sus posibilidades y sintaxis.' links: - url: "/slides/Wakkos_Frontenders_Flexbox.pdf" label: "slides »" author: - name: "Daniel Martínez" twitter: "Wakkos" bio: "es Frontend y tutor/profesor de Arquitectura CSS y responsive design en @EscuelaIt y @vadeclases."

- meetup: date: "11 septiembre 2014"

Data: static.yml# Headerh1_title: "Frontenders Valencia"h1_logo_text: "<frontenders/>"h1_logo_subtext: "Valencia"h2_scream_line_1: "a meetup for"h2_scream_line_2: "Frontend & UI Developers,"h2_scream_line_3: "UX & Web Designers"nav_page_1: "¿Que es?"nav_page_1_title: "¿Que es Frontenders?"nav_page_2: "Anteriores"nav_page_2_title: "Los eventos anteriores"

# Footerparticipate: "Participa"participate_how: "¿Quieres participar en una de las próximas reuniones? Escribe a"participate_email: "frontendersvalencia@gmail.com"follow: "Síguenos"partner: "Partner"partner_name: "GeeksHubs"partner_url: "http://geekshubs.com/es/?utm_source=comunidades&utm_medium=web&utm_campaign=frontenders"partner_url_title: "Comunidad Geek y Emprendedores techies"

# Indexmain_paragraph_text_1: "Frontenders es una reunión mensual centrada en temas de desarrollo frontend, diseño web, UI y UX. Nos encontramos regularmente el segundo jueves de cada mes en el espacio de coworking"main_paragraph_text_2: ", en Avenida Cataluña, 11 (Valencia)."main_paragraph_link_text: "¿Quieres saber más?"next_meetup: "Próximo meetup:"week_day: "jueves"day_hour: ", 19:00h"sponsor: "Patrocinador"attend_text: "Asistiré al Frontenders Valencia"

Using the dataindex.haml

---title: a meetup for Frontend UI Developers, UX Web Designersready: true---

- active = current_page.data.ready

- if active - homepage = data.new.meetup- else - homepage = data.default.meetup

- date = homepage.date- type = homepage.type

- homepage.talks.each do |f| %article %h3= f[:title] - f.text.each do |t| %p= t - if active - f.author.each do |t| %p = t[:name] = twitter_url(t[:twitter]) = t[:bio]

Using the datafrontenders.haml

%main{:role => "main"} %section %h2.title= data.static[:frontenders_title] %p %b= data.static[:frontenders_def_text_1] = data.static[:frontenders_def_text_2] %cite =link_to data.static[:frontenders_def_source_text], data.static[:frontenders_def_source_url], :target => "_blank"

%p= data.static[:frontenders_text_1] %p= data.static[:frontenders_text_2] %p= data.static[:frontenders_text_3]

%p = data.static[:frontenders_text_4] = succeed '.' do =mail_to data.static[:participate_email], data.static[:participate_email]

Config: config.rbactivate :livereload

set :css_dir, 'stylesheets'set :js_dir, 'javascripts'set :images_dir, 'images'set :haml, { :ugly => true, :format => :html5 }

activate :directory_indexes

# Build-specific configurationconfigure :build do

activate :minify_css activate :minify_javascript activate :asset_hashend

helpers do def is_page_selected(page) current_page.url == page ? "selected" : '' end

def twitter_url(username) "<a target="_blank" href="https://twitter.com/#{username}">@#{username}</a>" endend

Config: config.rurequire "rubygems"

require "rack"require "middleman/rack"require "rack/contrib/try_static"

map "/" do run lambda { |env| [ 200, { 'Content-Type' => 'text/html', 'Cache-Control' => 'public, max-age=86400' }, File.open('build/index.html', File::RDONLY) ] }end

map "/frontenders.html" do run lambda { |env| [ 200, { 'Content-Type' => 'text/html', 'Cache-Control' => 'public, max-age=86400' }, File.open('build/frontenders.html', File::RDONLY) ] }end

Deploy a Herokuhttp://www.randomerrata.com/articles/2013/middleman-on-heroku/

Gemfilesource 'http://rubygems.org'

ruby "2.0.0"

gem "middleman", "~>3.0.13"gem "rack-contrib"gem "puma"

Config.ru# Build the static site when the app boots` `

# Enable proper HEAD responsesuse Rack::Head# Attempt to serve static HTML filesuse Rack::TryStatic, :root => "build", :urls => %w[/], :try => ['.html', 'index.html', '/index.html']

bundle exec middleman build

Deploy a Herokuhttp://www.randomerrata.com/articles/2013/middleman-on-heroku/

Procfileweb: bundle exec puma -p $PORT -e $RACK_ENV

...set up Heroku andgit push heroku master

Next StepsSVG

Social Icon Font

More generic

...suggestions?

That's all, Folks!Repo

https://github.com/frontenders/valencia-middleman

These slides

http://tony.camaiani.me/frontenders-middleman-talkmade with reveal.js

Any question?

Thanks!

Tony Camaiani - tony.camaiani.me @tonycamaiani