Máster en Web on Desarrollo web

Instalación

Mon, 04 Oct 2021 12:01:52 +0200

✅ Objetivos

Aprenderemos a instalar hugo y crear un nuevo sitio web
😄 qué bonito es
No olvides, si se necesita, configurar el path del sistema para acceder desde cualquier invocación
Gestionamos todo desde un terminal independientemente de usar linux o windows
Verifica la versión instalada

Páginas referenciadas

Web de visual code : https://code.visualstudio.com/
Web de jetsbrain y phpstorm: https://www.jetbrains.com/
hugo: https://gohugo.io
página de snap : https://snapcraft.io/docs/snap-documentation

Instalación

Tiene instaladores para mac, windows y linux:

Temas o layouts base

Mon, 04 Oct 2021 13:19:24 +0200

✅ Objetivo:

Asociar una plantilla o theme al sitio web
Acceder al fichero de configuración del sitio web config.toml Páginas referenciadas o de consulta
https://desarrolloweb.com/articulos/generar-contenido-site-hugo (primera parte)
Plantillas disponibles en hugo https://themes.gohugo.io/
Plantilla usada como ejemplorelearn: https://themes.gohugo.io/themes/hugo-theme-relearn/

Tema, plantilla o layout para el sitio web

Ahora que tenemos nuestro sitio web, lo primero que tenemos que hacer es asociar una plantilla o theme a nuestro sitio para poder visualizar su contenido. Para referirnos a la plantilla usaremos el término theme o layout

Shortcode

Mon, 04 Oct 2021 13:19:53 +0200

Extensiones a markdown.

IMPORTANTE: Se usan dentro del texto .md no en las plantillas

Doc: https://gohugo.io/content-management/shortcodes

El párrafo que has escrito está bien enfocado para un nivel de ciclo superior de desarrollo web, pero tiene algunos pequeños detalles de estilo que se podrían ajustar para mejorar la fluidez del texto. Aquí te doy una versión ligeramente corregida, con algunas mejoras gramaticales y de redacción:

Un shortcode es un fragmento de código HTML que será renderizado a partir de un texto en un fichero .md cuando el sistema cargue o renderice la página de contenido.

Añadiendo

Mon, 04 Oct 2021 13:19:24 +0200

Creando contenido: markdown

Para crear nuevo contenido vamos a generar páginas de texto con formato markdown (Hablamos más abajo sobre el tema) Podemos consultar las siguientes referencias para el texto en markdown:

Este metalenguaje o lenguaje con marcas es muy utilizado en la documentación técnica .

Despliegue en git

Mon, 04 Oct 2021 13:19:24 +0200

1. Crear el Repositorio en GitHub

Ve a GitHub, inicia sesión y crea un nuevo repositorio (esta sección ya la hemos realizado previamente:

Haz clic en New en la esquina superior derecha.
Nombra el repositorio, por ejemplo, mi-proyecto-hugo
Selecciona público si deseas que el sitio sea accesible para todos.
Copiamos las instrucciones y vamos a local
Terminamos el proceso para subir nuestro proyecto, pero antes de ello debemos preparar nuestro proyecto de hugo para deplegarlo

Configurar Hugo para deplegarlo

Por defecto, Hugo genera los archivos estáticos en la carpeta /public , pero para desplegarlo, git espera que el sitio web esté en una carpeta llamada /docs para GitHub Pages , que es dónde se va a desplegar.

Taxonomías

Mon, 04 Oct 2021 13:19:24 +0200

Taxonomías

https://gohugo.io/content-management/taxonomies

Una taxonomía es una categorización que nos permite clasificar contenido.

Por ejemplo, en una web de Películas podríamos tener actores, directores, estudios, géneros, años, premios … A continuación se muestra un breve ejemplo, pero esta parte no la vamos a incluir en nuestro ejemplo.

Por defecto Hugo añade las taxonomías categories y tags. Se pueden añadir más en config

[taxonomies]
  category = 'categories'
  tag = 'tags'

Si se quiere deshabilitar:

Personalizar la plantilla

Fri, 22 Oct 2021 16:23:31 +0200

✅ Objetivos

Vamos a modificar la plantilla utilizada
Siempre se podrá hacer, pero en cada plantilla de una forma
Acceder siempre a la información de la plantilla
Modificar el logo, menú, etc

Páginas referenciadas

En este caso referenciamos el tema relearn

Qué partes hay en la plantilla

Debemos identificar las partes de una plantilla. Independientemente de la plantilla utilizada podemos hablar de:

Logo
Colores usados en el estilo
Menú principal Identifiquemos esos elementos en nuestra plantilla y veamos cómo modificarlos para personalizarla a nuestro gusto.

En la imagen siguiente hemos identificado diferentes partes en la plantilla que vemos tras instalarla, sin ninguna modificación.

Multilenguaje

Tue, 05 Oct 2021 20:02:27 +0200

Ver cómo establecer diferentes lenguajes en nuestro proyecto
https://gohugo.io/content-management/multilingual/
https://relearn.netlify.app/en/cont/i18n/

Multilenguaje

Hugo permite establecer el multilenguaje para adaptar las páginas en el lenguaje deseado

Para ello, lo primero modificamos el fichero de configuración estableciendo los idiomas » Vamos a establecer 3 idiomas : inglés, francés, y español



[Languages]
    [Languages.es]
        title = "Ejemplo para el uso de idiomas"
        weight = 1
        languageName = "Español"
    [Languages.en]
        title = "Example use language"
        weight = 2
        languageName = "English"
   [Languages.fr]
        title = "Exemple d'utilisation des langues"
        weight = 3
        languageName = "Français"

Vemos como las variables usadas son claras en su función. weight , como ya sabemos establece el orden en el que aparecerán en el menú

Listado de idiomas configurado

Datos externos

Mon, 04 Oct 2021 13:20:01 +0200

Consumir datos de ficheros con estructura

La ubicación del fichero debe de estar en data Podemos consumir datos de diferentes fuentes, entro otras opciones:

Un fichero json
Fichero CSV
Un directorio con imágenes
Un fichero csv compartido en drive

Para ilustrar esto, a ubicar en el directorio data un fichero de cadenas de tv sacado de github y ubicado en un proyecto de github https://github.com/MAlejandroR/staticSite/blob/main/data/tv.json

Este fichero, es un array de elemetos json (parejas variable valor en un fichero) Cada json contiene name y channels y channels es un array con todos los canales de ese tipo de canales con los siguientes datos:

Search Results

Mon, 01 Jan 0001 00:00:00 +0000