Generador de páginas estáticas
●
●

Github: https://github.com/yosymfony/Spress
Twitter: @spress_cms

Sobre mí: Víctor Pue...
¿Qué es?
Generador de páginas estáticas escrito en PHP.
Convierte ficheros Markdown, templates Twig y
HTML en un sitio est...
¿Por qué?
Templates: Código reutilizable. Potencian del
motor de plantillas Twig.
Extensible: Cada sitio puede tener plugi...
Ventajas
100% escalable.
● Velocidad.
● Bajo coste mantenimiento.
● Mínimos requisitos para el hosting.
● Deploy sencillo....
Requisitos

Unix, Linux o Mac OS X
● PHP >= 5.4
● Composer
●
Estructura de un sitio

.
|- config.yml
|- composer.json
|- _includes/
|- _layouts/
| |- default.html
| |- post.html
|- _p...
Estructura de un sitio
Crear un sitio. Comando site:new
site:new [path[="./"]]
[template[="blank"]] [--force] [-all]
spres...
Estructura de un sitio
Construir un sitio. Comando site:build
site:build [-s|--source[="./"]]
[--timezone[="..."]] [--draf...
config.yml

Fichero de configuración del sitio.
Formato YAML.
Cambiar el comportamiento por defecto Spress.
● Definir vari...
config.yml
author:
name: Your Name
twitter: spress_cms
# Page menus
menu:
- { name: Home, url: / }
Paginate: 5
permalink: ...
config.yml
Desde una plantilla Twig:
<ul>
{% for link in site.menu %}
<li>
<a href="{{ link.url }}">
{{ link.name }}
</a>
...
Posts
Se almacenan en _posts/
● Formato: Markdown (extensible a otros)
● El nombre de cada post tiene un formato:
●

year-...
Posts
--layout: default
Draft: true
--This is a post. You can mixing text
and HTML like this:
<a href="{{ site.url }}"/abo...
Posts: Front-matter
Configurar el post + variables propias.
–-layout: default
title: Curso de PHP
categories: [eventos]
ta...
Posts: categorías
Configurables en el Front-matter o deducibles de
la estructura de directorios:
_posts/
|-eventos/
| |- 2...
Paginación de posts
Es posible paginar los posts y accedera ellos con
URLs del tipo:
Página 1: http://misitio.com/blog/
Pá...
Paginación de posts
Configuración: config.yml del sitio
paginate: 5
paginate_path: 'blog/page:num'
El fichero index.html d...
/blog/index.html
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 enlac...
Posts: permalinks
year: Año del post
● month: Mes del post.
● i_month: Mes del post en número sin ceros
delante.
● day: Dí...
Posts: permalinks

Existen algunos templates predefinidos:
pretty: /:categories/:year/:month/:day/:title/
● ordinal: /:cat...
Posts: permalinks

http://misitio.com/blog/noticias/2014/01/21/php55/
http://misitio.com/blog/noticias/31/php-55.html
http...
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/
–-Layo...
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 Compos...
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.
C...
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...
Gracias
Upcoming SlideShare
Loading in …5
×

Spress

8,253 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,253
On SlideShare
0
From Embeds
0
Number of Embeds
6,328
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Spress

  1. 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. 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. 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. 4. Ventajas 100% escalable. ● Velocidad. ● Bajo coste mantenimiento. ● Mínimos requisitos para el hosting. ● Deploy sencillo. ● Temas totalmente personalizables. ● Plugins escritos en PHP. ●
  5. 5. Requisitos Unix, Linux o Mac OS X ● PHP >= 5.4 ● Composer ●
  6. 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. 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. 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. 9. config.yml Fichero de configuración del sitio. Formato YAML. Cambiar el comportamiento por defecto Spress. ● Definir variables propias. ●
  10. 10. config.yml author: name: Your Name twitter: spress_cms # Page menus menu: - { name: Home, url: / } Paginate: 5 permalink: pretty
  11. 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. 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. 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. 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. 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. 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. 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. 18. /blog/index.html
  19. 19. Paginación de post Ficheros generados: /blog/index.html ● /blog/pagina2/index.html ● /blog/pagina3/index.html ● ... ●
  20. 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. 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. 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. 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. 24. Páginas Formato: plantilla Twig, HTML, Markdown. Layout: herencia de plantillas. Includes: partes reutilizables.
  25. 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. 26. Layout: ejemplo Usa la etiqueta block de Twig:
  27. 27. Includes Permiten reutilizar partes del código. Se encuentran en _includes/ Usa la etiqueta include de Twig:
  28. 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. 29. Temas: instalación con Composer Con el comando spress site:new miSitio spresso podemos crear sitios usando el tema.
  30. 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. 31. Estructura de un plugin MiPlugin/ |- composer.json |- MiPlugin.php
  32. 32. Plugins: eventos spress.start ● spress.before_convert ● spress.after_convert ● spress.after_convert_posts ● spress.before_render ● spress.after_render ● spress.finish ●
  33. 33. Gracias

×