Symfony ZgzGeneración de sitios estáticos con Sculpin

@symfony_zgz

Web dinámica● Servidores● Bases de datos● Instalaciones● Tiempo● …● $$$$$$$!!!!!!!!!!!!

PerfilesAdemás…

¿Cuántos perfiles hacen falta?

Sysadmins

Backends

Frontends

Diseñadores

SEO/SEM/Marketing

Otros roles

Sinergia!!!

Valor añadido Forlayos derivables

Kill them all!!! (o casi)● Sysadmin → Github pages● Backend developers → Sculpin● Frontend developers → Bootstrap● Diseñadores → Themeforest● SEO → Nibbler/Woorank● Otros roles → Sentido común!!!

Github pages● Por usuario/organización

○ Creando repositorio {{usuario}}.github.io○ http://ericduran.github.io

● Por proyecto○ Creando rama gh-pages○ http://ericduran.github.io/drupalcores/

Github pages● Permite dominio propio

○ Apuntando a 204.232.175.78

● Github lo verifica○ Archivo “CNAME” en la raíz

del repositorio

Sculpin● Generador de sitios estáticos● https://sculpin.io/● Utiliza:

○ YAML○ Twig○ Markdown○ Archivos estáticos!!○ Consola

YAMLArchivos de configuraciónsculpin_content_types: posts: type: path path: _posts permalink: blog/:year/:month/:day/:filename/ taxonomies: - tags - categories

YAMLMetadatos en el propio archivo del post---title: Happy Birthday Sculpin!tags: - sculpin - markdowncategories: - personal---

Twig{% set year = '0' %}<h2>Posts Archive</h2>{% for post in page.pagination.items %} {% set this_year %}{{ post.date | date("Y") }}{% endset %} {% if year != this_year %} {% set month = '0' %} {% set year = this_year %} {% endif %} {% set this_month %}{{ post.date | date("F") }}{% endset %} {% if month != this_month %} {% set month = this_month %} ...

Markdown

Heading

=======

Sub-heading

-----------------

Paragraphs are separated

by a blank line.

Text attributes *italic*,

**bold**, `monospace`.

A [link](http://example.com).

<<< No space between ] and ( >>>

Shopping list:

* apples

* oranges

* pears

Numbered list:

1. apples

2. oranges

3. pears

The rain---not the reign---in Spain.

Reemplazo ASCII de código HTML

Archivos estáticos● Todo archivo en la carpeta correspondiente es el

equivalente a una entrada en base de datos (entidad).

● Generators: Páginas “plantilla” para mostrar estas entidades o listados de ellas.○ { use: [posts_categories] }

■ { % for category,posts in data.posts_categories %}○ { generator: pagination} ... { use: [posts] }

■ {% for post in page.pagination.items %}

Archivos estáticos● Mejor rendimiento no se puede!!● Sistema de layouts jerárquico gracias a Twig

---

layout: default

---

● Árbol de directorios sencillo○ app/config → YAML’s de configuraciones○ source → Código fuente○ source/_posts → Entidades “dinámicas” (en el ejemplo: posts)○ output_prod → Salida HTML para subir

Archivos estáticos

● Gran control del HTML generado

● SEO guy loves you!

Dear frontend......dedica tu tiempo a cosas más divertidas!!!

¿Todo bien hasta aquí?

Consola!!!!

Consola

Composer● Sculpin incluye embebido composer

○ Archivo sculpin.json para gestión de dependencias

● No son necesarios muchos comandos

Comandos● Instalar/actualizar dependencias

○ sculpin install● Montar servidor de desarrollo

○ sculpin generate --watch --server● Deploy

○ sculpin generate --env=prod

Facilísimo!!!

Pero...

Externaliza!● Comentarios

○ https://developers.facebook.com/docs/plugins/comments

● Formularios○ http://webform.com○ https://www.surveymonkey.com/

● Estadísticas○ http://analytics.google.com

Backend guy is unhappy

También backend!!● Sculpin utiliza el HTTP Kernel de Symfony.● Sistema de eventos.● Se pueden utilizar bundles de Symfony para

extender Sculpin con funcionalidades más avanzadas!!!

Eventos● Sculpin\Core\Sculpin::EVENT_BEFORE_RUN● Sculpin\Core\Sculpin::EVENT_BEFORE_CONVERT● Sculpin\Core\Sculpin::EVENT_AFTER_CONVERT● Sculpin\Core\Sculpin::EVENT_BEFORE_FORMAT● Sculpin\Core\Sculpin::EVENT_AFTER_FORMAT● Sculpin\Core\Sculpin::EVENT_AFTER_RUN

Bundles de terceros● Composer + Kernel… como en Symfony!!!<?php

class SculpinKernel extends \Sculpin\Bundle\SculpinBundle\HttpKernel\AbstractKernel

{

protected function getAdditionalSculpinBundles()

{

return array(

'Mavimo\Sculpin\Bundle\RedirectBundle\SculpinRedirectBundle'

);

}

}

Que empiece la fiesta!!!