hugo funcionamiento
PROPÓSITO
- explicar el funcionamiento de Hugo
FUNCIONAMIENTO
- para crear un primer sitio con Hugo una vez instalado
C:\proyectos\hugo\>hugo new site primer-sitio
Congratulations! Your new Hugo site is created in
C:\proyectos\hugo\\primer-sitio.
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.
cd primer-sitio
C:.
├───archetypes
├───content
├───data
├───layouts
├───static
└───themes
-
Hugo ha creado 5 subdirectorios y 1 archivo, que usa para crear el sitio web final. Aquí está lo que todos significan:
- archetypes: aquí definimos lo que es nuestro contenido, podemos establecer etiquetas o categorías predeterminadas y definir tipos como un post, tutorial o producto.
- config.toml: la configuración principal está aquí, podemos definir el título de todos los sitios web, idioma, urls, etc
- content: las páginas de contenido del sitio están guardadas aquí, los subdirectorios son usados para que las secciones ayuden a organizar el contenido, crea un content/products para el contenido de tus productos por ejemplo
- data: datos del sitio como configuraciones de localización van aquí
- layouts: maquetas para la librería Go html/template que Hugo utiliza van aquí
- static: cualquier archivo estático aquí será compilado al sitio web final, hay total libertad, así que puedes servir cualquier archivo css, js, o de imagen por ejemplo.
- themes: Crea nuevos temas o clona temas desde github a éste directorio para usarlos en tu sitio.
-
ahora tenemos que clonar o crear un tema pues sin el tema no se ve nada en el sitio
TEMAS
- clono un tema simple llamado onetwothree
git clone https://github.com/schollz/onetwothree.git themes/onetwothree
- y creo el primer post
hugo new post/first-post.md
- crea un nuevo archivo con el front matter que usa Hugo para crear la página
---
title: "First Post"
date: 2018-08-10T16:34:49+02:00
draft: false
---
-
atención pues lo crea como borrador por lo que si lo queremos ver hay que poner
draft: false
-
para que al crear el sitio se use el tema clonado se pone en el archivo de configuración
config.toml
theme = "onetwothree"
- es mejor poner esta opción en la configuración que lanar el comando
hugo server -t onetwothree
pues esto da error con la versión 0.44 de Hugo
CREAR UN TEMA
hugo new theme zafta
-
esto crea la estructura del tema
-
creo un sitio con la estructura inicial y con el tema onetwothree pero pongo todo en el propio sitio para poder pasar del tema que es más simple para aprender.
ARCHIVO _INDEX.MD
- este archivo se usa para ser tratado por la plantilla list.html que se encarga de mostrar una lista de los documentos que estan en ese directorio
- tambien se usa para resolver menús descendentes
ENLACES ÚTILES
- una web sobre hugo con la documentación aumentada
- de code.tutsplus
- del tema onetwothree
- un buen artículo sobre Hugo en castellano
- para las taxonomías