Cómo crear un blog con Markdown

Aprende a crear un blog usando Markdown con generadores de sitios estáticos como Jekyll, Hugo o Next.js

Markdown es una excelente opción para escribir los contenidos de un blog. Existen varios generadores de sitios estáticos que convierten archivos Markdown en páginas web completas, listas para publicar.

¿Por qué usar Markdown para un blog?

Estas son las principales ventajas de usar Markdown para un blog:

  • Simplicidad: Escribir en Markdown es más rápido que usar un editor visual.
  • Portabilidad: Tus artículos son archivos de texto que puedes mover a cualquier plataforma.
  • Control de versiones: Puedes usar Git para gestionar los cambios de tu blog.
  • Rendimiento: Los sitios estáticos son extremadamente rápidos.
  • Sin base de datos: No necesitas servidor ni base de datos.

Opciones para crear un blog

Jekyll

Jekyll es el generador de sitios estaticos mas veterano. Se integra nativamente con GitHub Pages, lo que significa que puedes publicar tu blog gratis con solo hacer push a un repositorio.

Instalar y crear un blog con Jekyll

Necesitas tener Ruby instalado en tu sistema. Despues, ejecuta estos comandos:

gem install bundler jekyll
jekyll new mi-blog
cd mi-blog
bundle exec jekyll serve

Esto crea un proyecto completo y levanta un servidor local en http://localhost:4000. Ya puedes ver tu blog funcionando.

Front matter en Jekyll

Cada articulo es un archivo Markdown dentro de la carpeta _posts/ con un nombre que sigue el formato YYYY-MM-DD-titulo.md:

---
layout: post
title: "Mi primer artículo"
date: 2024-01-15
categories: tutorial
---

Contenido del artículo en **Markdown**.

El front matter (lo que esta entre los ---) le dice a Jekyll como procesar el archivo: que layout usar, la fecha de publicacion y las categorias para organizar el contenido.

Hugo

Hugo destaca por su velocidad de compilacion. Mientras Jekyll puede tardar segundos en compilar un sitio grande, Hugo lo hace en milisegundos. Es ideal para blogs con cientos o miles de articulos.

Instalar y crear un blog con Hugo

Primero instala Hugo siguiendo las instrucciones de gohugo.io. Despues ejecuta:

hugo new site mi-blog
cd mi-blog
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

Con estos comandos creas el sitio, inicializas Git, instalas el tema Ananke (uno de los mas populares) y levantas el servidor de desarrollo en http://localhost:1313.

Front matter en Hugo

Para crear un nuevo articulo en Hugo, usa el comando hugo new posts/mi-articulo.md y edita el archivo generado:

---
title: "Mi primer artículo"
date: 2024-01-15
draft: false
tags: ["tutorial", "markdown"]
---

Contenido del artículo en **Markdown**.

El campo draft: false es importante: si lo dejas en true, el articulo no aparecera en el sitio publicado (aunque si en el servidor de desarrollo con la flag --buildDrafts).

Next.js

Next.js permite crear blogs con MDX, combinando Markdown con componentes React.

Gatsby

Gatsby es otra opción basada en React con un rico ecosistema de plugins para blogs.

Ghost

Ghost es un CMS que soporta Markdown de forma nativa y ofrece una interfaz de administración completa.

Pasos para crear un blog

Sigue estos pasos para crear tu blog con Markdown:

  1. Elige una herramienta: Selecciona el generador que mejor se adapte a tus necesidades.
  2. Configura el proyecto: Inicializa el proyecto con la herramienta elegida.
  3. Elige un tema: La mayoría de generadores ofrecen temas gratuitos.
  4. Escribe tu primer artículo: Crea un archivo Markdown con front matter.
  5. Publica: Despliega en GitHub Pages, Vercel, Netlify u otro servicio.

Estructura de archivos

Entender la estructura de archivos te ayuda a saber donde va cada cosa. Aqui tienes la estructura tipica de un blog con Jekyll y con Hugo.

Estructura de Jekyll

mi-blog/
├── _config.yml          # Configuracion del sitio
├── _posts/              # Tus articulos en Markdown
│   ├── 2024-01-15-mi-primer-post.md
│   └── 2024-02-01-segundo-post.md
├── _layouts/            # Plantillas HTML
│   ├── default.html
│   └── post.html
├── _includes/           # Fragmentos reutilizables
│   ├── header.html
│   └── footer.html
├── _sass/               # Archivos de estilos
├── assets/              # Imagenes, CSS, JavaScript
├── index.md             # Pagina principal
├── about.md             # Pagina "Sobre mi"
├── Gemfile              # Dependencias de Ruby
└── _site/               # Sitio generado (no editar)

Estructura de Hugo

mi-blog/
├── hugo.toml            # Configuracion del sitio
├── content/             # Tu contenido en Markdown
│   └── posts/
│       ├── mi-primer-post.md
│       └── segundo-post.md
├── layouts/             # Plantillas personalizadas
├── static/              # Archivos estaticos (imagenes, etc.)
├── themes/              # Temas instalados
│   └── ananke/
├── archetypes/          # Plantillas para nuevo contenido
│   └── default.md
├── data/                # Datos estructurados (JSON, YAML)
└── public/              # Sitio generado (no editar)

Personalizar el diseno

La mayoria de generadores de sitios estaticos usan un sistema de temas que define la apariencia visual del blog. No necesitas disenar desde cero.

Elegir un tema

Cada generador tiene su directorio de temas:

Personalizar colores y tipografia

Una vez instalado el tema, puedes ajustar los estilos sin modificar el tema directamente. En Jekyll, edita los archivos dentro de _sass/. En Hugo, crea archivos en assets/css/ que sobreescriban los estilos del tema. Esto te permite actualizar el tema sin perder tus personalizaciones.

Plantillas y layouts

Los layouts definen la estructura HTML de cada tipo de pagina. Normalmente tendras al menos dos: uno para la pagina principal (lista de articulos) y otro para cada articulo individual. Si quieres anadir una barra lateral, un formulario de suscripcion o un pie de pagina personalizado, ese es el lugar donde hacerlo.

SEO para tu blog

Crear un blog es solo el primer paso. Para que la gente lo encuentre, necesitas optimizarlo para buscadores.

Meta descripciones

Cada articulo deberia tener una meta descripcion unica de entre 120 y 160 caracteres. En el front matter, anadela asi:

---
title: "Mi primer artículo"
description: "Aprende a crear tu primer blog con Markdown usando Jekyll paso a paso, desde la instalación hasta la publicación."
---

Si no incluyes una descripcion, Google mostrara un fragmento aleatorio de tu texto, que rara vez sera atractivo para el lector.

Sitemap y robots.txt

Un sitemap.xml le dice a los buscadores que paginas tiene tu sitio. Tanto Jekyll como Hugo lo generan automaticamente. En Jekyll, anade gem "jekyll-sitemap" a tu Gemfile. En Hugo, ya viene incluido por defecto.

El archivo robots.txt indica a los buscadores que pueden y que no pueden rastrear. Crea un archivo robots.txt en la raiz del sitio con:

User-agent: *
Allow: /
Sitemap: https://tu-dominio.com/sitemap.xml

URLs amigables

Usa URLs descriptivas en lugar de identificadores numericos. En vez de /posts/12345, configura tu generador para usar /blog/como-crear-un-blog-con-markdown. Tanto Jekyll como Hugo permiten configurar la estructura de URLs en sus archivos de configuracion.

Velocidad de carga

Los sitios estaticos ya son rapidos por naturaleza, pero puedes mejorarlos aun mas: comprime las imagenes antes de subirlas, usa formatos modernos como WebP y activa la cache del navegador en tu hosting. Herramientas como PageSpeed Insights te ayudan a identificar mejoras.

Donde alojar tu blog gratis

Estas son las mejores opciones gratuitas para alojar tu blog:

  • GitHub Pages: Ideal para blogs con Jekyll. Solo necesitas hacer push al repositorio y se publica automaticamente.
  • Vercel: Perfecto para Next.js y otros frameworks. Despliega en cada push con previsualizacion de PRs.
  • Netlify: Compatible con practicamente cualquier generador. Incluye formularios, funciones serverless y CDN.
  • Cloudflare Pages: Alternativa rapida y gratuita con CDN global incluido.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado este tutorial. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirlo en Twitter.

para estar al día con mi contenido. 😊