Spress

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

¿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...

¿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.

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

Requisitos

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

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

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

config.yml

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

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

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

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

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 }}>)

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
–--

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.

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.

Paginación de post

Ficheros generados:
/blog/index.html
● /blog/pagina2/index.html
● /blog/pagina3/index.html
● ...
●

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/

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.
●

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
●

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

Páginas

Formato: plantilla Twig, HTML, Markdown.
Layout: herencia de plantillas.
Includes: partes reutilizables.

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/

Layout: ejemplo
Usa la etiqueta block de Twig:

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

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.
●

Temas: instalación con
Composer

Con el comando spress site:new miSitio
spresso podemos crear sitios usando el tema.

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).

Estructura de un plugin

MiPlugin/
|- composer.json
|- MiPlugin.php

Plugins: eventos

spress.start
● spress.before_convert
● spress.after_convert
● spress.after_convert_posts
● spress.before_render
● spress.after_render
● spress.finish
●

Spress

Más contenido relacionado

Similar a Spress (20)

Último (20)

Spress