Instalación

Instalación

Tiene instaladores para mac, windows y linux:

• https://gohugo.io/getting-started/quick-start/#step-1-install-hugo

 hugo version

// Instalacion en ubuntu con apt (cuidado con la versión)
sudo apt-get install hugo

// Instalacion en ubuntu con snap, recomendado, instala última versión
sudo snap install hugo --classic

// Chocolat se instala en power shell por consola
Set-ExecutionPolicy Bypass -Scope Process -Force;
[System.Net.ServicePointManager]::SecurityProtocol =
[System.Net.ServicePointManager]::SecurityProtocol -bor 3072;
iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

choco --version

// Instalacion en Windows teniendo instalado chocolatey
choco install hugo -confirm

sudo apt-get install snapd

Instalar con apt-get instala una versión 0.68 Versión actual 0.134.3-

Editor para el desarrollo

Interesante usar Visual Code, aunque para el desarrollo del curso, vamos a utilizar phpstorm de jetbrains

• Visual code
• phpstorm

sudo snap install code --classic

sudo snap install phpstorm --classic

Una vez instalado si escriben en el terminal code . te abre el editor y te carga el directorio actual

• Puedes abrir el terminal desde el entorno
• Puedes commitear desde el editor y subir a git Esto ya lo veremos más adelante
• Instalar muchos plugins según necesidades

Crear un sitio nuevo

Mejor tener una carpeta concreta para los sitios que vayamos a crear.

En ella creamos un nuevo sitio con el comando new del CLI de hugo

hugo  new site <nombre_del_sitio >

La instalación nos da información de que se ha creado el sitio nuevo y de los pasos a realizar para continuar con nuestro nuevo sitio web: Una vez que creamos un sitio nuevo, observamos que se crea una carpeta o directorio con el nombre del sitio creado .

Dentro de ella vemos una estructura de directorios(Web de referencia sobre los directorios) que hay que entender:

Aquí tienes un artículo muy claro sobre los directorios creados.

• archetype

  En este directorio tendremos los ficheros base a partir de los cuales crearemos nuevos ficheros de contenidos usando los comandos de hugo.

• content

  Aquí ubicaremos los contenidos que queremos publicar . Dejaremos todos los ficheros Markdown que constituirán contenido de nuestro sitio.

• data

  Carpeta para dejar ficheros con datos para, por ejemplo, rederizar posteriormente en nuestro sitio web. Puede ser un fichero json con información, un csv (podríamos consumir un csv de nuestro drive también) o una carpeta con fotos o imágenes, como veremos en un ejemplo.

• layouts

  Carpeta muy importante donde podremos establecer la plantilla para nuestro sitio web . Lo más habitial es utilizar una plantilla de partida, que estará ubicada en la carpete theme, manteniendo la misma estructura, modificaremos ficheros del tema o layout base de nuestro sitio según nuestras necesidades o gustos. Se entenderá en el ejemplo correspondiente

• static

  Ficheros estáticos que vayamos usando en nuestro sitio, como imágenes, vídeos, los cuales pueden ser consumidos directamente por el sitio, sin ninguna necesidad de procesamiento previo (como fichero scss que tienen que ser transpilados a css, que deben de ir en la carpeta assets) Lo iremos viendo principalmente con imágenes

• asset

  Al igual que static ubicaremos ficheros estáticos , pero en este caso, antes de ser utilizados, deben de ser procesados de alguna forma y transpilados para utilizarse. Por ejemplo un fichero sass o less, para transformarse en un * css*

  • theme

  Esta carpeta es donde se va a ggestablecer el tema, layout o plantilla base a partir del cual se va a ver nuestro sitio. Es una buena recomendación, especialmente al principio, partir de una plantilla ya hecha. Tenemos muchos temas disponibles en la página oficial de hugo. En el siguiente apartado comenzaremos instalando un tema para empezar a construir nuestro sitio web, es lo primero que hay que hacer.

Práctica