HacheMuda

Blog personal de Guillermo Latorre

Resultados de la búsqueda de "":

Migrando Hachemuda de WP a PieCrust (I): instalación del framework y primeros pasos

Primera parte de la explicación de mi proceso de cambio de Hachemuda de un CMS como WordPress a un framework de creación de sitios web estáticos como PieCrust.

Estaba pensando en cómo escribir un post explicando cómo ha sido mi experiencia migrando Hachemuda de WordPress al nuevo PieCrust, un framework para la creación de sitios web estáticos. No sabía si hacer un chorizaco de post o partirlo en varios diferentes… y he decidido hacerlo en tres partes:

  1. Parte I: instalación del framework y primeros pasos con PieCrust.
  2. Parte II: migración de contenidos de WP a PieCrust y flujo de publicación de contenidos.
  3. Parte III: desarrollo de tu propio theme con PieCrust.

PieCrust, el framework

PieCrust es un framework para el desarrollo de sitios web estáticos, creado por Ludovic Chabant, que sigue trabajando activamente en él y actualizando las versiones en GitHub para que cualquiera pueda usarlo.

Como framework, soporta varias tecnologías que permiten crear páginas web pensándolas de una forma dinámica, para la posterior generación de los ficheros estáticos. Nativamente permite utilizar Less para las hojas de estilos, Markdown o Textile para los contenidos, Twig para el lenguaje de plantillas, Geshi para el resaltado de sintaxis, Haml, Sass

Vamos, una selección de tecnologías, librerías y recursos que el autor ha considerado interesantes y útiles. Y se van incorporando nuevas conforme más usuarios van usando PieCrust y aportando sus ideas y sugerencias.

Instalación de PieCrust

PieCrust es un software que no tiene dependencias con ningún otro framework, simplemenente necesita que en tu servidor tengas instalado PHP 5.3 o una versión posterior.

Suponiendo una instalación en un entorno local, los pasos a seguir son:

  • Descargar la versión Master (inestable, más nueva) o Stable (más probada) de GitHub. Puedes hacerlo usando GIT o descargando el ZIP y descomprimiendo los archivos.
  • Dentro de PieCrust, la carpeta website contiene todos los archivos del sitio web: plantillas, recursos, contenidos, etc. De hecho, encontrarás un theme y algunos contenidos de muestra. Accedemos a ella mediante la línea de comandos y ejecutamos el comando chef para iniciar el servidor de PieCrust:
cd piecrust/website
../bin/chef serve

Automáticamente se abrirá una pestaña en el navegador web con la dirección http://localhost:8080, mostrando el sitio web que viene por defecto:

Captura del sitio web por defecto con PieCrust

Una de las cosas geniales de PieCrust es que, con el servidor funcionando de fondo, puedes hacer cualquier cambio en el proyecto (contenidos, maquetación, programación, configuración, etc) y los cambios se aplican automáticamente. Sólo tienes que refrescar la página en el navegador.

Pues nada, que ya lo tienes funcionando, así que puedes probar a modificar o añadir contenidos. Las páginas y posts los encontrarás escritos con sintaxis Markdown en las carpetas website/_content/pages y en website/_content/posts, respectivamente.

Generar el sitio web estático

El comando chef de PieCrust no sólo permite que el framework actúe como un servidor ligero, sino también realizar la generación del sitio web estático. Esto lo hace mediante la orden bake. Estando en el directorio website en la línea de comandos, puedes probarlo ejecutando:

../bin/chef bake

Captura del terminal ejecutando el comando "bake"

Una vez terminado el proceso, puedes encontrar tu nuevo sitio web estático en el directorio website/_counter. Maravilloso, :)

Modo “servidor” VS Modo “generador”

Digamos que PieCrust tiene estos dos modos de trabajo. Puedes optar por usarlo en modo servidor en tu entorno local y después generar el sitio web completo con los últimos cambios para ponerlo en el hosting que sea. Otra opción es tener PHP instalado en ese hosting y que PieCrust esté funcionando también allí.

Lo he estado comentando con Guillermo Carvajal en el hilo de comentarios de este post, pero bajo mi punto de vista, las ventajas de tener PieCrust instalado y funcionando como servidor en el entorno de producción serían:

  • La actualización de contenidos es mucho más rápida y sencilla: simplemente subes el fichero Markdown al directorio correcto y PieCrust ya lo detecta y regenera automáticamente el sitio.
  • La actualización de otros cambios del sitio también los pilla automáticamente (imágenes, layout, CSS, Javascript, etc).

Sin embargo, yo para Hachemuda prefiero tener el servidor de PieCrust sólo en local, hacer los cambios en mi ordenador y después generar el nuevo site y subirlo al servidor como un sitio únicamente estático. Las ventajas son:

  • Es más rápido, sólo son ficheros estáticos.
  • No requiere tener un hosting con PHP, me vale con el más básico (y barato).
  • No tengo que preocuparme de si está funcionando bien o no. El HTML siempre funciona y mucho tráfico hay que tener para que se caiga un servidor por servir ficheros estáticos.

Configuración general

La configuración general para tu proyecto está disponible en el fichero website/config.yml, un fichero escrito en YAML con todas las opciones que quieras personalizar. Por ejemplo, en el caso de Hachemuda:

site:
    title: HacheMuda
    url: http://wwww.hachemuda.com
    description: Blog personal de Guillermo Latorre
    author: Guillermo Latorre
    pretty_urls: true
    post_url: %year%/%month%/%slug%
    tag_url: etiqueta/%tag%
    category_url: categoria/%category%
    enable_gzip: true
    posts_per_page: 7
    timezone: Europe/Madrid
    auto_formats:
        md: markdown
smartypants:
    enable: true
baker:
    skip_patterns:
        - /^index.php/

Algunas de las opciones más importantes:

  • pretty_urls: para activar los permalinks.
  • post_url, tag_url y category_url: para personalizar los permalinks de cada tipo.
  • auto_formats: para añadir otros formatos de los ficheros de contenidos. Por defecto soporta contenidos escritos en ficheros .html, pero en mi caso también he añadido la extensión .md asociada con contenidos en Markdown.
  • skip_patterns (dentro de baker): para que no tenga en cuenta algunos archivos/directorios en la generación del sitio estático.

En el fichero de configuración también puedes definir tus propias variables y datos generales para después usarlas en las plantillas. Esto está bastante bien explicado en la documentación oficial.

El theme y las plantillas

El directorio website, que contine el propio sitio web público, por defecto tiene esta estructura:

Estructura de directorios y ficheros del sitio web público

De forma nativa, PieCrust soporta el lenguaje de plantillas Twig y Mustache, aunque pueden configurarse otros como Dwoo, Haml. Viene con Twig activado por defecto, que es un lenguaje bastante flexible y permite realizar una programación básica en las propias plantillas, como trabajar con variables, bucles, condicionales…

Hablaré más profundamente, y con ejemplos, en la parte III de este artículo.

Debugging con PieCrust

En otros generadores de sitios web estáticos que he probado, resulta bastante complicada la detección de muchos problemas derivados del formato de los propios contenidos o de programación de las plantillas del theme.

PieCrust es bastante bueno en esto. Cuando detecta problemas muestra páginas de error con suficiente información para poder localizarlos fácilmente. Y, además de poder ejecutar el servidor para que muestre un completo log en la línea de comandos, en la URL del sitio web puedes añadir el parámetro ?!debug para ver en el navegador una ventanita de debugging con toda la información que tiene el CMS en ese momento.

Herramienta de Debugging con PieCrust

De esta forma, puedes ver fácilmente los valores de la configuración general, las variables disponibles en esa página, todo el contenido detectado, toda la información de esa página, etc.