Generación de una página web con Hugo

Sigue estos pasos:

1. Instalación de Hugo link

Instalar Hugo

  sudo apt-get install hugo
  

  ❯ hugo server -p 1312

WARN Module "XXXXX" is not compatible with this Hugo version; run "hugo mod graph" for more information.
Error: add site dependencies: load resources: loading templates: "~/YYYYY/themes/XXXXX/layouts/_default/_markup/render-codeblock-math.html:1:1": parse failed: template: _default/_markup/render-codeblock-math.html:1: unclosed action
  

  sudo dpkg -i hugo_extended_0.*_linux-amd64.deb
  

  choco install hugo -confirm
  

  brew install hugo
  

2. Elección de tema link

Elegimos un tema. Por ejemplo, el tema de esta web LotusDocs.

3. Creación del repositorio remoto link

Creamos el nuevo repo mediante la interfaz web y lo clonamos vacío mediante SSH. Para ello seguiremos los pasos explicados anteriormente en el apartado de clonar repositorio en la guía editar con git.

Otra forma alternativa a este paso es inicializar del repositorio local y luego configurar el repositorio remoto. Por ejemplo en nuestro caso sería lo siguiente:

  git init 
git remote add origin git@framagit.org:rosa/teknokasa.git
  

4. Creación del proyecto link

En este paso generamos el esqueleto de un proyecto de Hugo. Para ello, creamos un nuevo proyecto en una nueva carpeta llamada con:

  hugo new site <name-project>
  

  hugo new site . -f
  

Donde el . es para referirse a la ruta relativa del sistema y -f para forzar la creación en un directorio que no está vacío.

5. Inicialización del repositorio remoto como módulo de Hugo link

Una vez creado, volvemos a la terminal e inicializamos hugo con la dirección del nuevo repo.

  hugo mod init framagit.org/$USUARIE/$NOMBRE
  

6. Añadimos el tema como módulo de hugo link

Añadimos el tema como módulo de hugo. Con los siguientes comandos:

  hugo mod get github.com/colinwilson/lotusdocs
  

7. Edición de la configuración link

Editamos el fichero de configuración config.toml y añadimos:

  baseURL = "http://localhost:1312/"
[module]
    [[module.imports]]
        path = "github.com/colinwilson/lotusdocs"
  

Es altamente recomedable fijarse en el exampleSite del tema para copiar y pegar el archivo hugo.yaml o config.yaml. Se puede cambiar la configuracion a un archivo YAML con un convertidor online de TOML a YAML.

8. Servimos la página web link

Servimos la página web con el siguiente comando y está disponible en la ruta http://localhost:1312/.

  hugo serve -p 1312
  

9. Creación de nuevo contenido link

Creamos nuevo contenido en Hugo. Por ejemplo en el tema ReLearn, crearemos un nuevo capítulo con el siguiente comando:

  hugo new --kind chapter hugo/_index.md
  

O si queremos crear una nueva entrada, escribimos:

  hugo new hugo/quick_start.md
  

También es importante fijarnos en la configuración del tema elegido y el sitio de ejemplo asociado.

10. Publicamos los cambios link

Publicamos el proyecto en GitLab. Para este paso es importante haber creado el repositorio remoto como se explica en el paso 3. Si lo hemos realizado correctamente, al ejecutar el comando git remote -v nos mostrará el repositorio remoto. Si nos

• Añadimos todos los cambios a la fase stage:

  git commit add .
  

• Nombramos y guardamos (commiteamos) la nueva versión:

  git commit -m "Esqueleto creado"
  

• Subiremos los cambios de la rama main al repositorio remoto:

  git push origin main