Spress es una aplicación escrita en PHP que permite generar sitios web estáticos con soporte para crear blogs. El contenido puede ser escrito en Markdown, plantillas Twig y HTML. Es extensible mediante plugins.

1. Generador de páginas estáticas
●
●
Github: https://github.com/yosymfony/Spress
Twitter: @spress_cms
Sobre mí: Víctor Puertas
●
●
@yosymfony, @victorpuertas
http://yosymfony.com

2. ¿Qué es?
Generador de páginas estáticas escrito en PHP.
Convierte ficheros Markdown, templates Twig y
HTML en un sitio estático.
Útil para crear blogs, landing pages, páginas de
eventos, “about me” etc...

3. ¿Por qué?
Templates: Código reutilizable. Potencian del
motor de plantillas Twig.
Extensible: Cada sitio puede tener plugins que
extienden la funcionalidad de Spress.
Blogs: Crear post en Markdown.

4. Ventajas
100% escalable.
● Velocidad.
● Bajo coste mantenimiento.
● Mínimos requisitos para el hosting.
● Deploy sencillo.
● Temas totalmente personalizables.
● Plugins escritos en PHP.
●

5. Requisitos
Unix, Linux o Mac OS X
● PHP >= 5.4
● Composer
●

6. Estructura de un sitio
.
|- config.yml
|- composer.json
|- _includes/
|- _layouts/
| |- default.html
| |- post.html
|- _posts/
| |- 2013-12-23-example-post.md
|- _plugins/
|- _site/
|- index.html

7. Estructura de un sitio
Crear un sitio. Comando site:new
site:new [path[="./"]]
[template[="blank"]] [--force] [-all]
spress site:new /directorio
o
spress site:new /directorio spresso

8. Estructura de un sitio
Construir un sitio. Comando site:build
site:build [-s|--source[="./"]]
[--timezone[="..."]] [--drafts]
[--safe]
spress site:build
Resultados generados en _site/

9. config.yml
Fichero de configuración del sitio.
Formato YAML.
Cambiar el comportamiento por defecto Spress.
● Definir variables propias.
●

10. config.yml
author:
name: Your Name
twitter: spress_cms
# Page menus
menu:
- { name: Home, url: / }
Paginate: 5
permalink: pretty

11. config.yml
Desde una plantilla Twig:
<ul>
{% for link in site.menu %}
<li>
<a href="{{ link.url }}">
{{ link.name }}
</a>
</li>
{% endfor %}
</ul>

12. Posts
Se almacenan en _posts/
● Formato: Markdown (extensible a otros)
● El nombre de cada post tiene un formato:
●
year-month-day-title.md
Ej: 2014-01-21-mi-primer-post.md

13. Posts
--layout: default
Draft: true
--This is a post. You can mixing text
and HTML like this:
<a href="{{ site.url }}"/about/>About
me</a>.
Uses variables in Markdown link:
[Home](<{{ site.url }}>)

14. Posts: Front-matter
Configurar el post + variables propias.
–-layout: default
title: Curso de PHP
categories: [eventos]
tags: [noticias, novedades]
draft: false
date: 2014-01-01
miVariable: Hola
–--

15. Posts: categorías
Configurables en el Front-matter o deducibles de
la estructura de directorios:
_posts/
|-eventos/
| |- 2014-01-21-mi-primer-post.md
|-programacion/
| |-php/
| | |- 2014-01-21-hello-world.md

16. Paginación de posts
Es posible paginar los posts y accedera ellos con
URLs del tipo:
Página 1: http://misitio.com/blog/
Página 2: http://misitio.com/blog/pagina2/
Mostraría la lista de posts correspondientes a la
página.

17. Paginación de posts
Configuración: config.yml del sitio
paginate: 5
paginate_path: 'blog/page:num'
El fichero index.html del directorio /blog se
toma como template para montar cada página.

18. /blog/index.html

19. Paginación de post
Ficheros generados:
/blog/index.html
● /blog/pagina2/index.html
● /blog/pagina3/index.html
● ...
●

20. Posts: permalinks
Formato de los enlaces a cada post.
Configuración: config.yml
permalink: "/:year/:title"
Generaría enlaces del tipo:
http://miblog.com/blog/2014-mi-primer-post/

21. Posts: permalinks
year: Año del post
● month: Mes del post.
● i_month: Mes del post en número sin ceros
delante.
● day: Día del post.
● i_day: Día del post en número sin ceros delante.
● title: Título del post.
● categories: Categorías del post.
●

22. Posts: permalinks
Existen algunos templates predefinidos:
pretty: /:categories/:year/:month/:day/:title/
● ordinal: /:categories/:year/:i_day/:title.html
● date: /:year/:month/:day/:title.html
●

23. Posts: permalinks
http://misitio.com/blog/noticias/2014/01/21/php55/
http://misitio.com/blog/noticias/31/php-55.html
http://misitio.com/2013/12/31/php-55.html

24. Páginas
Formato: plantilla Twig, HTML, Markdown.
Layout: herencia de plantillas.
Includes: partes reutilizables.

25. Layout
Determinan la forma en la que se distribuye el
contenido.
Permite herencia en cascada.
Directorio: _layouts/
–-Layout: default
–-Busca default.html dentro de _layouts/

26. Layout: ejemplo
Usa la etiqueta block de Twig:

27. Includes
Permiten reutilizar partes del código.
Se encuentran en _includes/
Usa la etiqueta include de Twig:

28. Temas
Tema = sitio.
Puedes subir temas a Github a instalarlos con
Composer o descargarlos manualmente.
Instalar con Composer:
Directorio de instalación de Spress.
● Edita composer.json y añade el tema en los
requires.
●

29. Temas: instalación con
Composer
Con el comando spress site:new miSitio
spresso podemos crear sitios usando el tema.

30. Plugins
Extienden la funcionalidad de Spress.
Usa mecanismo de eventos.
Composer para actualizar los plugins de un tema.
Converters: permiten añadir nuevos tipos de
contenido: Textile (markup language).

31. Estructura de un plugin
MiPlugin/
|- composer.json
|- MiPlugin.php

32. Plugins: eventos
spress.start
● spress.before_convert
● spress.after_convert
● spress.after_convert_posts
● spress.before_render
● spress.after_render
● spress.finish
●

33. Gracias