Cómo iniciar un blog con Hugo

Un tutorial detallado para comenzar un nuevo blog usando Hugo desde cero hasta la implementación

Hugo es una gran herramienta para iniciar un blog.

Yo mismo utilizo a Hugo en este blog, desde hace más de 2 años. Tengo algunas razones para amar usar a Hugo.

Essencillo,aburrido,flexible,rápido.

La principal razón es que essencillo. No hay mucho que tengas que aprender para empezar.

Escribes contenido en Markdown, un formato que me permite usar mi editor favorito (Bear) para escribir publicaciones.

Hugo esaburrido. No me malinterpretes, esto es algo muy positivo. Como desarrollador, estoy tentado a modificar cosas aquí y allá todo el tiempo. No hay una tecnología sofisticada detrás de Hugo. Está construido con Go, uno de los lenguajes que más amo, pero eso no significa que quiera sumergirme en los aspectos internos de Hugo y cambiar su funcionamiento.

Y no muestra nada interesante o de próxima generación como tienden a hacer muchos marcos de JavaScript.

Por eso es aburrido, lo que me da mucho tiempo para hacer lo que es realmente útil cuando trabajo en un blog:escribir contenido. Me centro en el contenido, no en el contenedor de contenido.

Dicho esto, Hugo es bastante maldito.flexible. Comencé mi propio blog con un tema de código abierto, luego lo cambié por completo con el tiempo. A veces quiero hacer cosas en mi sitio web que están fuera del alcance de un blog simple, y Hugo me permite crear esas cosas.

Finalmente, otra razón por la que amo a Hugo es que esrápido. ¿Por qué? Primero, tiene Go en el núcleo, que se sabe que es un lenguaje muy rápido. Y en el ecosistema Go, no existe el concepto de dependencias de 100 megabytes. Las cosas están hechas para que sean lo más rápido posible. Además, Hugo no necesita hacer algunas de las cosas sofisticadas que se necesitan cuando se usa tecnología sofisticada. Este es un subproducto de ser aburrido.

De todos modos, basta de palabras.

Hugo es asombroso, especialmente si eres un desarrollador y estás dispuesto a escribir en Markdown. Las personas que no son de tecnología pueden simplemente negarse a usar Markdown, y es perfectamente comprensible.

Además, debe estar preparado para un flujo de trabajo centrado en Git para que las cosas realmente encajen.

Lo que debe hacer es escribir una publicación con Markdown, luego confirmar sus cambios en un repositorio de Git, más comúnmente en GitHub, y alguna tecnología de pegamento implementa los cambios en el servidor que aloja el sitio.

Alojamiento de un sitio web de Hugo

Un blog de Hugo es completamenteestático. Esto significa que no necesita alojar su propio servidor ni utilizar un servicio especial para ello.

Las páginas de Netlify, Now y GitHub son 3 lugares excelentes donde puedes alojar un blog de Hugo de forma gratuita.

El único costo es el que tiene que pagar por el nombre de dominio. No puedo enfatizar más la importancia de tener su propio nombre de dominio. No.github.ioo.netlify.como.now.shsitios, por favor.

Mis propios sitios de Hugo están alojados en Netlify.

Elige un dominio

Pon tu blog bajo tu propio dominio. Elegir uno. Usa tu propio nombre. Y use.como.blog. No intente ser inteligente utilizando un dominio localizado, no utilice.io..comsimplemente da una mejor impresión y es reutilizable para todos sus proyectos futuros, no solo para alojar su blog. Elegí eso.

Ah, y si tienes un dominio antiguo por ahí, utilízalo. ¿Por qué? Cuanto más antiguo sea tu dominio, mejor.

Nota sobre los subdominios: cada subdominio, para Google, es un sitio web diferente. Entonces, si su dominio esflaviocopes.comy crea su blog enblog.flaviocopes.com, entonces ese es un sitio web completamente nuevo para Google, y tendrá su propia clasificación separada del dominio principal.

Mi sugerencia es evitar los subdominios por completo.

Instalar Hugo

Para instalar Hugo en macOS, desde su terminal ejecute

brew install hugo

losbrewcomando no existe en tu Mac? Comprobar laGuía de elaboración casera

Para Windows y Linux, marque laguía de instalación oficial.

Crea un sitio Hugo

Una vez que Hugo está instalado, puede crear un sitio Hugo ejecutando

hugo new site myblog

Sugiero ejecutar esto en unwwwcarpeta en su directorio de inicio, porque el comando creará un nuevomyblogcarpeta donde lo ejecuta.

Elige un tema

Ahora, antes de que puedas comenzar, debes elegir un tema. Desearía que Hugo incluyera un tema predeterminado para simplificar las cosas, pero no es así.

Hay muchas opciones enhttps://themes.gohugo.io. Mi recomendación personal es comenzar conhttps://themes.gohugo.io/ghostwriter/y retocarlo más tarde.

También recomiendo evitar elgit cloneel flujo de trabajo que sugieren en esa página, porque seguramente ajustará el tema en el futuro, y creo que es mejor tener un único repositorio tanto para el contenido como para el tema. Simplifica la implementación.

Entonces, ve ahttps://github.com/jbub/ghostwriter/archive/master.zippara descargar la versión actual del tema.

Luego, descomprímalo en elthemes/ghostwritercarpeta en su sitio web Hugo recién creado:

Observe que hay unexampleSitecarpeta en elthemes/ghostwriter. Ábrelo y abre sucontentsubcarpeta. Allí, puedes ver elpage,postyprojectsubcarpetas.

Dupdopageyposten elcontentcarpeta del sitio:

La configuración

Los datos de muestra también proporcionan una muestraconfig.tomlpresentar enthemes/ghostwriter/exampleSite/config.toml. Este es el archivo de configuración de Hugo, que le dice a Hugo algunos detalles de la configuración sin tener que codificar información en el tema.

Te recomiendo que no copies eso, porque tiene demasiadas cosas, y en su lugar uses esto:

baseurl = "/"
title = "My blog"
theme = "ghostwriter"

[Params] mainSections = [“post”] intro = true headline = “My headline” description = “My description” github = https://github.com/XXX twitter = https://twitter.com/XXX email = [email protected] opengraph = true shareTwitter = true dateFormat = “Mon, Jan 2, 2006”

[Permalinks] post = “/:filename/”

Puede personalizar libremente la información de este archivo más adelante.

Ahora desde la línea de comando, ejecute:

hugo serve

Abiertohttp://localhost:1313en su navegador, ¡y debería poder ver el sitio en vivo!

Esta es la página de inicio del sitio.

Hay una lista de publicaciones que se toma delcontent/postcarpeta de su sitio web:

Haga clic en el primero, llamado "Crear un tema nuevo":

Puedes abrir el archivocontent/post/creating-a-new-theme.mdpara cambiar algo en la publicación.

Si guarda, el sitio web se actualizará automáticamente con el nuevo contenido.

Esto es bastante asombroso, ¿verdad?

Puede crear una nueva publicación creando una nueva.mdarchivo, prefijándolo con cualquier cosa que desee. Puede utilizar números incrementales, si lo prefiere. O usa una fecha.

Si algo no se ve como usted desea, puede abrir elthemes/ghostwriter/layoutscarpeta y modifíquela.

La plantilla "publicación" se define enthemes/ghostwriter/layouts/post/single.html:

Hugo usa plantillas Go. La sintaxis puede resultar bastante desconocida, pero el sitio web de Hugo hace un muy buen trabajo al explicarlos en esteIr a la introducción de plantillas.

Sin embargo, trate de no pensar en personalizar su plantilla ahora.

Si desea modificar los colores, agregue un<style>etiqueta con algo de CSS en elthemes/ghostwriter/layouts/partials/header.html.

Por ejemplo, haga que los enlaces sean negros:

<style>
.site-title a, .button-square {
    background: black;
}
a {
    color: black;
}
</style>

En cambio, céntrese en el contenido.

Elimine los archivos existentes y escriba 2-3 publicaciones para comenzar.

Es muy fácil quedar atrapado en hacer las cosas perfectamente como quieres, pero lo importante es el contenido.

Y cuanto más limpio esté su sitio, mejor para sus lectores.

Permítanme ahora escribir un poco sobre la implementación.

Implementar el sitio de Hugo en Netlify

Quiero mostrar cómo implementar un sitio de Hugo en 2 de los servicios que más disfruto: Netlify y Now.

Primero, voy a crear un repositorio de GitHub para alojar el sitio.

Abro GitHub Desktop, una aplicación que uso todos los días y es parte de mi flujo de trabajo. Es la forma más sencilla de usar Git.

Desde el menú Archivo, presioné la opción "Nuevo repositorio":

La misma pantalla se puede generar simplemente arrastrando elmyblogcarpeta en la aplicación.

Le di elmyblogname al repositorio y eligió la ruta correcta para el repositorio.

El proceso realiza automáticamente la primera confirmación:

Ahora podemos hacer clic en el botón "Publicar repositorio" para enviar el repositorio a GitHub:

Puede mantener el repositorio privado, por supuesto.

Una vez que el repositorio está en GitHub:

podemos pasar a Netlify.

Desde mi panel de Netlify presioné el botón "Nuevo sitio desde Git":

Presioné GitHub, autoricé a Netlify para acceder a mis repositorios privados, luego elegí el repositorio que acabo de crear:

Netlify lo identificó automáticamente como un repositorio de Hugo e ingresó el comando de compilación automáticamente:

Al hacer clic en "Implementar sitio" se inicia el proceso de implementación:

En un sitio real, configuraría un dominio personalizado. Netlify tiene la opción de comprar un dominio a través de ellos, y es un proceso muy (MUY) sencillo. Lo recomiendo altamente. El sitio puede estar activo en solo unos minutos desde la compra del dominio.

Cualquiera.netlify.comel subdominio está adjunto al sitio, en este casopedantic-engelbart-500c9a.netlify.comy HTTPS se habilita automáticamente.

Por lo tanto, podemos ver inmediatamente el sitio en vivo:

Ahora, si intenta editar algo en su versión local, simplemente envíe los cambios a GitHub y Netlify actualizará automáticamente el sitio. Puede verlo construyendo el sitio en el panel "Descripción general" del sitio:

Para saber más sobre Netlify, le recomiendo que consulte miTutorial de Netlify.

Implementar el sitio de Hugo en Zeit Now

Zeit ahora se llamaVercel, y este tutorial puede estar desactualizado

Otra plataforma increíble que puedes usar para tu blog de Hugo es Zeit Now.

Una vez que te registras, desde el panel de control presionas elNuevo proyectobotón.

La primera vez que implementa desde GitHub, primero debe instalar la aplicación GitHub haciendo clic en "Instalar ahora para GitHub":

Esto lo lleva a la página de GitHub de la aplicación, donde puede autorizarla para todos sus repositorios, o solo para algunos:

Una vez que regrese, haga clic en el botón "Nuevo proyecto de GitHub":

Seleccione el proyecto y haga clic en "Importar":

Mientras tanto, vaya a la carpeta principal demysitey agrega unpackage.jsonarchivo con este contenido:

{
  "scripts": {
    "build": "hugo"
  }
}

Esto le dice a Now cómo implementar el sitio.

Cuando regrese al panel, la nueva implementación debería comenzar pronto y verá el sitio funcionando en vivo:

Tenga en cuenta que en Now tiene 3 URL que puede usar para acceder al sitio:

  • myblog.flaviocopes.now.sh
  • myblog-alpha-swart.now.sh
  • myblog-git-master.flaviocopes.now.sh

Puedes elegir el que prefieras.

Además, cada implementación también tiene su propia URL. En este caso tuvemyblog-h8xks5jhn.now.shpero cambia con cada implementación.

Y, por supuesto, también puede agregar su dominio. Zeit tiene un gran servicio para comprar su dominio directamente de ellos, disponible enhttps://zeit.co/domains.

Y si prefiere trabajar con la línea de comando, elnowEl comando también le permite comprar dominios desde allí.

Te recomiendo encarecidamente que revises miTutorial de Zeit Now.


Más tutoriales de laboratorio: