Hugo – Parte 1

Hugo es un sistema por línea de comandos para generar sitios web estáticos. Una frase muy chula, pero… ¿qué significa realmente?

Imaginad que queréis escribir una página web, abriríais vuestro editor de texto favorito y pondríais allí vuestro HTML. Si el sitio web tiene muchas páginas, tendríais que escribir una a una con vuestro editor el HTML. Vale ya tienes tu sitio web con cientos de páginas web y si ahora al jefe se le mete en la cabeza que hay que poner un menú en cada página, tocaría editarlas una a una para poner el menú. ¿Y si se añade una página web nueva que debe aparecer en el menú? Vuelta a editar las cientos de páginas.

¿Qué eslo que hace Hugo? El mismo trabajo anterior hecho con Hugo consistiría en escribir nuestros contenidos usando una serie de convenciones (como puede ser un lenguaje de Markdown) y ejecutando un comando, se generarán las páginas web que debemos subir a nuestro servidor. En el caso de que el jefe quiera introducir un menú, usando los comandos adecuados, Hugo hará el trabajo. Fijaros que al final se obtienen páginas web en HTML que no dependen de tener instalado en el servidor PHP, Java o cual quier base de datos como MySQL. El rendimiento que alcanzará un servidor, como puede ser NGinx, sirviendo dicho contenido estático, será realmente elevado.

Actualmente tenemos gestores de contenido, como WordPress, que generan las páginas web de forma dinámica y permiten modificarlas usando entornos WYSIWYG de forma sencilla. Pero estos entornos suelen ser lentos y dependen de bases de datos y una simple migración puede ser un calvario. Fijaros que WordPress, si no se usan proxys o caches, va a generar la página web cada vez que vayamos a visitarla, con la pérdida de rendimiento que ello significa. Cuando se desea tener un sitio web con un alto nivel de visitas y un servidor con bajos recurso, tendremos que olvidarnos de los gestores de contenido dinámicos y recurrir a soluciones como Hugo.

Pero el rendimiento tiene su precio. Olvidaros de un entorno amigable estilo WordPress, aquí todo se va a hacer usando editores de texto y línea de comandos. Hugo es para machos muy machos de esos que tienen pelos en los sobacos.

Instalación

Para instalarlo en Ubuntu se usará:

sudo apt-get install hugo

Creando un nuevo sitio

Para crear nuestro nuevo sitio se usará:

hugo new site ejemplo

Se creará un directorio con la información básica del sitio. En este caso el sitio se llamará ejemplo. Después veremos el signicado de cada uno de los directorios que se crean.

Ahora se entra en la carpeta:

cd ejemplo

Indicando un tema

Hasta que no se instale un tema, hugo no mostrará contenido. Para instalar el tema se usará la herramienta git. Primero instalamos git:

sudo apt-get install git

Después en https://github.com/dim0627/ elegimos un tema. Para descargar un tema entramos en el tema con nuestro firefox y en el botón de “Clone or download” de Github copiamos la dirección y se la pasamos a git. Por ejemplo, para instalar el tema hugo_theme_robust nos indica que la dirección es https://github.com/dim0627/hugo_theme_robust.git, por lo que le comando git será:

git clone https://github.com/dim0627/hugo_theme_robust.git

Es importante recordar el directorio del tema que hemos instalado, más adelante lo necesitaremos.

Añadiendo una nueva entrada

Para añadir contenido se usará:

hugo new post/hola-mundo.md

Dentro de la carpeta content/post se creará el contenido “hola-mundo.md”. Que contendrá algo similar a:

+++
date = "2017-04-07T01:04:36+02:00"
draft = true
title = "hola mundo"

+++

 

Date especifica la hora de creación de la entrada. Draft indica si el contenido es un borrador y no se integrará en el sitio que se genere. Por último title es el título de la entrada.

Usando un lenguaje de Markdown, se puede introducir el contenido de la entrada:

+++
date = "2017-04-07T01:04:36+02:00"
draft = true
title = "hola mundo"

+++

Hola mundo **esto** es un ejemplo.

Hola mundo

 

También podemos usar HTML si nos encontramos más cómodos.

Viendo los contenidos

Por ahora se ha creado un contenido de ejemplo en modo borrador. Para poder consultar cómo está quedando nuestro sitio web, podremos usar:

hugo server --theme=hugo_theme_robust -D

El comando nos indicará una página web en la que podemos ver los contenidos desde nuestro navegador. Normalmente http://localhost:1313/.

Ya podremos ver nuestro sitio web. Si se instalan más temas, se podrá ver como queda el sitio con los diferentes temas.

Vamos ahora a cambiar el el estado de la entrada que se ha creado de borrador a publicada:

+++
date = "2017-04-07T01:04:36+02:00"
draft = false
title = "hola mundo"

+++

Hola mundo **esto** es un ejemplo.

 

Para ver el sitio definitivo se usará:

hugo server --theme=hugo_theme_robust

Importante: Cada vez que se haga una modificación en un fichero, deberemos ejecutar el comando anterior para ver cómo ha cambiado el sitio.

Configurando los parámetros del sitio

El archivo config.toml contiene algunos datos básicos del sitio web:


baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"

Deberemos cambiar estos parámetros en función de lo que se desee servir. En baseurl se indicará el nombre de nuestro dominio o la ruta al sitio donde van a estar alojadas nuestras páginas web. LanguajeCode el es idioma de nuestro sitio, por último title es el título del sitio. Por ejemplo:


baseurl = "http://localhost/ejemplo1/"
languageCode = "es"
title = "Ejemplo de nuevo sitio"

Generando el sitio definitivo

Ejecutando:

hugo --theme=hugo_theme_robust

Se creará el sitio web en la carpeta public. Ahora lo podremos subir a nuestro servidor favorito.

 

 

Anuncios
Esta entrada fue publicada en Software y etiquetada . Guarda el enlace permanente.

3 respuestas a Hugo – Parte 1

  1. Pingback: Hugo | PlanetaLibre

  2. Pingback: Taxonomías en Hugo – Parte 2 | Cartas de Linux

  3. Pingback: Hugo – Parte 1 | PlanetaLibre

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s