Empezando con nanoc

Nanoc es un generador de páginas estáticas escrito en Ruby. Nanoc crea ficheros HTML a partir de plantillas escritas en ERB, HAML u otros lenguajes.

No necesitas nada especial en el servidor para usar nanoc, ya que las plantillas se procesan en tu ordenador. Basta con subir los ficheros estáticos generados a un servidor web y el sitio ya estará accesible.

Creando un sitio

Lo primero que tenemos que hacer es instalar nanoc y otras gemas que vamos a necesitar.

$ sudo gem install nanoc3 rack mime-types

Una vez instalado todo el siguiente paso es crear nuestro primer sitio web.

$ nanoc3 create_site mi_sitio

Esto nos genera la siguiente salida:

      create  config.yaml
      create  Rakefile
      create  Rules
      create  content/index.yaml
      create  content/index.html
      create  layouts/default.yaml
      create  layouts/default.html
Created a blank nanoc site at 'mi_sitio'. Enjoy!

El comando anterior crea un nuevo proyecto de nanoc en la carpeta ‘mi_primer_sitio’, pero aún no hay ningún fichero que podamos abrir con un navegador web. Para ello debemos indicar a nanoc que compile nuestro proyecto en un sitio estático.

$ nanoc3 compile
Loading site data...
Compiling site...
      create  [0.01s]  output/index.html

Site compiled in 0.01s.

Si echamos un vistazo al directorio output vemos que se ha creado un nuevo fichero llamado index.html. El contenido de este fichero se genera a partir de un contenedor o fichero de layout y un fichero de plantilla.

Los ficheros que genera nanoc no están pensados para abrirse directamente con el navegador, sino para ser servidos mediante un servidor web. Esto es importante, ya que nanoc por defecto utiliza rutas absolutas para los recursos (imágenes, hojas de estilo, etc…). Si abrimos el fichero directamente con el navegador seguramente veamos el contenido sin estilos aplicados.

Si a esto añadimos que con cada cambio que hagamos debemos recompilar el sitio, el proceso de desarrollo se hace muy tedioso. Para ello nanoc nos permite arrancar un servidor web local que compila automáticamente el sitio cada vez que accedemos a él. Para arrancarlo basta con escribir en el terminal.

mi_sitio$ nanoc3 aco

Con esto abrimos un servidor web en el puerto 3000 de nuestra maquina en el que podremos ver el sitio web compilado. No es necesario compilar manualmente ya que nanoc lo hará por nosotros cada vez que accedamos a este servidor.

Podemos entrar con nuestro navegador favorito en http://localhost:3000/ y veremos el sitio web compilado:

Editando plantillas

Las diferentes plantillas para generar nuestro sitio web estático se almacenan en el directorio content. Si entramos en él, veremos que tiene una estructura similar a esta:

mi_sitio/content$ ls -l
total 16
-rw-r--r--  1 alex  _www  981  4 ene 01:21 index.html
-rw-r--r--  1 alex  _www   17  4 ene 01:21 index.yaml

index.html es el fichero que contiene el contenido de la plantilla, e index.yaml es donde se almacenan los metadatos de la misma.

Vamos a modificar el título de la página. Para ello modificamos el fichero index.html y cambiamos el contenido del tag <h1> por lo siguiente:

<h1>Mi primer sitio con nanoc</h1>

Ahora abrimos el fichero index.yaml y dejamos su contenido como sigue:

--- 
title: Mi primer sitio con nanoc

Accedemos de nuevo a http://localhost:3000/ para comprobar que ha modificado el sitio con nuestros cambios.

Creando una nueva página

Crear una nueva página en nanoc es muy simple:

$ nanoc3 create_item nombre_pagina

Por ejemplo, vamos a crear una página en la que metamos información acerca de nosotros mismos

mi_sitio$ nanoc3 create_item acerca_de
      create  content/acerca_de.yaml
      create  content/acerca_de.html
An item has been created at /acerca_de/.

Si ahora apuntamos nuestro navegador a http://localhost:3000/acerca_de/ veremos que se ha creado una nueva página en blanco. Si modificamos el fichero content/acerca_de.html se actualizará el contenido de la página que acabamos de crear.

Entendiendo el layout

Los layouts (podemos tener varios) se almacenan en el directorio layouts. Si echamos un vistazo al directorio tendremos una estructura similar a esta.

mi_sitio/layouts$ ls -l
total 16
-rw-r--r--  1 alex  _www  875  4 ene 23:51 default.html
-rw-r--r--  1 alex  _www    8  4 ene 23:51 default.yaml

Esta estructura nos resultará familiar del contenido del directorio content.

Por defecto el fichero default.yaml viene vacío, así que de momento vamos a centrarnos en el contenido de default.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>A Brand New nanoc Site - <%= @item[:title] %></title>
    <link rel="stylesheet" type="text/css" href="/style.css" media="screen">
  </head>
  <body>
    <div id="main">
<%= yield %>
    </div>
    <div id="sidebar">
      <h2>Documentation</h2>
      <ul>
        <li><a href="http://nanoc.stoneship.org/tutorial/">Tutorial</a></li>
        <li><a href="http://nanoc.stoneship.org/manual/">Manual</a></li>
      </ul>
      <h2>Community</h2>
      <ul>
        <li><a href="http://groups.google.com/group/nanoc/">Discussion Group</a></li>
        <li><a href="http://groups.google.com/group/nanoc-es/">Spanish Discussion Group</a></li>
        <li><a href="http://projects.stoneship.org/trac/nanoc/">Wiki</a></li>
      </ul>
    </div>
  </body>
</html>

Como podemos ver se trata de un fichero HTML normal y corriente, salvo por dos detalles. El primero lo encontramos en el