hugo

Crear una web estática con Hugo

Vamos a poner en marcha una web estática de forma rápida y sencilla, para ello vamos a usar la herramienta hugo. Instalación de hugo Lo primero es instalarnos el ejecutable, en muchas distribuciones basadas en debian, es tan sencillo como ejecutar: $ sudo apt install hugo Podemos ver la versión instalada ejecutando: $ hugo version hugo v0.82.0-9D960784 linux/arm BuildDate=2021-03-21T17:28:04Z VendorInfo=gohugoio Si queremos tener la última versión, lo mejor es descargarlo desde el repositorio oficial, existen versiones para multiples arquitecturas y sistemas operativos. Creando una web Una vez instalado vamos a generar la configuración inicial $ hugo new site minuevoblog Congratulations! Your new Hugo site is created in /home/pi/tmp/minuevoblog. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation. Como indica la salida del comando anterior, descargamos un tema para la web desde https://themes.gohugo.io. $ cd minuevoblog/ $ git clone https://github.com/alexandrevicenzi/soho.git themes/soho Cloning into 'themes/soho'... remote: Enumerating objects: 666, done. remote: Total 666 (delta 0), reused 0 (delta 0), pack-reused 666 Receiving objects: 100% (666/666), 1.36 MiB | 7.20 MiB/s, done. Resolving deltas: 100% (313/313), done. Añadimos en el fichero de configuración config.toml el tema que vamos a usar y algunas variables básicas. Los temas, tienen opciones específicas de configuración que se explican en su misma web de descarga o repositorio de github. $ cd minuevoblog/ $ vi config.toml baseURL = "http://example.org/" languageCode = "en-us" title = "My New Hugo Site" theme = "soho" Creando contenido Para formatear el contenido, se usa el lenguage MarkDown. Cada página se creará dentro del directorio minuevoblog/content/ podemos crear un esqueleto inicial con el siguiente comando. $ cd minuevoblog/ $ hugo new posts/primer-post.md minuevoblog/content/posts/primer-post.md created Editamos el fichero generado. $ cd minuevoblog/ $ vi content/posts/primer-post.md --- title: "Primer Post" date: 2021-03-25T07:40:34+01:00 draft: false --- Hola soy un primer post en markdown Solo nos falta generar el contenido estático ejecutando hugo. El contenido generado estará en el directorio minuevoblog/static/. cada vez que hagamos una modificacion o se añada contenido ejecutaremos el mismo comando para regenerar todo el contenido estático. $ cd minuevoblog/ $ hugo Start building sites … | EN -------------------+----- Pages | 7 Paginator pages | 0 Non-page files | 0 Static files | 8 Processed images | 0 Aliases | 1 Sitemaps | 1 Cleaned | 0 Total in 80 ms Publicando la web En este punto ya tenemos la web lista para ser publicada, podemos usar nginx o cualquier servidor http/https que queramos apuntando al directorio minuevoblog/static/. En próximas entradas explicare como configurar nginx con un certificado SSL válido. ...

23 Mar 2021 · 3 min · Alex Soto