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.
- Hugo nos ofrece un miniservidor para ir viendo el progreso antes de publicar, lo ejecutamos con el siguiente comando:
$ cd minuevoblog/
$ hugo server -D
Start building sites …
| EN
-------------------+-----
Pages | 10
Paginator pages | 0
Non-page files | 0
Static files | 8
Processed images | 0
Aliases | 1
Sitemaps | 1
Cleaned | 0
Built in 73 ms
Watching for changes in minuevoblog/{archetypes,content,data,layouts,static,themes}
Watching for config changes in minuevoblog/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop