Breaking

Post Top Ad

Your Ad Spot

viernes, 10 de enero de 2020

Cómo comenzar un blog usando Hugo

Hugo es una gran herramienta para comenzar un blog.
Yo mismo uso a Hugo en este blog, desde hace más de 2 años. Tengo algunas razones para amar el uso de Hugo.
Es simple , aburrido , flexible , rápido .
La razón principal es que es simple . No hay mucho que aprender para comenzar.
Escribes contenido en Markdown, un formato que me permite usar mi editor favorito (Bear) para escribir publicaciones.
Hugo es aburrido . No me malinterpreten, esto es algo muy positivo. Como desarrollador, estoy tentado a modificar las cosas aquí y allá todo el tiempo. No hay tecnología sofisticada subyacente a Hugo. Está construido con Go, uno de los idiomas que más amo, pero eso no significa que quiera sumergirme en lo interno de Hugo y cambiar cómo funciona.
Y no muestra nada interesante o de próxima generación, como suelen hacer muchos frameworks de JavaScript.
Por lo tanto, es aburrido, lo que me da mucho tiempo para hacer lo que es realmente útil cuando trabajo en un blog: escribir contenido . Me concentro 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 hay un 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 al usar tecnología sofisticada. Este es un subproducto de ser aburrido.
De todos modos, basta de palabras.
Hugo es increíble, especialmente si eres un desarrollador y estás dispuesto a escribir en Markdown. Las personas no tecnológicas 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 hagan clic.
Lo que debe hacer es escribir una publicación con Markdown, luego confirmar los 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.

Hospedar un sitio web de Hugo

Un blog de Hugo es completamente estático . Esto significa que no necesita alojar su propio servidor o utilizar un servicio especial para ello.
Netlify, Now y GitHub Pages son 3 excelentes lugares donde puedes alojar un blog de Hugo de forma gratuita.
El único costo es el que debe pagar por el nombre de dominio. No puedo enfatizar más la importancia de tener su propio nombre de dominio. No .github.io.netlify.com.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 .com.blogNo intentes ser inteligente usando un dominio localizado, no lo uses .io.comsolo 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í, solo úsalo. ¿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 es flaviocopes.comy crea su blog 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
Sugiero ejecutar esto en una wwwcarpeta en su directorio de Inicio, porque el comando creará una nueva myblogcarpeta donde lo ejecute.

Elige un tema

Ahora, antes de que pueda comenzar, debe elegir un tema. Desearía que Hugo incluyera un tema predeterminado para hacer las cosas sencillas, pero no es así.
Hay muchas opciones en https://themes.gohugo.io . Mi recomendación personal es comenzar con https://themes.gohugo.io/ghostwriter/ y modificarlo más tarde.
También recomiendo evitar el git cloneflujo 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 para el contenido y el tema. Simplifica la implementación.
Entonces, vaya a https://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 Hugo recién creado:
Observe que hay una exampleSitecarpeta en el themes/ghostwriterÁbralo y abra su contentsubcarpeta. Allí, se puede ver pagepostprojectsubcarpetas.
Copia pageposten la contentcarpeta del sitio:

La configuración

Los datos de muestra también proporcionan un config.tomlarchivo de muestra en themes/ghostwriter/exampleSite/config.tomlEste 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 = "https://github.com/XXX"
    twitter = "https://twitter.com/XXX"
    email = "XXX@example.com"
    opengraph = true
    shareTwitter = true
    dateFormat = "Mon, Jan 2, 2006"

[Permalinks]
    post = "/:filename/"
Puede personalizar libremente la información en este archivo, más adelante.
Ahora desde la línea de comando, ejecute:
hugo serve
¡Abre http://localhost:1313en tu navegador y deberías poder ver el sitio en vivo!
Esta es la página de inicio del sitio.
Hay una lista de publicaciones tomadas de la content/postcarpeta de su sitio web:
Haga clic en el primero, llamado "Crear un nuevo tema":
Puede abrir el archivo content/post/creating-a-new-theme.mdpara cambiar cualquier cosa 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 un nuevo .mdarchivo, con el prefijo que desee. Puede usar números incrementales, si lo prefiere. O usa una cita.
Si algo no tiene el aspecto que desea, puede abrir la themes/ghostwriter/layoutscarpeta y modificarla.
La plantilla de "publicación" se define en themes/ghostwriter/layouts/post/single.html:
Hugo usa las plantillas Go. La sintaxis puede ser bastante desconocida, pero el sitio web de Hugo hace un muy buen trabajo al explicarlos en esta introducción de plantillas Go .
Sin embargo, intente no buscar personalizar su plantilla ahora.
Si desea modificar los colores, agregue una <style>etiqueta con algo de CSS en el themes/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>
Centrarse en el contenido en su lugar.
Elimine los archivos existentes y escriba 2-3 publicaciones para comenzar.
Es demasiado fácil quedar atrapado en hacer las cosas perfectamente como quieres, pero lo importante es el contenido.
Y cuanto más limpio sea su sitio, mejor para sus lectores.
Permítanme ahora escribir un poco sobre el despliegue.

Implemente 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":
Se puede generar la misma pantalla simplemente arrastrando la myblogcarpeta a la aplicación.
Le di el myblognombre al repositorio y elegí 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 de 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" comienza 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.
Se .netlify.comadjunta un subdominio aleatorio al sitio, en este caso pedantic-engelbart-500c9a.netlify.com, y HTTPS se habilita automáticamente.
Por lo tanto, podemos ver de inmediato el sitio en vivo:
Ahora, si intentas editar algo en tu versión local, solo empujas los cambios a GitHub, y Netlify actualizará automáticamente el sitio. Puede verlo creando el sitio en el panel "Descripción general" del sitio:
Para saber más sobre Netlify, le recomiendo que consulte mi tutorial de Netlify .

Implemente el sitio de Hugo en Zeit Now

Otra plataforma increíble que puedes usar para tu blog de Hugo es Zeit Now.
Una vez que se registra, desde el panel de control, presiona el botón Nuevo proyecto .
La primera vez que implemente 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 para 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 de mysitey agregue un package.jsonarchivo con este contenido:
{
  "scripts": {
    "build": "hugo"
  }
}
Esto le dice a Now cómo implementar el sitio.
Cuando regrese al tablero, la nueva implementación debería comenzar pronto, y verá que el sitio funciona en vivo:
Tenga en cuenta que en Ahora 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 tuve myblog-h8xks5jhn.now.shpero cambia con cada implementación.
Y, por supuesto, también puede agregar su dominio. Zeit tiene un excelente servicio para comprar su dominio directamente de ellos, disponible en https://zeit.co/domains .
Y si prefiere trabajar con la línea de comando, el nowcomando también le permite comprar dominios desde allí.
Le recomiendo que consulte mi tutorial de Zeit Now .

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas