>

Spress. Generador de páginas para PHP.

Juanma Cabello     Colaboraciones    02/12/2016


Es más que probable que en algún momento necesites crear una página sencilla, sin acceso a base de datos pero que siga siendo dinámica. Ejemplo de este tipo de página, para que entiendas mejor a qué me refiero, podría ser una página para tu proyecto de software libre o un pequeño trabajo como una web presencial; no necesitan alta tecnología pero hacerlas en HTML puro puede resultar tedioso.

Ocupando ese hueco entre las páginas estáticas y las dinámicas más complejas, se encuentran los generadores de páginas que no son más que una herramienta con la que podrás realizar este tipo de proyecto simples de una manera más rápida.

En este post te explico uno muy sencillito llamado Spress para PHP.

Instalación.

Para hacernos con Spress, lo primero que tenemos que hacer es descargarlo en nuestro equipo:

$ curl -LOS https://github.com/spress/Spress/releases/download/v2.1.3/spress.phar
$ chmod +x spress.phar

Cómo ves se trata de un ejecutable. Si deseas que esté disponible para todos los usuarios, basta con:

sudo mv spress.phar /usr/local/bin/spress

Así de simple y sencillo.

Generando nuestro primer sitio.

Para generar tu proyecto usando Spress, basta con lo siguiente:

$ spress new:site mi-proyecto-increíble spresso

Esto creará una carpeta llamada mi-proyecto-increíble donde estarán los fuentes que Spress usará para generar el HTML de tu página. El último parámetro, spresso, es el theme que va a usar para generar el sitio.

Una vez que tenemos nuestro sitio generado, pasamos a "compilarlo" (nótese las comillas, todos sabemos que PHP no es un lenguaje compilado…)

$ cd mi-proyecto-increíble
$ spress site:build --server --watch

Esto arrancará el servidor web integrado de PHP en el puerto 4000 y usando nuestro proyecto como documentRoot y, también, regenerará el sitio cada vez que se detecte un cambio en él; de esta forma podremos visualizar los cambios que hagamos rápidamente.

Ahora, si visitas http://localhost:4000, podrás ver qué aspecto tiene tu nueva página estática.

Comprendiendo la estructura del proyecto.

Si echas un ojo a la carpeta del proyecto, verás que hay una carpeta src. Esta es la carpeta dónde está el código fuente que usa Spress para generar el HTML.

Te recomiendo que tengas, como mínimo, tres carpetas: content, includes, layouts. Vayamos por partes.

La carpeta content contiene el contenido (válgame la redundancia) de tu sitio, esto es, páginas, assets, índices de posts, xml de tus rss, etc.

En la carpeta includes se guardan trozos que quieras reutilizar en diferentes páginas de tu proyecto como el header, el footer o una barra de navegación y ese tipo de cosas.

Y por último, en la carpeta layout, se encuentra la maquetación de todo lo anterior.

Creando páginas.

Cada página que crees, deberá poseer una cabecera dónde especificas que layout debe usar, así como metadatos como la fecha de creación, el título o la categoría a la que pertenece.

---
layout: "post"
title: "a minimalism Spress theme"
categories: [general]
tags: []
date: 1977/12/04
---

Después de esa cabecera, basta con usar markdown para empezar a escribir.

Mostrando todos los posts.

Si tu interés es hacer un blog, es muy posible que quieras mostrar todos los posts en alguna página del sitio. Spress ofrece helpers para dicho propósito.

---
layout: "default"

generator: "pagination"
provider: "site.posts"
sort_by: "date"
title: "blog"
---
{% for post in page.pagination.items %}
    {% block content %}
        {% include 'post.html' with { 'post': post } %}
    {% endblock %}
{% endfor %}

Esto sería una forma rápida y sencilla de listar todos los post almacenados en content/posts ordenados por fecha. Si te fijas se incluye el archivo include/post.html pasándole el post actual de la iteración para renderizarlos. Como puedes observar, Spress usa el motor de plantillas Twig.

Conclusión.

Cómo ves en poco tiempo se puede montar la estructura de una web básica y dedicarte solo a ir añadiendo archivos de posts y contenido en las carpetas correspondientes para que Spress se encargue de generar el sitio con el contenido nuevo usando un sistema de plantillas muy flexible… ¡Y sin nada de base de datos!

Si quieres más información puedes echar un ojo a la documentación del proyecto, donde entran más a fondo en configuraciones avanzadas como creación de categorías, secciones extra o la creación de themes.

¿Has usado ya este tipo de herramientas? ¿Qué aplicaciones le ves a la generación de este tipo de páginas? ¡Dínoslo en los comentarios!

Foto: Baby You're A Firework de Zach Frailey


Sobre el autor

Juanma Cabello   

Fullstack developer. Coordinador del @betabeersMLG. Amante de la SEGA de los 90s. Pareja de @imggallardo 24/7