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 contentido de tus productos por ejemplo
    • data: datos del sitio como configuraciónes de localización van aquí
    • layouts: maquetados 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.

enlaces