Cómo crear una página web estática con Hugo

En este tutorial aprenderás y serás un experto usando a Victor Hugo, una plantilla repetitiva de Hugo que se mantiene continuamente, para que puedas construir tu sitio estático.

Hoy te voy a enseñar a cómo construir y alojar un sitio web estático con Hugo en Netlify, incluida la configuración de la implementación continua.

Para comenzar, asegúrate de tener todas las herramientas que vas a necesitar del Server Hugo: Brew en Mac, Git, Microsoft Visual Studio.

Si ya estás preparado para la acción, pero no tienes un sitio Hugo configurado, continúa y descarga Victor Hugo aquí.

Por el contrario, si ya lo tienes configurado, puedes pasar directamente a la sección Conectando con Netlify.

Construyendo tu Página Web

Hugo construye y organiza un esqueleto para tu sitio web, que configurará un directorio principal.

Por simplicidad, llamaremos a este directorio principal hugo. Además, configura subdirectorios dentro de este directorio hugo para los fines descritos a continuación.

Aquí hay un desglose básico de la estructura que Victor Hugo construye por ti:

|--site // Everything in here will be built with hugo<br />| |--content // Pages and collections - ask if you need extra pages<br />| |--data // YAML data files with any data for use in examples<br />| |--layouts // This is where all templates go<br />| | |--partials // This is where includes live<br />| | |--index.html // The index page<br />| |--static // Files in here ends up in the public folder<br />| |--config.toml // Where your global configuration settings are set/stored<br />|--src // Files that will pass through the asset pipeline<br />| |--css // CSS files in the root of this folder will end up in /css/...<br />| |--js // app.js will be compiled to /js/app.js with babel

$ cd /PATH/TO/hugo 

$ npm install

$ npm start

Crea una página: Sobre Nosotros

En la terminal, navega al directorio de site que se puede hacer desde la terminal con un comando como:

 $ cd site

Ahora, sigue adelante e inicialicemos la página Acerca de usando el siguiente comando de Hugo:

 $ hugo new sobre_nosotros.md

Si abres el directorio de hugo en tu administrador de archivos, verás una lista de subdirectorios. Abre site/content/sobre_nosotros.md para ver lo que acabas de crear. Deberías ver algo como esto:

$ +++
date = "2016-09-25T11:45:50-07:00"
draft = true
title = "about"

+++

Coloca algo de contenido en formato Markdown debajo de la parte delantera de toml (la sección marcada por +++ antes y después) y luego guárdalo.

Ahora, agrega una nueva publicación.

Para hacerlo, ingresa lo siguiente:

$ hugo new post/post_de_prueba.md

El nuevo archivo se encuentra en content/post/post_de_prueba.md. Como la plantilla demo viene con un solo post para generar contenido, es solo cuestión de que le des un poco de creatividad al asunto, ¿vale?

+++
date = "2015-09-25T11:49:03-07:00"
draft = true
title = "Post de Prueba"

+++

“esta es una prueba para ver los post”
― Tuataras

* CONSEJO: crea algunas publicaciones como esta para obtener contenido y ver el formato de varios artículos en listas.

Ahora que tienes algo de contenido, es hora de mostrarlo. Para esto Hugo tiene un repositorio lleno de temas que puedes usar

Sin embargo, siempre puedes crear un tema personalizado.

Para los propósitos de este tutorial, usemos el tema Strata.

Encuentra el tema Strata en la biblioteca de temas de Hugo (o puedes hacer clic aquí).

Para evitar dolores de cabeza y facilitar el ajuste del tema, solo vas a descargar el zip, en lugar de clonar el repositorio del tema.

Para hacerlo, haz clic en el botón Clonar o Descargar y luego haz clic en el botón Descargar ZIP en el lado derecho de la página.

En el directorio hugo/site, crea una nueva carpeta llamadathemes. Luego descomprime el archivo Strata/PATH/TO/hugo/site/themes.

Asegúrate de cambiar el nombre de la carpeta hugo-strata-theme-mastera un nombre mas simplehugo-strata-theme.

Configura tu primer tema.

La mayoría de los temas documentan cómo configurarlos en su archivo README.md .

Para el tema Strata, hay 5 cosas principales que debes hacer.

1. Para evitar conflictos con el tema, elimina algunos de los archivos iniciales repetitivos. Elimina todos los archivos del directorio layouts en site/layouts.

Otro archivo conflictivo es src/css/main.css: elimina este archivo también. (Si estás creando tu propio tema, ignora borrar el archivo CSS).

2. Luego debes copiar el contenido del config.toml del archivo de ejemplo ubicado en la carpeta themes/hugo-strata-theme a tu sitio config.toml ubicado en hugo/site.

* NOTA: Asegúrate de actualizar la variable baseurl en el archivo de configuración a una ruta relativa como se muestra a continuación.

baseurl = "/"

Para tu comodidad, aquí está el código de este tema (a partir de la fecha) para reemplazar el contenido de tu index.html ubicado en site/layouts/index.html.

 {{ define "main" }}
  {{ if not .Site.Params.about.hide }}
    {{ partial "about" . }}
  {{ end }}

  {{ if not .Site.Params.portfolio.hide }}
    {{ partial "portfolio" . }}
  {{ end }}

  {{ if not .Site.Params.recentposts.hide }}
    {{ partial "recent-posts" . }}
  {{ end }}

  {{ if not .Site.Params.contact.hide }}
    {{ partial "contact" . }}
  {{ end }}
 {{ end }}

Para incluir tu nueva página Sobre Nosotros en la navegación de este tema, abre el archivo config.toml con Visual Studio Code que editaste anteriormente y actualiza las variables del menú para incluir la página acerca de la siguiente manera:

 [[menu.main]]
  name = "Home"
  url  = "/"
  weight = 0

 [[menu.main]]
  name = "Sobre Nosotros"
  url  = "sobre_nosotros"
  weight = 5

 [[menu.main]]
  name = "Blog"
  url  = "post/"
  weight = 10

Ahora verás el enlace de la página Sobre Nosotros renderizado en la barra de navegación lateral.

Pero, si haces clic en el enlace, arrojará un error que no se puede encontrar la página [acerca]. Esto se debe a que nunca cambiaste el estado de la página de borrador a listo para producción.

Todo lo que tienes que hacer es cambiar el valor de draft de true afalse . Tu archivo sobre_nosotros.md que creaste anteriormente debería verse ahora como: `` `` +++ date = “2016-09-09T10: 15: 23-04: 00” draft = false title = “about” +++

 ## This is our sample Markdown content.
 ```

Prueba tu sitio

Ahora que tienes la configuración de tu sitio, echa un vistazo a lo que tienes. Si aún no la has estado monitoreando en tiempo real, levanta el servicio en la terminal con el comando:

 $ npm start

Voilà! Deberías ver tu página de destino.

Mientras estás asombrado de la creación de tu moderna página de destino, continúa y revisa tus otras nuevas páginas «Sobre Nosotros» y «Blog» también.

Se que serás todo un experto manejando Hugo, pero si todavía tienes dudas acerca de este tutorial, hazmelo saber en los comentarios y con gusto te ayudaré.

Ir al inicio.