Hugo

En esta sección o capítulo se explican los primeros pasos para crear y desplegar una página web estática generada con Hugo en GitLab pages.

Generación de una página web con Hugo

¿Cómo crear una nueva página web con Hugo?

Pasos:

  1. Instalar Hugo

    Si estás en Debian o Ubuntu puedes correr:

    sudo apt-get install hugo
    

    Si usas Mac asumiendo que tienes Homebrew:

    brew install hugo
    

    Si estás con Windows y usas Chocolatey:

    choco install hugo -confirm
    
  2. Elegimos un tema. Por ejemplo, el tema de esta web es ReLearn. Además, al final de esta página se exponen algunos temas recomendados.

  3. Creamos un nuevo proyecto con:

    hugo new site <name-project>
    
  4. Nos desplazamos a la carpeta e inicializamos el repositorio.

    git init
    
  5. Clonamos el tema elegido en la carpeta themes o añadimos el submódulo del repositorio. Por sencillez, se recomienda la opción de clonar el tema.

    • Mediante https:
    git clone https://github.com/McShelby/hugo-theme-relearn.git themes/relearn
    
    • Mediante SSH:
    git clone git@github.com:McShelby/hugo-theme-relearn.git themes/relearn
    

    O añadimos el submódulo, e:

    git submodule add https://github.com/McShelby/hugo-theme-relearn.git themes/relearn
    
  6. Editamos el fichero de configuración config.toml y añadimos:

    baseURL = "http://localhost:1313/"
    theme = "relearn"
    
  7. Servimos la página web con el siguiente comando y está disponible en la ruta http://localhost:1313/.

    hugo server
    
  8. Crear nuevo contenido en Hugo. Por ejemplo en el tema Learn, 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
    
  9. Publicamos el proyecto en GitLab.

Algunos temas de Hugo recomendados

Despliegue en Gitlab pages

¿Cómo desplegar el proyecto en GitLab pages?

  1. Configuramos la integración y despliegue contínuo creando el archivo .gitlab-ci.yml con la plantilla de Hugo. Si realizamos esto desde GitLab, en el contenido de la plantilla de GitLab, será necesario modificar la rama master por main.

    # This file is a template, and might need editing before it works on your project.
    ---
    # All available Hugo versions are listed here:
    # https://gitlab.com/pages/hugo/container_registry
    image: registry.gitlab.com/pages/hugo:latest
    
    variables:
      GIT_SUBMODULE_STRATEGY: recursive
    
    test:
      script:
        - hugo
      except:
        - main
    
    pages:
      script:
        - hugo
      artifacts:
        paths:
          - public
      only:
        - main
    
  2. Modificar la URL base que tiene esta estructura baseURL = "https://<gitlab-user>.gitlab.io/<project-name>/".

  3. Habilitar el acceso a todos los públicos a GitLab. Navegar en los ajustes del proyecto de GitLab y expandir Visibility, project features, permissions > Pages > Everyone.