Cómo crear un sitio web con Go Hugo

Go Hugo es el framework más rápido del mundo para crear sitios web, aquí te enseñaré como tú puedes hacerlo.

A continuación te contaré de mi experiencia realizando un sitio web con GoHugo mientras te explico como puedes hacerlo paso a paso.

1.- Instalación de GoHugo

Primero necesitamos instalar Hugo, esto dependerá del sistema operativo que estés manejando, para ello te dejaré el link a la documentación para instalarlo. → Install Hugo

En mi caso tengo Windows y uso Chocolatey para la administración de paquetes así que usaré este comando en la PowerShell para la instalación de Hugo:

choco install hugo -confirm

Para confirmar que se instaló correctamente escribimos el siguiente comando y presionamos enter para ejecutarlo:

hugo version

Nos deberá aparecer lo siguiente, esto significa que se instaló correctamente.

2.- Creación del static website

Ahora que verificamos que instalamos correctamente Hugo, crearemos el sitio, para ello nos ubicaremos en la carpeta que vamos a querer que se cree nuestro proyecto y desde esta dirección que escogimos ejecutaremos nuestra terminal. En mi caso yo escogí esta ubicación:

Escribimos el siguiente comando y presionamos enter para ejecutarlo:

hugo new site my_webSite

Nos deberá aparecer la siguiente carpeta creada en la dirección que abrimos la terminal. Yo escogí como nombre del proyecto my_webSite, pero tú puedes escoger el que desees.

La carpeta creada contendrá los siguientes archivos necesarios para el proyecto.

Crea un repositorio de GitHub para el proyecto

Para hacer esto, primero tenemos que inicializar git.

Abre la terminal en la carpeta de tu proyecto y ejecuta el siguiente comando, nos deberá aparecer lo siguiente:

git init

Crea un repo en GitHub con el nombre que tú quieras, en mi caso escogí “my_webSite”

Obtenemos la liga de nuestro repositorio, la pegamos en la terminal y ejecutamos el comando. OJO la terminal debe estar apuntando a la carpeta del proyecto.

Ahora ya tenemos enlazado nuestro repo local de git con el repo remoto de GitHub.

Ejecutamos los siguientes comando en la terminal Uno por uno.

Para ver los cambios:

git status -s

Para mandar los cambios a stage área usamos el comando:

git add .

Confirmamos los cambios:

git commit -m "first commit"

Hacemos un push para enlazar los cambios a nuestro repositorio remoto de GitHub:

git push origin master

Si no te funcionó este último comando posiblemente sea porque tienes como rama principal ‘main’, en vez de ‘master’, en GitHub modifica tu rama predeterminada.

Al final de ejecutar estos comandos tu terminal se debería ver así:

Y nuestro repositorio de GitHub debería verse algo así:

Nota: Las demás carpetas no se subieron porque están vacías por el momento.

3.- Dale estilo a tu website

Ahora le daremos estilo a nuestro proyecto, esto será una plantilla de diseño predeterminada la cual podemos escoger dando click aquí ⇾ Hugo Themes

Nos llevará a la siguiente página:

Escogemos el que más nos guste, en mi caso escogí este, importante ver que se nos proporciona con licencia MIT, esto para poder modificarlo libremente

Damos click en Descargar y nos llevará a su repo de GitHub.

Realizamos un Fork para poder modificar el diseño.

Ahora ya tenemos una copia del proyecto para poder modificarlo libremente.

Obtenemos este link del repo que acabas de crear. Para ello damos click en code y guardamos esa ruta.

Ahora nos posicionamos en la carpeta de nuestro proyecto

Abrimos la terminal desde esta dirección y ejecutamos este comando. Quita las comillas y pon la ruta que guardaste.

git submodule add 'tu ruta que guardaste aqui va' themes/minimal

Después de ejecutar el comando obtendremos el contenido del repo que hicimos fork, lo tendremos como theme de nuestro proyecto

Abrimos VScode y copiamos esto en el archivo config.toml, esto es lo que viene por defecto en el sitio que se nos da de ejemplo.

baseURL = "http://example.com/"
languageCode = "en-us"
title = "Minimal"
theme = "minimal"
disqusShortname = "username" # delete this to disable disqus comments
googleAnalytics = ""

[params]
    author = "Calin Tataru"
    description = "Personal blog theme powered by Hugo"
    githubUsername = "#"
    accent = "red"
    showBorder = true
    backgroundColor = "white"
    font = "Raleway" # should match the name on Google Fonts!
    highlight = true
    highlightStyle = "default"
    highlightLanguages = ["go", "haskell", "kotlin", "scala", "swift"]

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

[[menu.main]]
    url = "/about/"
    name = "About"
    weight = 2

[[menu.main]]
    url = "/post/"
    name = "Posts"
    weight = 3

[[menu.main]]
    url = "/project/"
    name = "Projects"
    weight = 4

# Social icons to be shown on the right-hand side of the navigation bar.
# The "name" field should match the name of the icon in Font Awesome.
# The list of available icons can be found at http://fontawesome.io/icons.

[[menu.icon]]
    url = "mailto:me@example.com"
    name = "fas fa-envelope"
    weight = 1

[[menu.icon]]
    url = "https://github.com/username/"
    name = "fab fa-github"
    weight = 2

[[menu.icon]]
    url = "https://twitter.com/username/"
    name = "fab fa-twitter"
    weight = 3

[[menu.icon]]
    url = "https://www.linkedin.com/in/username/"
    name = "fab fa-linkedin"
    weight = 4

[[menu.icon]]
    url = "https://www.stackoverflow.com/username/"
    name = "fab fa-stack-overflow"
    weight = 5

Eliminamos la carpeta content del directorio raíz y pegamos la carpeta content que se encuentra en themes/minimal/exampleSite

Abrimos la terminal y ejecutamos el siguiente comando:

hugo server

Esperamos a que esté listo… Y abrimos en el navegador la dirección que nos da, en mi caso localhost

¡¡Listo!! ya poder observar nuestro webSite

Puedes modificar lo que tú quieras.

Para detener el servidor ⇾ Ctrl + C

Para volverlo a iniciar ejecuta en la terminal

hugo server

Por ejemplo para modificar el color nos dirigimos al archivo config.toml y cambiamos “red” por el que queramos, yo quiero azul entonces escribo “blue”.

4.- Crea contenido

Puedes hacer los cambios que quieras dentro de tu sitio web, por ejemplo te enseñaré a crear un post en tu sitio.

Primero debes crear un archivo.md con el nombre que quieras dentro de la carpeta content/post/, yo le pondre el nombre de gatitos.md y pon el siguiente contenido

---
title: "Gatitos"
date: 2022-04-26
tags: ["Beaty", "Animals"] 
draft: false
---

## Los gatitos

No cabe duda que los gatos son una excelente compañía. Son perfectos cómplices para las personas que buscan un compañero con quien descansar, que le guste pasar momentos tranquilos y sobretodo aquel que busca un amigo fiel. Muchos artistas afirman que son la mejor compañía y, a veces, una gran inspiración.

Recurda iniciar tu servido o si ya lo tienes iniciados solo guarda los cambios en VsCode Listo! Ya tienes tu primer post.

4.- Construye tu webSite

Muy bien, ahora tenemos nuestro sitio web al que le añadimos un tema, un post y lo configuramos…

Pero esto lo hicimos localmente, y esto es lo que hace Hugo, nos ayuda a construir un webSite de manera sencilla. Para construir nuestro proyecto ejecutaremos el siguiente comando en nuestra terminal.

hugo -D

Este comando nos generará una carpeta public que solo contendrá archivos de tipo, html, css y js.

Todo lo que hicimos anteriormente se resume en esta carpeta, la cual podemos subir a algún servidor o usar GitHub Pages.

Pero esto lo veremos próximamente…

No olvides subir tus cambios a GitHub 👾

Deseando que te encuentres bien, te saluda Ulises🤵… Sigueme en mis redes GitHub Linkedin Twitter