Creación de Blog Con Hugo - Parte 1

Creación de Blog Con Hugo - Parte 1

Hugo es un útil framework para generar un sitio web estático. En nuestro caso, queremos hacer un blog sencillo, con lo que la herramienta se adapta perfectamente. El contenido del blog se redactará usando lenguaje Markdown. Encontrareis mucha documentación de este lenguaje. Os dejo una Cheatsheet sencilla.

Nos centraremos en:

  1. Instalación y primeros pasos con Hugo (Parte 1)
  2. Desployment del blog un servicio web distribuido (Parte 2)

¿Por qué Hugo?

És rápido. Flexible. Open Source. Existe gran cantidad de documentación, ejemplos y plantillas. Se puede crear el site com Vim o con Sublime Text de manera sencilla. Por la experiencia actual es sencillo crear un site básico.

¿Por qué un sitio web estático?

  • Simplicidad: sólo se necesita un servidor web que sirva las páginas webs y el resto de contenido estático, no hay servidores de bases de datos ni de aplicaciones.
  • Seguridad: como no se tiene que realizar procesamiento de los datos de entrada ni consultas a otros servicios en backend, la posibilidad de explotar alguna vulnerabilidad en el lado del servidor se reduce drásticamente.
  • Ligeros Son más rápidos, no tienen comunicación con backend, reduce el consumo de energía eléctrica y son portables

Pero sobre todo, porque queremos desplegar el sitio web en un servicio web distribuido y en nuestro caso solo se soportan sites estáticos. Más adelante nos centraremos en la parte de despliegue distribuido del proyecto.

El artículo actual pretende mostrar como usar Hugo y dar los primeros pasos para crear un sitio.

Antes de empezar

Tips para asegurar un buen seguimiento:

  1. Conocimiento básico de shell y de algún editor de texto.
  2. Posibilidad de revisión de la documentación oficial
  3. Uso básico de Github

Sistema ooperativo: Debian 10 (buster) pero en breve lo portaré a Raspbian

Instalación

Instalación

Recomiendo la documentación para tener más detalles:Quick Start En Debian 10, para instalar Hugo podemos usar el gestor de paquetes apt

$ apt-get install hugo 
$ hugo version # Verificamos versión

En este momento, el paquete que instala es una v0.54.0, el la rama stable Para evitar problemas con los templates disponibles, que muchos están actualizado a las últimas versiones de Hugo, instalaremos la última release disponible. Recomendamos revisar la última entrega de hugo en la página de releases del repositorio de Hugo. A la fecha de publicación de este post está disponible la v0.80.0.

$ wget https://github.com/gohugoio/hugo/releases/download/v0.80.0/hugo_0.80.0_Linux-64bit.deb  # Descargamos el paquete adecuado.
$ dkpg -i hugo_0.80.0_Linux-64bit.deb # instalamos el paquete
$ hugo version        # Verificamos, in nuestro case v0.80.0
$ hugo new site <projectName> # Creamos el directorio del proyecto
$ cd <projectName>     # Nos ubicamos en el directorio de trabajo
$ git init             # Version control

Añadir plantilla

En el caso de este Blog, hemos elegido Beautiful Hugo como tema.

Este tema tiene configuraciones específicas que pueden definirse en el fichero de settings

$ git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo
# usamos el fichero de configuración del tema como punto de incio
$ cat themes/beautifulhugo/exampleSite/config.toml >> config.toml

Antes de modificar las configuraciones ahora, debemos revisar los ficheros que encontramos en <project>/themes/beautifulhugo/exampleSite. Nos ayudará a entender la estructura del proyecto y podremos coger ideas para nuestro Blog.

Trasteamos com el fichero config.toml. Para más detalles, podeis revisar las opciones de configuración: Configuración.

Uso básico

$ hugo new post/testing-post.md # Se crea el nuevo post. Para 

El nuevo fichero se creará en el path <project>/content/post/. Atención a la extensión (debe ser .md si no no la interpreta).

*En la especificación de la plantilla BeautifulHugo debemos mantener las palabra page o post para hacer que algunas funcionalidades funcionen correctamente.

Para lanzar el servidor de hugo y revisar el site creado:

$ hugo server -D # Start the Hugo server locally

Si abrimos en cualquier navegador http://localhost:1313/ se podrá verificar el blog. Podemos ir jugando con el fichero de configuración para ajustar la presentación. En nuedtro caso, la idea es buscar una presentación sencilla, sin complicaciones.

Si todo es correcto ya podemos empezar a publicar el blog en Internet. Nuestra opción será hacerlo los servicios que proporciona IPFS y lo mostraremos en nuestra siguiente publicación.

Existe mucha documentación que enseña como publicar en Github Pages

hugo  blog  devel 

See also