Cómo crear tu primer blog de Hugo: una guía práctica

Hugo es una gran herramienta para usar si desea iniciar un blog.

Yo mismo uso Hugo para mi blog, flaviocopes.com, y lo he estado usando durante más de dos años. Tengo algunas razones para amar a Hugo.

Primero que nada, es simple , aburrido , flexible y rápido .

La principal razón es que es simple . No tienes mucho que aprender para empezar.

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

Hugo es aburrido . No me malinterpretes, esto es algo muy positivo. Como desarrollador, estoy tentado a modificar cosas aquí y allá todo el tiempo. No hay 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 suelen hacer muchos marcos de JavaScript.

De ahí que sea 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 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 es rá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 ser 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.

Este es el proceso para escribir un blog:

  • escribir una publicación usando Markdown,
  • luego envíe sus cambios a un repositorio de Git, más comúnmente en GitHub,
  • y luego 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 completamente está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 tres lugares excelentes donde puede 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 lo suficiente 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 usa .como .blog. No intente ser inteligente al utilizar un dominio localizado; por ejemplo, no utilice .io. .comsimplemente da una mejor impresión y es reutilizable para todos sus proyectos futuros, no solo para alojar su blog. Elegí ese.

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 lo es flaviocopes.com, y crea su blog en blog.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 

¿El brewcomando no existe en tu Mac? Consulta la guía Homebrew .

Para Windows y Linux, consulte la guí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 

Le sugiero que ejecute esto en una wwwcarpeta en su directorio de inicio, porque el comando creará una nueva myblogcarpeta donde lo ejecutará.

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 en //themes.gohugo.io. Mi recomendación personal es comenzar con //themes.gohugo.io/ghostwriter/ y modificarlo más tarde.

También te recomiendo que evites el git cloneflujo de trabajo que sugieren en esa página. Seguramente modificará el tema en el futuro, y creo que es mejor tener un repositorio único tanto para el contenido como para el tema. Simplifica la implementación.

Entonces, vaya a //github.com/jbub/ghostwriter/archive/master.zip para descargar la versión actual del tema.

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

Observe que hay una exampleSitecarpeta en el themes/ghostwriter. Ábralo y abra su contentsubcarpeta. Allí, puede ver las subcarpetas page, posty project.

Copia pagey posten la contentcarpeta del sitio:

La configuración

Los datos de muestra también proporcionan un config.tomlarchivo de muestra en formato themes/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 que tenga que codificar información en el tema.

Le recomiendo que no copie eso, porque tiene demasiadas cosas, y en su lugar use esto:

baseurl = "/" title = "My blog" theme = "ghostwriter" [Params] mainSections = ["post"] intro = true headline = "My headline" description = "My description" github = "//github.com/XXX" twitter = "//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 

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

Esta es la página de inicio del sitio.

There is a list of posts that is taken from the content/post folder of your website:

Click the first, called “Creating a New Theme”:

You can open the file content/post/creating-a-new-theme.md to change anything in the post.

If you save, the website will automatically update with the new content.

This is pretty awesome, right?

You can create a new post by creating a new .md file, prefixing it with anything you want. You can use incremental numbers, if you prefer. Or use a date.

If something doesn't look the way you want, you can open the themes/ghostwriter/layouts folder and tweak it.

The “post” template is defined in themes/ghostwriter/layouts/post/single.html:

Hugo uses Go templates. The syntax can be pretty unfamiliar but the Hugo website does a very good job at explaining them in this Go templates introduction.

However, try to not look at customizing your template now.

If you want to tweak the colors, add a tag with some CSS in the themes/ghostwriter/layouts/partials/header.html.

For example, make links black:

 .site-title a, .button-square { background: black; } a { color: black; }  

Focus on the content instead.

Remove the existing files, and write 2-3 posts to start with.

It’s too easy to get trapped in making things perfectly the way you want, but the important thing is the content.

And the cleaner your site is, the better for your readers.

Let me now write a little about deployment.

Deploy the Hugo site to Netlify

I want to showcase how to deploy a Hugo site in 2 of the services I enjoy the most: Netlify and Now.

First, I’m going to create a GitHub repository to host the site.

I open GitHub Desktop, an app I use every day and that is part of my workflow. It’s the simplest way to use Git.

From the File menu, I pressed the “New Repository” option:

The same screen can be generated by simply dragging the myblog folder into the app.

I gave the myblog name to the repository, and picked the correct path for the repo.

The process automatically makes the first commit:

Now we can click the “Publish repository” button to push the repo to GitHub:

You can keep the repo private, of course.

Once the repo is in GitHub:

we can move to Netlify.

From my Netlify dashboard I pressed the “New site from Git” button:

I pressed GitHub, authorized Netlify to access my private repositories, then I picked the repo I just created:

Netlify automatically identified it as a Hugo repo, and entered the build command automatically:

Clicking “Deploy site” starts the deploy process:

On a real site, I would set up a custom domain. Netlify has the option to purchase a domain through them, and it’s a very (VERY) straightforward process. I highly recommend it. The site can be live in just a few minutes after purchasing the domain.

A random .netlify.com subdomain is attached to the site, in this case pedantic-engelbart-500c9a.netlify.com, and HTTPS is automatically enabled.

We can therefore immediately see the site live:

Now if you try to edit something in your local version, you just push the changes to GitHub, and Netlify will automatically update the site. You can see it building the site in the “Overview” panel of the site:

To learn more about Netlify I recommend that you check out my Netlify tutorial.

Deploy the Hugo site to Zeit Now

Another awesome platform you can use for your Hugo blog is Zeit Now.

Once you sign up, from the dashboard you press the New Project button.

The first time you deploy from GitHub you have to first install the GitHub app by clicking “Install Now For GitHub”:

This brings you to the GitHub page for the app, where you can authorize it for all your repos, or just for some:

Once you get back, click the “New Project From GitHub” button:

Select the project and click “Import”:

In the meantime, go into the main folder of mysite and add a package.json file with this content:

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

This tells Now how to deploy the site.

When you get back to the dashboard, the new deploy should start soon, and you will see the site working live:

Note that in Now you have three URLs you can use to access the site:

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

You can choose the one you prefer.

Plus, each deployment has its own URL, too. In this case I had myblog-h8xks5jhn.now.sh but it changes with every deployment.

And of course you can add your domain, too. Zeit has a great service to purchase your domain directly from them, available at //zeit.co/domains.

And if you prefer working with the command line, the now command lets you purchase domains from there, as well.

I highly recommend that you check out my Zeit Now tutorial to learn more about this platform.

Wrapping up

I hope this tutorial can give you a little guidance if you are planning to start a new blog. Hugo is my favorite platform, but it's not unique of course. Ghost (the platform powering freeCodeCamp) is great too, along with WordPress of course, and Gatsby.

Pick your favorite. In my opinion the platform does not matter as much as your content does. So, choose one and start writing!