23

¡Aprende a usar Hugo! El Framework para crear tu blog de forma rápida y sencilla

45018Puntos

hace 5 años

Este es el primer blog de una serie que estaré publicando acá en Platzi referente a Go (Golang), siendo un lenguaje muy potente, con varias aplicaciones y sobre todo por su concurrencia para algoritmos pesados.

¿Qué es Hugo?

Hugo es un generador de archivos Web estáticos escrito en Go y aunque hay otras herramientas con esta misma utilidad, con Hugo encontrarás muchos temas desarrollados por la comunidad, es fácil de configurar y los artículos que escribas son fácilmente exportables de un tema a otro.

Cuando digo tema me refiero al FrontEnd del blog y los puedes encontrar entrando a https://themes.gohugo.io/ los cuales están categorizados en su mayoría son Responsive y algunos ya cuentan con integración a Google Analytics y Disqus el cual es un gestor de comentarios incrustados directamente en el FrontEnd.

Para usar Hugo fluidamente te recomiendo tomar el curso de terminal (porque Hugo es un programa por terminal), Curso de Git y GitHub (para el versionado de código y obtener temas) y el curso Desarrollo Web Online (en caso que quieras darle ciertos toques personales o bien diseñar tu propio tema).

Ventajas:

  • Crearás un sitio Web sin programar FrontEnd pero con la posibilidad de personalizar su código.
  • En caso que quieras cambiar tu FrontEnd, tus artículos escritos hasta el momento son fácilmente exportables.
  • Los artículos los creas en formato Markdown, que es el mismo formato que usas para crear Blogs y Tutoriales en Platzi.
  • No requieres invertir en Hosting ya que puedes usar plataformas de Archivos estáticos Web como Now.sh, Surge o inclusive GitHub Pages.
  • Puedes integrar Google Analitics y Disqus para analizar el tráfico como también manejar comentarios desde el FrontEnd.

Desventajas:

  • Solo obtendrás archivos Web estáticos, es decir, no tendrás BackEnd para el manejo de bases de datos.
  • Para sacarle el máximo provecho es bueno que aprendas lo básico de Go, Git, FrontEnd y Markdown.
  • Algunos temas requieren ajustes adicionales para que se adapte a tus necesidades.

Instalación de Hugo

Para este blog estaré utilizando Ubuntu Bash siendo un subsistema de Ubuntu conviviendo en Windows 10, otras alternativas que te propongo es utilizar Linux o bien VirtualBox. También te recomendaría tomar el curso de Go ya que allí se indica a detalle el proceso de instalación de Go en tu sistema como también el curso de Git y GitHub.

En Ubuntu la instalación es muy sencilla ya que se encuentra en los repositorios oficales, y puedes hacerlo con el comando:

sudo apt-get install hugo

Para tener más detalles y otros métodos de instalación puedes entrar a gohugo.io/getting-started/installing

Crear tu primer sitio Web con Hugo

Crear un sitio Web es muy fácil, para ello solo debes correr en la consola:

hugo new site myFirstWeb

Ello creará la carpeta llamada myFirstWeb que al listar su contenido con ls encontrarás:

  • archetypes
  • config.toml
  • content
  • data
  • layouts
  • static
  • themes

Puedes obtener más información de qué se guarda en cada directorio en gohugo.io/getting-started/directory-structure/. Lo que debes saber en estos momentos es que en config.toml es donde se guarda la información de configuración de tu Web y depende mucho del tema que escogiste, en content se guardan tus blogs y en themes es donde guardarás el tema.

Para comprobar que todo está en orden levantaremos el servicio con:

hugo server
Screenshot_20190429_105957.png

Y al entrar en localhost:1313/ obtendrás una página en blanco, eso significa que el servicio está corriendo sin problemas. EL paso siguiente será instalar un tema y los puedes encontrar entrando a themes.gohugo.io/. Para este ejemplo utilizaré el tema Restaurant Hugo

Screenshot-2019-4-29 Restaurant Hugo.png

En la misma página aparece cómo instalarlo, de igual forma te indico los pasos (teniendo como path la raíz de la página web myFirstWeb):

cd themes
git clonehttps://github.com/themefisher/restaurant-hugo.git

La gran mayoría de los temas tienen una web de ejemplo, es muy útil para conocer las configuraciones básicas y a partir de allí personalizarlo. Para este tema en particular está en la ruta restaurant-hugo/exampleSite/

Al levantar de nuevo el servicio con hugo server podemos ver la página funcionando:

Screenshot-2019-4-29 Restaurant Theme By Themefisher.jpg

La personalización la encontrarás en el archivo config.toml.

Para crear un blog ingresa el siguiente comando en la terminal:

hugo new posts/firstPost.md

Y luego abres dicho archivo con tu editor favorito, en mi caso es VIM.

vim content/posts/firstPost.md
Screenshot_20190429_111823.png

Sin embargo, desde la consola recibiremos un pequeño mensaje de error debido a que la sintaxis no está ajustada al tema. Podemos tomar como ejemplo otro blog del tema con vim content/posts/my-first-post.md y sirva como una guía para ver la estructura correcta.

Screenshot_20190429_111920.png

Quedando de la siguiente manera:

Screenshot_20190429_112524.png

Al actualizar la página lo podrás visualizar:

Screenshot-2019-4-29 Restaurant Theme By Themefisher.png

Para este tema en particular, es necesario que cada blog tenga una imagen asignada.

¡Felicitaciones! A partir de este momento ya cuentas con los conocimientos básicos para crear tus propios sitios Web con Hugo.

Notas finales

Como notarás es muy sencillo crear un blog utilizando la sintaxis Markdown y más sencillo cambiar los temas de tus páginas Web sin la necesidad de realizar modificaciones en tus contenidos, donde cada tema tiene sus propias licencias.

Tip final Si te dedicas al FrontEnd puedes crear tus propios temas y dar a conocer tu talento en la comunidad.

Este es el comienzo de una serie de tutoriales respecto al uso de Go (Golang), déjame en los comentarios las dudas que tengas de Hugo o qué más te gustaría aprender de Go para siguientes artículos.

¡Hasta la próxima!

Osmandi
Osmandi
osmandi

45018Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
44911Puntos

Estaría impresionante un tutorial de como adaptar Hugo a una web estática ya desarrollada previamente

2
45018Puntos
5 años

Cuéntame, ¿a qué ajustes te refieres? Quizás sea un buen tema para un siguiente tutorial. :smi

3
6990Puntos

Genial, estaba justo buscando alguna alternativa a los CMS tradicionales como WordPress.

1
45018Puntos
5 años

Cuéntame qué tal te pareció Hugo 😃

2
9347Puntos

Interesante Herramienta

1

Hey Osmandi!! Saludos!! Me parece muy buen post, además dominas el tema … felicitaciones!!! Quizas suene a despistado, mas, si quiero a prender a desarrollar en GO, con qué debería empezar,? alguna pagina en especifico, O algo que ya hayas posteado. Por favor Saludos y Gracias!

1
45018Puntos
5 años

Hey Miguel, muchas gracias por tus palabras.

Pues es una excelente idea para un siguiente Blog. Recuerda que en Platzi también tenemos un curso de Go.

1

Suena excelente!
Podrían hacer un curso acerca de esto?

1
45018Puntos
5 años

Hey Jhon,

Cuéntame, ¿qué otros temas te gustaría aprender de Golang?

1
9485Puntos

¿Quiere decir que se viene renovación de la carrera de Go?

1
45018Puntos
5 años

Cuéntame, ¿qué te gustaría aprender de Go? :smi

0
9485Puntos
5 años

Me gustaría un curso de Fundamentos de Go, y alguno/s de frameworks para web, así como se tiene de Laravel, Express, etc.

1
45018Puntos
5 años

En Golang existen varios Frameworks, ¿hay uno en particular que te llame la atención?

1
67978Puntos

Me encanta HUGO, pero lo que no me gusta es que no puede trabajar junto con apache, ya que por ejemplo tengo varias paginas con apache y otras con hugo, pero no puedo colocar hugo atravez de apache, es lo uni que no me gusta, lo demas esta muy cool

1
1743Puntos

Hola y se podrá hacer algo para agregar un carrito de compra en hugo?

0

Yo tengo mi blog personal con Hugo y está muy bonita y simple la estructura. ¿Para cuando un curso de Hugo? Para profundizar más sobre el tema y no sólo hacer fork a otros temas, sino crear una propio.

De igual forma leeré documentación y poco a poco iré modificando para hacer mi tema propio, pero la idea está genial para que otras personas también aprendan hacer su tema. Ya que no es mucho el Código que se tiene que generar y sirve para mantener una página personal.