Guía para Inexpertos: De Bearblog a GitHub Pages como un Profesional

Introducción: ¿Por qué migrar y por qué esta guía?

Imagina esto: escribes un artículo técnico fantástico en Bearblog. Es fácil, no tienes que pensar en configuraciones, y en minutos está publicado para que el mundo lo vea. Es maravilloso... hasta que quieres más control.

De repente, te das cuenta de que el "estándar de oro" para compartir proyectos técnicos es GitHub. Todos los enlaces que ves son github.com/nombre-usuario/nombre-proyecto. Quieres ese nivel de seriedad, control sobre tu dominio personalizado (tusitio.com), y la libertad de personalizar cada aspecto de tu sitio sin depender de las limitaciones de una plataforma.

Pero hay un problema: GitHub puede parecer un laberinto de términos extraños como repositorios, commits, Git, Jekyll, YAML, MathML... La sola idea de migrar tu contenido manualmente da pánico.

Esta guía es para ti.

Este manual es el resultado de mi propio viaje de migración. Documenta cada problema que encontré, cada solución que probé y cada "truco mágico" que aprendí para hacer que un sitio estático con fórmulas matemáticas se vea profesional y funcione a la perfección, todo sin pagar por hosting y usando tu propio dominio.

No asumo que sabes usar la terminal o qué es un PDF. Empezaremos desde cero. Te guiaré para que entiendas no solo el qué, sino el por qué de cada paso. Al final, no solo habrás migrado tu blog; habrás ganado una habilidad valiosa para publicar cualquier contenido en la web.

Capítulo 1. Los Cimientos: Entendiendo los "Ingredientes" de tu Web

Antes de empezar a copiar y pegar código, es crucial entender las "piezas de Lego" con las que vamos a construir. Bearblog manejaba todo esto por detrás, pero ahora nosotros tomamos el control.

1.1. Markdown (.md): Tu Mejor Amigo para Escribir

¿Qué es? Markdown es un lenguaje de marcado ligero. Su objetivo es que puedas escribir usando un formato de texto plano fácil de leer y escribir, que luego se convierte en HTML válido.
¿Por qué es importante? Es el estándar para escribir documentación y blogs técnicos. Es mucho más simple que escribir HTML a mano.

Ejemplo Práctico:

# Este es un título principal (se convertirá en <h1> en HTML)

Este es un párrafo normal. **Esto está en negrita** y *esto en cursiva*.

- Esto es una lista
- Con varios elementos

[Este es un enlace a Google](https://google.com)

Problema clave: Markdown por sí solo no puede representar fórmulas matemáticas complejas. Para eso, necesitamos ayuda.

1.2. LaTeX: El Lenguaje de las Fórmulas

¿Qué es? LaTeX es un sistema de composición tipográfica de alta calidad, famoso por su potente capacidad para escribir fórmulas matemáticas.
¿Por qué es importante? Si tu blog tiene matemáticas, física o cualquier notación científica, es casi seguro que usaste LaTeX en Bearblog (aunque no lo supieras).

Ejemplo Práctico en Markdown:

Para una ecuación en línea, se usa un dólar: $E = mc^2$.

Para una ecuación centrada en su propia línea, se usan dos dólares:

$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

Problema clave: GitHub y los navegadores web no entienden LaTeX directamente. Alguien o algo tiene que traducirlo a algo que el navegador entienda.

1.3. MathML: El Traductor de Fórmulas para la Web

¿Qué es? MathML es un lenguaje de marcado basado en XML diseñado específicamente para describir notación matemática y capturar tanto su estructura como su contenido.
¿Por qué es importante? Es el estándar web nativo para las matemáticas. Los navegadores modernos (especialmente Firefox) lo entienden perfectamente sin necesidad de programas extra.

Ejemplo Práctico (el LaTeX de arriba traducido a MathML):

<p>Para una ecuación en línea:
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mi>E</mi> <mo>=</mo> <mi>m</mi> <msup><mi>c</mi><mn>2</mn></msup>
  </math>
</p>

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mrow>
    <msubsup>
      <mo>∫</mo>
      <mn>0</mn>
      <mi>∞</mi>
    </msubsup>
    <msup>
      <mi>e</mi>
      <mrow>
        <mo>−</mo>
        <msup><mi>x</mi><mn>2</mn></msup>
      </mrow>
    </msup>
    <mi>d</mi>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <msqrt><mi>π</mi></msqrt>
      <mn>2</mn>
    </mfrac>
  </mrow>
</math>

¡No te asustes! Nadie escribe MathML a mano. Usaremos una herramienta para que lo haga por nosotros.

1.4. Pandoc: La Navaja Suiza de la Conversión

¿Qué es? Pandoc es un programa que convierte documentos de un formato de marcado a otro. Es nuestro héroe en esta historia.
¿Por qué es importante? Nos permitirá coger nuestros archivos Markdown (con fórmulas en LaTeX) y convertirlos automáticamente a HTML con las fórmulas traducidas a MathML, listas para subir a GitHub.

Cómo se usa (una preview):

# Este comando mágico hace la conversión pesada
pandoc mi-articulo.md -o mi-articulo.html --mathml

Resumen del Capítulo 1

"Ladrillo"	Su Función	¿Quién lo Gestionaba antes?
Markdown	Te permite escribir el contenido de forma sencilla.	Tú / Bearblog
LaTeX	Te permite escribir fórmulas matemáticas dentro de Markdown.	Tú / Bearblog
MathML	Es el lenguaje que entienden los navegadores para mostrar esas fórmulas.	Bearblog (tras bambalinas)
Pandoc	Es el traductor que convierte tu Markdown+LaTeX en HTML+MathML.	Nadie (¡ahora lo usas tú!)

Conclusión: Tu misión ahora no es escribir HTML o MathML, sino aprender a usar a Pandoc como tu nuevo y poderoso traductor.

Capítulo 2. Configurando Tu Arsenal: Instalando las Herramientas Necesarias

Ahora que ya sabes qué "piezas de Lego" vamos a usar, es hora de conseguir las herramientas que nos van a ayudar a unirlas. No te preocupes, son todas gratuitas y vamos a instalarlas juntos.

Piensa en este capítulo como ir de compras antes de empezar un proyecto de bricolaje. Necesitamos tener todo a mano para no tener que interrumpir el flujo de trabajo.

2.1. Pandoc: Instalando el Traductor Universal

Pandoc es la herramienta más importante de nuestro kit. Es la que convertirá tus archivos .md en hermosos archivos .html.

Para Windows:

Ve a la página de descargas de Pandoc: Abre tu navegador y ve a https://github.com/jgm/pandoc/releases/latest.
Descarga el instalador: Busca el archivo que termina en -windows-x86_64.msi (por ejemplo, pandoc-3.1.6-windows-x86_64.msi) y haz clic en él para descargarlo.
Ejecuta el instalador: Abre el archivo descargado y sigue las instrucciones. Simplemente haz clic en "Siguiente" hasta que termine la instalación. Esto agregará Pandoc a tu "PATH", que es como darle al sistema las instrucciones para saber dónde encontrar el programa cuando lo necesite.

Para macOS:

Usa Homebrew (recomendado): Si tienes instalado Homebrew (un gestor de paquetes para macOS), abre la aplicación "Terminal" y escribe:
```
brew install pandoc
```
Presiona Enter y espera a que termine.
O descarga el instalador: Si no usas Homebrew, también puedes descargar el archivo .pkg desde la misma página de lanzamientos de Pandoc y ejecutarlo.

Para Linux (Ubuntu/Debian):

Abre una terminal y escribe:

sudo apt-get update
sudo apt-get install pandoc

✅ Verificación:

Para asegurarnos de que todo funcionó, abre una nueva ventana de Símbolo del sistema (Windows) o Terminal (macOS/Linux) y escribe:

pandoc --version

Presiona Enter. Deberías ver un montón de texto que muestra información sobre la versión de Pandoc. ¡Felicidades! Ya tienes instalado tu traductor.

2.2. Git: El Control de Versiones (No Tengas Miedo)

Git es un sistema de control de versión. Suena complicado, pero en realidad es como el "Historial de cambios" de un documento de Google, pero mucho más potente. GitHub se basa en Git. Lo necesitamos para subir nuestro sitio web.

Para Windows:

Descarga Git para Windows: Ve a https://git-scm.com/download/win.
Ejecuta el instalador: Sigue las instrucciones. En la mayoría de los pasos, la opción por defecto está bien. Cuando te pregunte por tu editor de texto, si no usas uno en particular, puedes elegir "Notepad++" o "VSCode" si los tienes instalados, o dejar "Vim" (aunque no es muy amigable para principiantes). No es crucial.

Para macOS:

Usa Homebrew: En la Terminal, escribe:
```
brew install git
```
O descarga el instalador: También puedes descargarlo desde https://git-scm.com/download/mac.

Para Linux (Ubuntu/Debian):

En la terminal, escribe:

sudo apt-get update
sudo apt-get install git

✅ Verificación:

Abre una nueva ventana de Símbolo del sistema o Terminal y escribe:

git --version

Deberías ver algo como git version 2.39.1 o similar. ¡Perfecto! Git está listo.

2.3. Un Editor de Texto "Listo para Programar"

Sí, puedes usar el Bloc de notas, pero un editor de código moderno te hará la vida mucho más fácil. Te coloreará la sintaxis (resaltará el código de colores para que sea más legible), te ayudará con las sangrías y tendrá extensiones muy útiles.

Te recomiendo Visual Studio Code (VSCode). Es gratuito, muy popular y muy amigable.

Descarga VSCode: Ve a https://code.visualstudio.com/download y descarga la versión para tu sistema operativo.
Instálalo: Ejecuta el instalador y sigue los pasos.
Extensión recomendada (opcional pero útil): Abre VSCode. En la barra lateral izquierda, haz clic en el icono de extensiones (o pulsa Ctrl+Shift+X). Busca "Markdown All in One" y instálala. Te ayudará a previsualizar tus archivos Markdown.

2.4. Crear una Cuenta en GitHub

GitHub es donde vivirá y se publicará nuestro sitio web.

Ve a GitHub: Abre https://github.com/ en tu navegador.
Regístrate: Haz clic en "Sign up" y completa el formulario con tu email, una contraseña y un nombre de usuario. El nombre de usuario es importante, ya que será parte de la dirección web de tu sitio (por ejemplo, https://tuusuario.github.io).

¡Y eso es todo! No necesitamos instalar GitHub, ya que es un sitio web que usaremos desde nuestro navegador y con Git.

Resumen del Capítulo 2

Ahora tienes todo el software necesario instalado en tu computadora:

Pandoc: Para convertir tus archivos.
Git: Para manejar las versiones y subir los archivos.
Un buen editor de texto: Para escribir y editar sin dolor de cabeza.
Una cuenta de GitHub: Donde alojaremos el sitio.

Próximos pasos: En el siguiente capítulo, pondremos todo esto en práctica. Crearemos nuestra primera carpeta de proyecto, convertiremos nuestro primer archivo Markdown a HTML y haremos nuestro primer "commit" y "push" a GitHub. Suena a jerga, pero pronto tendrá todo el sentido del mundo.

Capítulo 3. Primeros Pasos: Desde una Carpeta en tu PC hasta GitHub Pages

¡Bienvenido a la parte práctica! En este capítulo, vamos a transformar esa teoría en acción. Vamos a crear tu primer proyecto, convertir un archivo Markdown a HTML y, lo más emocionante, publicarlo en internet usando GitHub Pages. Sigue cada paso al pie de la letra y verás cómo todo empieza a encajar.

3.1. Creando tu Primer Proyecto Local

Todo sitio web, por simple que sea, vive dentro de una carpeta en tu computadora. Vamos a crearla y organizarla de una manera lógica.

Crea una carpeta nueva: En tu escritorio o en cualquier lugar que te sea fácil encontrar, crea una nueva carpeta. Nómbrala de manera clara, por ejemplo, mi-blog-genial.
Abre esa carpeta con tu editor de texto (VSCode): Esto es clave para trabajar cómodamente. Si usas VSCode:
- Abre VSCode.
- Ve al menú File > Open Folder... (Abrir carpeta).
- Navega y selecciona la carpeta mi-blog-genial que acabas de crear.

¡Perfecto! Ahora tu editor de texto está listo para trabajar dentro de la carpeta correcta.

3.2. Escribiendo tu Primer Archivo Markdown con Fórmulas

Dentro de la carpeta de tu proyecto, vamos a crear un archivo.

Crea un nuevo archivo: En VSCode, con la carpeta abierta, haz clic en el icono de "New File" ( parece un papel con una estrella) o haz clic derecho en el explorador de archivos de la izquierda y elige "New File".
Nómbralo: Escribe index.md y presiona Enter. El nombre index es especial; los servidores web lo reconocen como la página principal de un sitio, como index.html sería la portada de tu blog.
Copia y pega este código: Ahora, escribe o copia el siguiente contenido en tu archivo index.md. He incluido una fórmula matemática simple para que veas cómo funciona la magia de la conversión.

---
title: "Mi Primer Blog en GitHub"
author: "Tu Nombre"
date: 2025-09-16
---

# ¡Hola, Mundo!

Este es mi primer blog publicado de manera profesional usando GitHub Pages.

## Una fórmula famosa

Una de las ecuaciones más conocidas de la física es la de Einstein para la equivalencia masa-energía:

$$
E = mc^2
$$

Pero también podemos escribirla en línea: $E = mc^2$, que es igual de poderosa.

### ¿Qué significa?
- $E$ es la energía.
- $m$ es la masa.
- $c$ es la velocidad de la luz en el vacío.

**¡Espero que les guste!**

Guarda el archivo: Presiona Ctrl + S (o Cmd + S en Mac) para guardar. Tu carpeta ahora debe tener un archivo llamado index.md.

3.3. La Magia de la Conversión: De .md a .html con Pandoc

Ahora es cuando Pandoc entra en acción. Vamos a convertir este archivo Markdown (.md) en una página web (.html).

Abre la terminal en VSCode: Ve al menú Terminal > New Terminal. Esto abrirá una pequeña ventana en la parte inferior de VSCode. Lo genial es que esta terminal ya está "ubicada" dentro de la carpeta de tu proyecto, así que no tenemos que navegar manualmente.
Ejecuta el comando de Pandoc: En la terminal, escribe el siguiente comando y presiona Enter:
```
pandoc index.md -o index.html --mathml --standalone
```
Desglosemos este comando para que entiendas lo que estás haciendo:
- pandoc: Llama al programa Pandoc.
- index.md: Le dice a Pandoc cuál es el archivo de entrada.
- -o index.html: Le dice a Pandoc cómo se va a llamar el archivo de salida (-o significa "output").
- --mathml: ¡Esta es la opción mágica! Le dice a Pandoc que convierta todas las fórmulas de LaTeX (como $E = mc^2$ ) a MathML, el lenguaje que entienden los navegadores.
- --standalone: Le dice a Pandoc que genere un archivo HTML completo y autónomo, con todas las etiquetas básicas como <html>, <head> y <body>. Es como crear un documento de Word completo, no solo un fragmento de texto.
Verifica el resultado: Si todo salió bien, no verás ningún mensaje de error en la terminal. Ahora, mira el explorador de archivos de VSCode a la izquierda. ¡Debería aparecer un nuevo archivo llamado index.html! Haz clic en él para abrirlo. Verás un montón de código HTML que Pandoc generó automáticamente. Si buscas, encontrarás la fórmula traducida a MathML.

Pro Tip: Puedes abrir este archivo index.html directamente con tu navegador (haz doble clic sobre él en el explorador de Windows/Mac) para ver cómo se ve tu página web. ¡Ya tienes un sitio web local!

3.4. Preparando el Terreno para GitHub con Git

Ahora tenemos nuestro sitio web, pero solo vive en nuestra computadora. Git nos ayudará a subirlo a GitHub.

Inicializa Git: En la misma terminal de VSCode, escribe el siguiente comando y presiona Enter:
```
git init
```
Este comando crea un nuevo "repositorio" de Git vacío en tu carpeta actual. Git ahora empezará a rastrear los cambios en los archivos de esta carpeta. Verás un mensaje que dice Initialized empty Git repository in [ruta/a/tu/carpeta]/.git/.
Añade tus archivos al "área de preparación": Git tiene un área intermedia llamada "staging area". Para decirle a Git qué archivos queremos subir, usamos el comando add. Escribe:
```
git add .
```
El punto . significa "todos los archivos en esta carpeta". Esto añade tanto tu index.md como el index.html generado.

3.5. Tu Primera "Foto" del Proyecto (Commit)

En Git, un "commit" es como tomar una foto instantánea de todos tus archivos en un momento determinado. Es una versión que puedes recuperar más tarde si algo sale mal.

Crea tu primer commit: En la terminal, escribe:
```
git commit -m "Mi primer commit: agregando la página principal"
```
La opción -m te permite añadir un mensaje que describe lo que has hecho en esta "foto". Siempre escribe mensajes claros y concisos.

3.6. Conectando tu Carpeta Local con GitHub

Ahora necesitamos decirle a Git en tu computadora dónde está el "hogar" en internet para este proyecto. Ese hogar es un repositorio en GitHub.

Crea un nuevo repositorio en GitHub:
- Abre tu navegador y ve a github.com. Asegúrate de haber iniciado sesión.
- Haz clic en el botón verde "New" (Nuevo) que está cerca de la esquina superior izquierda.
- Nombre del repositorio: Esto es muy importante. Para que GitHub Pages funcione automáticamente, debes nombrar tu repositorio exactamente así: tu-nombre-usuario.github.io (reemplaza tu-nombre-usuario con el nombre de usuario que elegiste al crearte la cuenta). Por ejemplo, si mi usuario es juan-perez, el repositorio debe llamarse juan-perez.github.io.
- Descripción: Puedes añadir una descripción opcional como "Mi blog personal".
- Visibilidad: Elige "Public" (Público).
- NO inicialices con README: Deja las opciones de "Initialize this repository with:" sin marcar. Nosotros ya tenemos una carpeta inicializada, así que no necesitamos que GitHub cree una por nosotros.
- Haz clic en "Create repository" (Crear repositorio).
Conecta tu repositorio local con GitHub: GitHub te mostrará una página con instrucciones rápidas. Busca la sección llamada "...or push an existing repository from the command line". Copia el primer comando que aparece allí. Se verá así (pero con TU nombre de usuario):
```
git remote add origin https://github.com/tu-nombre-usuario/tu-nombre-usuario.github.io.git
```
Pega este comando en la terminal de VSCode y presiona Enter. Este comando le dice a tu Git local que el "origen" remoto (remote origin) de tu proyecto está en esa dirección de GitHub.
Sube tu código a GitHub: Ahora copia el segundo comando de la misma sección en GitHub:
```
git push -u origin main
```
Pégalo en la terminal y presiona Enter.
- git push: Este es el comando para "empujar" o subir tus commits.
- -u origin main: Esto le dice a Git que queremos subir nuestra rama main (la principal) al repositorio remoto llamado origin (que acabamos de definir) y que establezca esta como la rama predeterminada para futuros pushes.
Introduce tus credenciales: La primera vez que hagas esto, Git te pedirá que inicies sesión en GitHub. Sigue las instrucciones en la terminal para autenticarte.

3.7. ¡Despliega tu Sitio con GitHub Pages!

El momento de la verdad. Hemos subido el código, ahora tenemos que decirle a GitHub que lo convierta en un sitio web público.

Ve a la configuración de tu repositorio: En la página principal de tu nuevo repositorio en GitHub, haz clic en la pestaña "Settings" (Configuración), que está en el menú superior.
Encuentra la sección de Pages: En la barra lateral izquierda, haz clic en "Pages".
Configura la fuente de publicación: En la sección "Build and deployment" (Construcción y despliegue), en "Source" (Fuente), selecciona "Deploy from a branch" (Desplegar desde una rama).
Selecciona la rama: Justo debajo, en "Branch" (Rama), elige main y la carpeta / (root) (raíz). Esto le dice a GitHub: "Toma todo lo que está en la rama principal y conviértelo en mi sitio web".
Guarda: Haz clic en el botón "Save" (Guardar).

3.8. ¡Felicidades! Tu Sitio Está En Línea

GitHub te mostrará un recuadro azul con la dirección de tu sitio web vivo. Será algo como: https://tu-nombre-usuario.github.io

¡Abre ese enlace en tu navegador! Puede tomar uno o dos minutos para que aparezca por primera vez. Si ves tu página con la fórmula de Einstein, ¡lo has logrado!

3.9. Visualizando el Resultado y Entendiendo el YAML Front Matter

¿Cómo se vería tu página web?

Después de seguir los pasos del Capítulo 3, si abres el archivo index.html en tu navegador o visitas tu sitio en https://tu-usuario.github.io, verías algo similar a esto:

Ejemplo visual de cómo se vería tu página. Nota cómo las fórmulas se renderizan correctamente gracias a MathML.

La Magia Detrás del Bloque YAML: Tu Tarjeta de Identificación

Al principio de tu archivo index.md, escribiste este bloque:

---
title: "Mi Primer Blog en GitHub"
author: "Tu Nombre"
date: 2025-09-16
---

Este bloque se llama YAML Front Matter. Piensa en él como la "tarjeta de identificación" o los "metadatos" de tu documento. Le da información crucial a las herramientas que procesan tu archivo (como Pandoc o Jekyll, el motor de GitHub Pages).

¿Por qué es tan importante?

Para Pandoc: Cuando usas el comando pandoc index.md -o index.html --mathml --standalone, Pandoc lee este bloque YAML y lo usa para:
- Generar la etiqueta <title> en el HTML: <title>Mi Primer Blog en GitHub</title>.
- Añadir un encabezado bonito al principio de tu página web con el título, autor y fecha.
Para GitHub Pages (y Jekyll): GitHub Pages utiliza un motor llamado Jekyll para generar sitios estáticos. Jekyll busca este bloque YAML en cada archivo para saber:
- Qué layout (diseño) usar: Jekyll usa temas o plantillas predefinidas llamadas "layouts". El layout default es el más común y actúa como la estructura base de todas tus páginas (como un marco que incluye el encabezado, menú de navegación y pie de página).
- Cómo procesar la página: Sin este bloque, Jekyll podría tratar tu archivo como un recurso estático simple y no aplicar ninguna plantilla.

El Layout `default.html` (Una Explicación Sencilla)

Imagina que el layout default.html es la estructura básica de tu sitio, como los cimientos y las paredes de una casa. Tu contenido Markdown (el que escribiste) son los muebles y la decoración que van dentro.

Un archivo default.html típico (que Jekyll busca en una carpeta llamada _layouts) se ve más o menos así:

<!DOCTYPE html>
<html>
<head>
  <title>{{ page.title }}</title>
  <!-- Aquí se enlazarían tus estilos CSS -->
</head>
<body>
  <header>
    <!-- Aquí iría el menú de navegación de tu sitio -->
  </header>

  <main>
    <!-- ¡Este es el lugar mágico! -->
    {{ content }}
  </main>

  <footer>
    <!-- Aquí iría el pie de página -->
  </footer>
</body>
</html>

{{ page.title }}: Esto es como un marcador de posición. Jekyll lo reemplaza automáticamente con el valor title: que escribiste en tu YAML Front Matter.
{{ content }}: Este es el marcador de posición más importante. Jekyll toma el contenido de tu archivo Markdown (todo lo que está después del bloque YAML), lo convierte a HTML, y lo pone aquí.

En resumen: El bloque YAML le dice a Jekyll: "Oye, usa el layout default para esta página, y aquí tienes el título, autor y fecha para que los coloques en los lugares correctos". Luego, Jekyll ensambla todo como un rompecabezas.

¿Y si no uso Jekyll?

En nuestro flujo de trabajo, nosotros usamos Pandoc para hacer la conversión a HTML antes de subir los archivos a GitHub. Esto significa que estamos generando archivos HTML completos (--standalone) que no necesitan que Jekyll los procese.

Sin embargo, incluir el bloque YAML sigue siendo una buena práctica porque:

Pandoc lo utiliza para generar partes del HTML.
Si alguna vez decides cambiar tu método y dejar que Jekyll haga la conversión por ti, tus archivos ya estarán preparados.
Mantiene tus metadatos organizados y accesibles.

Resumen de lo que lograste en este capítulo:

Creaste una carpeta de proyecto.
Escribiste un archivo Markdown con fórmulas.
Usaste Pandoc para convertirlo a HTML con MathML.
Usaste Git para tomar una "foto" de tu proyecto.
Creaste un repositorio en GitHub y subiste tu código.
Activaste GitHub Pages para publicar tu sitio automáticamente.

Capítulo 4. Tu Propio Dominio Personalizado: De `usuario.github.io` a `tusitio.com`

¡Felicidades! Tu sitio ya está vivo en internet en tu-usuario.github.io. Pero vamos a llevarlo al siguiente nivel profesional: tener tu propio dominio personalizado como www.misitio.com. Lo mejor de todo es que puedes hacer esto sin pagar por hosting costoso, usando GitHub Pages para alojar tu sitio y Cloudflare para gestionar tu dominio de forma gratuita.

4.1. ¿Por qué un Dominio Personalizado y por qué Cloudflare?

Marca Personal: Un dominio propio (tunombre.com) suena mucho más profesional que una dirección de GitHub.
Confianza: Los visitantes confían más en un sitio con dominio propio.
Flexibilidad: Si algún día quieres cambiar de plataforma (de GitHub Pages a Netlify, Vercel, etc.), tu dominio se mantiene igual. Solo cambias a dónde apunta.
Cloudflare: Es una empresa que ofrece servicios de seguridad y rendimiento para sitios web. Nosotros usaremos su DNS (Sistema de Nombres de Dominio) gratuito. El DNS es como la agenda de contactos de internet: traduce tusitio.com a la dirección IP de GitHub Pages. Cloudflare lo hace de forma rápida, segura y gratis.

4.2. Paso 1: Consigue un Nombre de Dominio

Primero, necesitas comprar tu dominio. Hay muchas "registradores de dominios" donde puedes hacerlo (GoDaddy, Namecheap, Google Domains, etc.).

Elige un nombre: Piensa en un nombre que sea fácil de recordar y escribir. Puede ser tu nombre completo, el nombre de tu proyecto, etc.
Compra el dominio: Ve a la página de un registrador, busca si tu dominio está disponible y sigue el proceso de compra. No contrates ningún plan de hosting adicional. Solo necesitas el dominio.

4.3. Paso 2: Configura Cloudflare para Gestionar tu Dominio

Ahora, vamos a decirle a Cloudflare que queremos que sea el encargado de gestionar hacia dónde dirige tu dominio.

Crea una cuenta en Cloudflare: Ve a www.cloudflare.com y regístrate gratis.
Añade tu sitio: En el dashboard de Cloudflare, haz clic en "Add a Site" (Añadir un sitio). Escribe tu dominio (p.ej., misitio.com) y haz clic en "Add site".
Elige un plan: Selecciona el plan Free y haz clic en "Continue".
Revisa los registros DNS: Cloudflare escaneará automáticamente los registros DNS existentes de tu dominio. Esto puede tomar unos minutos.
Cambia tus Nameservers: Este es el paso MÁS IMPORTANTE. Cloudflare te dará dos "nameservers" que parecerán así:
- lara.ns.cloudflare.com
- martin.ns.cloudflare.com
Tienes que ir a la página donde compraste tu dominio (GoDaddy, Namecheap, etc.) y reemplazar los nameservers que tienes allí por los dos que te dio Cloudflare. Esto le dice a todo internet que ahora Cloudflare es el manager oficial de tu dominio. La propagación de este cambio puede tardar hasta 24-48 horas, pero suele ser más rápido.

4.4. Paso 3: Configura los Registros DNS en Cloudflare

Una vez que Cloudflare gestiona tu dominio, necesitamos decirle a dónde tiene que enviar a los visitantes. En este caso, queremos enviarlos a los servidores de GitHub Pages.

En el dashboard de Cloudflare de tu sitio:

Ve a la pestaña DNS > Records (Registros).
Añade un registro CNAME:
- Type: CNAME
- Name: www (o el subdominio que quieras, como blog)
- Target: tu-usuario.github.io (¡usa tu nombre de usuario real de GitHub!)
- Proxy status: Activado (la nube debe estar naranja). Esto activa la protección y caché de Cloudflare.
- Haz clic en Save.
Añade un registro A para el dominio "raíz" (apex): Los registros CNAME no funcionan para el dominio raíz (misitio.com), solo para subdominios (www.misitio.com). Para el dominio raíz, necesitamos usar registros A que apunten directamente a las direcciones IP de GitHub.
- Type: A
- Name: @ (esto representa el dominio raíz: misitio.com)
- Target: 185.199.108.153
- Proxy status: Activado (nube naranja).
- Haz clic en Save.
- Añade más registros A para mayor robustez: GitHub recomienda apuntar a varias IPs. Repite el paso anterior para añadir registros A para las siguientes IPs:
  - 185.199.109.153
  - 185.199.110.153
  - 185.199.111.153

Tu configuración final de DNS en Cloudflare debería verse así:

Type	Name	Content	Proxy Status
A	`@`	`185.199.108.153`	Proxied
A	`@`	`185.199.109.153`	Proxied
A	`@`	`185.199.110.153`	Proxied
A	`@`	`185.199.111.153`	Proxied
CNAME	`www`	`tu-usuario.github.io`	Proxied

4.5. Paso 4: Configura GitHub Pages para Reconocer tu Dominio

Ahora tenemos que decirle a GitHub que cuando alguien visite tusitio.com, debe servir el contenido de tu repositorio.

Ve a tu repositorio en GitHub (tu-usuario.github.io).
Ve a Settings > Pages.
En la sección "Custom domain" (Dominio personalizado), escribe tu dominio (p.ej., www.misitio.com o misitio.com) y presiona Save.
Marca la casilla "Enforce HTTPS". GitHub se encargará de obtener un certificado SSL para tu dominio, lo que significa que tu sitio se servirá de forma segura con https://. Esto puede tardar unos minutos o hasta una hora en activarse.

4.6. Paso 5: La Prueba Final y la Paciencia

Espera: Los cambios de DNS no son instantáneos. Dale tiempo (desde 5 minutos hasta 48 horas, aunque normalmente es menos de una hora).
Verifica: Abre tu navegador y escribe tu nuevo dominio (https://www.misitio.com). ¡Deberías ver tu sitio!
Redirección (Opcional pero Recomendado): Decide si quieres que tu sitio principal sea misitio.com o www.misitio.com. Luego, en la configuración de GitHub Pages, usa ese. Cloudflare también puede ayudar a redirigir uno al otro con una regla de "Redirect" en la pestaña Rules > Page Rules.

Resumen del Capítulo 4

Lograste algo enorme: conectar tu dominio personalizado con tu sitio alojado gratis en GitHub Pages.

Compraste un dominio en un registrador.
Traspasaste la gestión del DNS a Cloudflare cambiando los nameservers.
Creaste registros en Cloudflare que apuntan tu dominio (www y el raíz) a GitHub Pages.
Configuraste GitHub para que reconozca tu dominio y forzaste HTTPS.

Ahora tu sitio no solo es técnicamente sólido, sino que también tiene la presentación profesional de un dominio propio. Todo esto, sin pagar mensualmente por hosting.

Capítulo 5. Dale Vida y Estructura a Tu Sitio: CSS, Navegación y Organización

Tu sitio ya funciona y tiene su propio dominio. ¡Es un gran logro! Pero probablemente se vea un poco básico. En este capítulo vamos a transformarlo: le daremos un estilo único con CSS, añadiremos un menú de navegación para que los visitantes no se pierdan y organizaremos la carpeta de tu proyecto como un profesional para que sea fácil de mantener y expandir.

5.1. La Estructura de Carpeta Definitiva

Una buena organización te ahorrará muchos dolores de cabeza en el futuro. En lugar de tener todos los archivos revueltos, vamos a crearlos con una lógica clara.

Tu carpeta de proyecto (mi-blog-genial) debería verse así cuando terminemos:

mi-blog-genial/
├── 📁 assets/           # Todos los recursos (CSS, imágenes, etc.)
│   ├── 📁 css/
│   │   └── style.css    # Tus estilos personalizados
│   └── 📁 img/          # Las imágenes de tu sitio
├── 📁 posts/            # Carpeta para tus artículos/blog
│   └── mi-primer-post.md
├── 📁 layouts/          # Plantillas HTML para Pandoc (opcional pero útil)
│   └── default.html
├── index.md             # La portada de tu sitio
├── about.md             # Una página "Acerca de mí"
└── index.html           # Generado automáticamente por Pandoc

Para crearla:

En VSCode, con tu carpeta de proyecto abierta, haz clic derecho en el explorador de archivos y selecciona "New Folder" para crear cada una de estas carpetas (assets, assets/css, assets/img, posts, layouts).
Mueve tu archivo index.md original a la raíz de la carpeta mi-blog-genial (fuera de cualquier otra carpeta nueva).

5.2. Tu Primer Archivo CSS con Variables

El CSS (Cascading Style Sheets) es el lenguaje que define el estilo de tu sitio: colores, fuentes, tamaños, diseños. Usaremos una característica moderna llamada Variables CSS (Custom Properties). Son como "alias" para los valores que uses mucho. Si luego quieres cambiar el color azul de todo tu sitio, solo lo cambias en un lugar.

Crea el archivo de estilos: Dentro de la carpeta assets/css, crea un nuevo archivo llamado style.css.
Copia y pega el siguiente código: Este CSS establece una paleta de colores moderna y un diseño limpio y minimalista, perfecto para un blog técnico.

:root {
  /* Paleta de Colores */
  --color-primary: #2563eb;     /* Un azul vibrante y profesional */
  --color-primary-dark: #1d4ed8;
  --color-background: #ffffff;  /* Fondo claro */
  --color-background-alt: #f8fafc; /* Fondo ligeramente gris para secciones */
  --color-text: #1f2937;        /* Texto casi negro, fácil de leer */
  --color-text-light: #64748b;  /* Texto secundario */
  --color-border: #e2e8f0;      /* Color para bordes suaves */

  /* Tipografía */
  --font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --line-height: 1.6;
  --border-radius: 8px;
}

/* Estilos Generales */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-background);
  margin: 0;
  padding: 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
}

/* Encabezados */
h1, h2, h3 {
  color: var(--color-primary);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

h1 {
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0.5rem;
}

/* Enlaces */
a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Navegación */
nav {
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
  padding: 1rem 0;
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  font-weight: 500;
}

.nav-links a:hover {
  text-decoration: none;
}

/* Contenedor principal */
main {
  padding: 1rem 0;
}

/* Pie de página */
footer {
  text-align: center;
  margin-top: 4rem;
  padding: 2rem 0;
  color: var(--color-text-light);
  border-top: 1px solid var(--color-border);
}

5.3. La Plantilla Base: `default.html`

Para evitar repetir el mismo código HTML (como el menú de navegación) en cada página, usaremos una plantilla de Pandoc.

Crea el archivo de plantilla: Dentro de la carpeta layouts, crea un nuevo archivo llamado default.html.
Copia y pega el siguiente código: Esta plantilla incluye la estructura HTML básica, enlaza tu archivo CSS y, lo más importante, tiene un menú de navegación y un lugar donde Pandoc inyectará tu contenido.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>$title$</title>
    <link rel="stylesheet" href="/assets/css/style.css">
    $if(math)$
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    $endif$
</head>
<body>
    <nav>
        <ul class="nav-links">
            <li><a href="/index.html">Inicio</a></li>
            <li><a href="/about.html">Acerca de</a></li>
            <!-- Puedes añadir más enlaces aquí más tarde -->
        </ul>
    </nav>

    <main>
        <h1>$title$</h1>
        $if(author)$<p class="author"><strong>Por:</strong> $author$</p>$endif$
        $if(date)$<p class="date"><strong>Fecha:</strong> $date$</p>$endif$
        $body$
    </main>

    <footer>
        <p>&copy; 2025 Tu Nombre. ¡Hecho con GitHub Pages!</p>
    </footer>
</body>
</html>

5.4. Ensamblando Todo: El Comando de Conversión Definitivo

Ahora, en lugar del comando simple, usaremos uno más potente que le dice a Pandoc que use tu plantilla y tus estilos.

Abre tu terminal en VSCode y ejecuta este comando para regenerar tu página principal:

pandoc index.md -o index.html --mathml --standalone --template=layouts/default.html --css=assets/css/style.css

Explicación de las nuevas opciones:

--template=layouts/default.html: Le dice a Pandoc que use TU plantilla, no la genérica.
--css=assets/css/style.css: Añade un enlace a tu archivo CSS dentro del <head> del HTML generado.

¡Verás cómo tu index.html ahora tiene el menú de navegación y se ve aplicando los estilos de style.css!

5.5. Creando Otras Páginas (Como "Acerca de")

Crea el archivo: En la raíz de tu proyecto, crea un nuevo archivo llamado about.md.
Añade contenido con YAML Front Matter:

---
title: "Acerca de Mí"
author: "Tu Nombre"
date: 2025-09-16
---

# Hola, soy [Tu Nombre]

¡Bienvenido a mi blog! Soy un apasionado de [tus intereses, e.g., la ciencia, la tecnología, la escritura].

En este sitio comparto mis ideas y aprendizajes sobre...

## Mis Habilidades
- Escribir en Markdown.
- Publicar sitios web con GitHub Pages.
- Aprender cosas nuevas.

[Volver al inicio](/index.html).

Conviértelo a HTML usando el mismo comando, pero cambiando los nombres de los archivos:

pandoc about.md -o about.html --mathml --standalone --template=layouts/default.html --css=assets/css/style.css

Ahora, si abres about.html en tu navegador, verás una nueva página con el mismo diseño y menú que la principal. ¡El menú "Acerca de" ya funcionará!

5.6. Automatización con un Script Sencillo

Escribir ese comando largo cada vez que cambias un archivo es tedioso. Podemos crear un pequeño script para automatizarlo.

Para Windows (crea un archivo convert.bat):

@echo off
pandoc index.md -o index.html --mathml --standalone --template=layouts/default.html --css=assets/css/style.css
pandoc about.md -o about.html --mathml --standalone --template=layouts/default.html --css=assets/css/style.css
echo ¡Conversión completada!
pause

Para usarlo, solo haz doble clic en el archivo convert.bat.

Para macOS/Linux (crea un archivo convert.sh):

#!/bin/bash
pandoc index.md -o index.html --mathml --standalone --template=layouts/default.html --css=assets/css/style.css
pandoc about.md -o about.html --mathml --standalone --template=layouts/default.html --css=assets/css/style.css
echo "✅ ¡Conversión completada!"

Luego, en la terminal, ejecuta chmod +x convert.sh para hacerlo ejecutable, y después ./convert.sh para usarlo.

Resumen del Capítulo 5

En este capítulo has dado un salto de calidad enorme:

Organizaste tu proyecto en carpetas lógicas.
Creaste un sistema de diseño con Variables CSS para un estilo consistente y fácil de cambiar.
Implementaste una plantilla (default.html) con un menú de navegación, lo que hace que tu sitio parezca profesional y cohesivo.
Creaste una página secundaria (about.html) que comparte el diseño de la principal.
Automatizaste el proceso de conversión con un script.

Ahora tu sitio no solo funciona, sino que tiene una identidad propia y una estructura sólida sobre la que construir.

Capítulo 6. Publicando Artículos y Automatizando tu Flujo de Trabajo

¡Tu sitio ya tiene una estructura profesional! Ahora es el momento de llenarlo de contenido. En este capítulo aprenderás a crear artículos de blog, a hacer que tu código se vea bonito con colores (syntax highlighting) y a automatizar todo el proceso para que publicar nuevo contenido sea tan fácil como ejecutar un solo comando.

6.1. Creando tu Primer Artículo de Blog

Los artículos de blog vivirán en la carpeta posts/ que creamos en el capítulo anterior. Sigue una convención de nombres clara para mantener el orden.

Crea tu primer archivo de post: En la carpeta posts/, crea un nuevo archivo Markdown. Usa un nombre descriptivo con la fecha y un "slug" (versión de la URL del título). Por ejemplo: 2025-09-16_mi-primer-post.md.
Añade el contenido con YAML Front Matter: Cada post necesita su propia "tarjeta de identificación". Nota que añadimos un nuevo campo description para SEO.

---
title: "Mi Primer Post"
author: "Tu Nombre"
date: 2025-09-16
description: "Una reflexión sobre mi viaje aprendiendo a usar GitHub Pages y Cloudflare para alojar mi blog técnico."
---

# Mi Viaje con GitHub Pages

Hace apenas unos días, mi blog vivía en Bearblog. Era simple, pero quería más control. Decidí migrar a GitHub Pages y aquí estoy, escribiendo mi primer post en mi propio sitio.

## Los Retos que Enfrenté

1.  **Aprender Git:** Al principio, los comandos me parecían otro idioma.
2.  **Configurar el DNS:** Entender cómo apuntar mi dominio con Cloudflare fue un gran logro.
3.  **Hacer que las fórmulas se vean bien:** Pandoc y MathML fueron la clave.

## Un Fragmento de Código Útil

Para convertir mis archivos, uso este comando de Pandoc:

```bash
pandoc mi-archivo.md -o mi-archivo.html --mathml --standalone --template=layouts/default.html --css=assets/css/style.css

Una Fórmula para Celebrar

No podía faltar una fórmula. La identidad de Euler sigue siendo una de mis favoritas por su belleza:

e^{i π} + 1 = 0

Conclusión: Valió la pena el esfuerzo. Ahora tengo un sitio 100% mío.

### 6.2. Haz que tu Código Brille: Syntax Highlighting con Prism.js

Los bloques de código como el anterior se verán en monoespacio, pero sin colores. Para añadir "syntax highlighting" (esos colores que hacen el código más legible), usaremos **Prism.js**. Es una librería ligera, popular y fácil de usar.

1.  **Descarga Prism.js:** Ve al [sitio de descarga de Prism](https://prismjs.com/download.html).
    *   Elige los lenguajes que usas (por ejemplo: Bash, JavaScript, Python, HTML, CSS).
    *   Elige un tema (por ejemplo, "Coy", "Dark", o "Okaidia").
    *   Haz clic en "Download JS" y "Download CSS".
2.  **Añade los archivos a tu proyecto:**
    *   Guarda el archivo CSS en `assets/css/prism.css`.
    *   Guarda el archivo JS en `assets/js/prism.js`.
3.  **Actualiza tu plantilla (`layouts/default.html`)** para incluir estos archivos:

```html
<head>
    <!-- ... resto del head ... -->
    <link rel="stylesheet" href="/assets/css/style.css">
    <!-- Añade la hoja de estilo de Prism -->
    <link rel="stylesheet" href="/assets/css/prism.css">
    $if(math)$
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    $endif$
</head>
<body>
    <!-- ... tu navegación y contenido ... -->

    <footer>
        <p>&copy; 2025 Tu Nombre. ¡Hecho con GitHub Pages!</p>
    </footer>
    <!-- Añade el script de Prism al final del body -->
    <script src="/assets/js/prism.js"></script>
</body>

¡Listo! Ahora, cuando conviertas tu post, el bloque de código bash tendrá colores que lo harán mucho más fácil de leer.

6.3. Creando un Índice de Blog en tu Página Principal

Tu página principal (index.md) puede ser más que una simple bienvenida. Puede convertirse en un índice que liste todos tus artículos.

Modifica tu index.md para que incluya una lista de posts. Puedes hacerlo manualmente o, eventualmente, automatizarlo con un script.

---
title: "Mi Blog Técnico"
author: "Tu Nombre"
date: 2025-09-16
---

# ¡Bienvenido a mi blog!

Aquí comparto lo que aprendo sobre tecnología, ciencia y más.

## Últimos Artículos

- **[16 de Septiembre, 2025: Mi Primer Post](/posts/2025-09-16_mi-primer-post.html)**
  Una reflexión sobre mi viaje aprendiendo a usar GitHub Pages.

<!-- Puedes añadir más posts aquí manualmente -->
<!-- Cuando tengas muchos, un script puede generar esta lista automáticamente -->

## Sobre Mí

Soy un apasionado por aprender y compartir conocimiento.
[Descubre más sobre mí aquí](/about.html).

Convierte el nuevo índice: Recuerda volver a generar tu index.html después de hacer este cambio.

6.4. Automatización Total: Un Script Para Gobernarlos a Todos

Ejecutar el comando pandoc para cada archivo individual es inefficiente. Vamos a crear un script potente que haga todo el trabajo duro por ti.

Crea un archivo llamado build.sh (para macOS/Linux) o build.bat (para Windows) en la raíz de tu proyecto.

Para macOS/Linux (`build.sh`):

#!/bin/bash

echo "🔄 Convirtiendo todos los archivos Markdown a HTML..."

# Convertir la página principal
pandoc index.md -o index.html --mathml --standalone --template=layouts/default.html --css=assets/css/style.css

# Convertir la página "About"
pandoc about.md -o about.html --mathml --standalone --template=layouts/default.html --css=assets/css/style.css

# Convertir TODOS los posts en la carpeta 'posts/'
for file in posts/*.md; do
    # Obtener el nombre del archivo sin la extensión .md
    filename=$(basename "$file" .md)
    # Ejecutar pandoc en el archivo
    pandoc "$file" -o "posts/$filename.html" --mathml --standalone --template=layouts/default.html --css=../assets/css/style.css
    echo "✅ Convertido: $file -> posts/$filename.html"
done

echo "🎉 ¡Conversión completada! Tu sitio está listo."

Para usarlo:

Guárdalo.
En la terminal, ejecuta chmod +x build.sh para hacer el script ejecutable.
Luego, cada vez que quieras construir tu sitio, solo ejecuta ./build.sh.

Para Windows (`build.bat`):

@echo off
echo 🔄 Convirtiendo todos los archivos Markdown a HTML...

pandoc index.md -o index.html --mathml --standalone --template=layouts/default.html --css=assets/css/style.css
pandoc about.md -o about.html --mathml --standalone --template=layouts/default.html --css=assets/css/style.css

for %%i in (posts\*.md) do (
    pandoc "%%i" -o "posts\%%~ni.html" --mathml --standalone --template=layouts/default.html --css=../assets/css/style.css
    echo ✅ Convertido: %%i -> posts\%%~ni.html
)

echo 🎉 ¡Conversión completada! Tu sitio está listo.
pause

Para usarlo: Simplemente haz doble clic en el archivo build.bat.

6.5. Despliegue con un Solo Comando

Finalmente, podemos combinar la construcción del sitio y el despliegue a GitHub en un solo paso.

En macOS/Linux, puedes extender tu build.sh:

#!/bin/bash

# ... (todo el código de construcción anterior) ...

echo "🚀 Subiendo cambios a GitHub..."
git add .
git commit -m "Publicación automática: $(date)"
git push origin main

echo "🌐 ¡Sitio desplegado! Visítalo en https://tu-dominio.com"

Ahora, tu flujo de trabajo completo para publicar un nuevo artículo es:

Escribir el post en posts/nuevo-post.md.
Ejecutar ./build.sh.
¡Listo! El script construye el sitio y lo sube a GitHub, donde se publica automáticamente.

Resumen del Capítulo 6

Has transformado tu flujo de trabajo de principiante a profesional:

Creas artículos en una carpeta dedicada, con un formato consistente.
Tu código se ve hermoso gracias a Prism.js.
Tu página principal actúa como un índice centralizado.
Has automatizado todo con un script que convierte y despliega tu sitio con un solo comando.

Tu blog ya no es un experimento; es una máquina bien engrasada para publicar contenido.

¡Tienes toda la razón! Me he emocionado con la potencia de la línea de comandos y he olvidado que para alguien que está empezando, todo esto puede sonar abrumador. Pidamos pause por un momento y aclaremos esto de una forma mucho más sencilla y tranquilizadora.

Un Momento de Calma: No Todo es Complicado

Primero, respira. Has hecho un trabajo increíble llegando hasta aquí. Es normal sentirse abrumado con tantas opciones y términos técnicos. La clave está en entender que hay más de una manera de hacer las cosas, y la que te he estado mostrando (con Pandoc) es solo una de ellas, la que te da el control total.

Vamos a simplificarlo con una analogía:

Imagina que quieres un pastel.

Usar Bearblog es como comprar un pastel ya hecho en la tienda. Es rápido, fácil, pero no puedes elegir los ingredientes.
Usar GitHub Pages con Jekyll es como usar una mezcla para pastel. Tú se la das a GitHub (el horno) y él te lo hornea y decora de una forma predecible.
Usar Pandoc como lo hemos hecho es como hacer el pastel desde cero. Tú controlas cada ingrediente y cada paso. Es más trabajo, pero el resultado es exactamente como tú quieres.

La Manera "Fácil" de GitHub: Jekyll

GitHub Pages tiene un motor secreto y integrado llamado Jekyll. Es como un mayordomo que, si le das las instrucciones correctas, él hace todo el trabajo por ti.

¿Cómo le das las instrucciones? Con el YAML Front Matter.

Ese bloque que ponías al principio de tus archivos ( --- ) no era solo para Pandoc. También es el lenguaje que entiende Jekyll.

---
title: "Mi Primer Post"
layout: post
permalink: /mi-primer-post/
---

# Mi contenido...

layout: post: Esto le dice a Jekyll: "Oye, usa la plantilla que se llama post.html para envolver el contenido de este archivo". GitHub tiene plantillas por defecto, así que aunque no la hayas creado tú, él sabe qué hacer.
permalink: /mi-primer-post/: Esto le dice: "La URL final para este artículo debe ser tusitio.com/mi-primer-post/, en lugar de un nombre feo con la fecha".

Ventaja de este método:

Es superfácil. Solo subes tu archivo .md a GitHub y Jekyll lo convierte automáticamente a HTML por ti. No necesitas ejecutar comandos en tu computadora.

Desventaja (y por qué te mostré Pandoc):

El problema con las fórmulas matemáticas: Jekyll, por sí solo, no convierte LaTeX ( $E=mc^2$ ) a MathML. Para eso, usa MathJax, que es una biblioteca de JavaScript que se carga en el navegador del usuario y trata de dibujar las fórmulas ahí.
- Esto puede ser lento (la página se tiene que cargar primero y luego renderizar las fórmulas).
- A veces no funciona bien en todos los navegadores o puede verse raro.
- Si tienes muchas fórmulas, la página puede sentirse pesada.

Nuestro Método: Pandoc "Desde Casa"

El método que te he estado enseñando es diferente:

Nosotros hacemos la conversión "en casa" (en nuestra computadora) con Pandoc.
Pandoc es superpoderoso y sí puede convertir LaTeX a MathML de forma nativa (con la opción --mathml).
El resultado es un archivo .html autónomo y estático que ya tiene las fórmulas "pintadas" directamente en el código. No necesita que JavaScript las dibuje después.
Luego, subimos ese HTML terminado a GitHub. Para GitHub, esto son solo archivos de texto. Jekyll no necesita hacer nada porque nosotros ya hicimos todo el trabajo.

¿Por qué es mejor para ti?

Las fórmulas se ven perfectas y se cargan rápido siempre.
Tienes control total sobre el diseño exacto con tus propias plantillas.
Una vez que tienes el script automatizado, es igual de fácil que el otro método. ¡Es solo hacer clic en un archivo!

Conclusión: Tú Tienes el Control

No te sientas presionado. Ahora conoces las dos formas:

La forma GitHub/Jekyll: Más sencilla para empezar, pero con posibles problemas de visualización en fórmulas.
Nuestra forma Pandoc: Un poco más de configuración inicial, pero da resultados perfectos y profesionales.

Mi recomendación para ti, que estás aprendiendo: Sigue usando el método de Pandoc que hemos estado practicando. Ya le has invertido el esfuerzo de entenderlo y te va a dar menos problemas a largo plazo. Ya tienes los scripts que automatizan todo, así que el trabajo duro ya está hecho.

Puedes explorar Jekyll más tarde, cuando te sientas más cómodo. Lo importante es que sepas que existe y que entiendas la diferencia.

¿Tiene sentido? Es completamente normal sentirse abrumado. Lo estás haciendo genial.

Capítulo 7. Haz que tu Blog Sea Encontrado y Accesible para Todos

Tu blog ya está vivo, se ve genial y tiene un dominio propio. ¡Es un logro enorme! Ahora vamos a asegurarnos de que la mayor cantidad de personas posible puedan encontrarlo y disfrutarlo. En este capítulo, hablaremos de tres cosas que pueden sonar técnicas pero que son más simples de lo que parecen: el SEO (para que Google te encuentre), las metaetiquetas sociales (para que tus enlaces se vean bonitos al compartirlos) y la accesibilidad (para que todos, sin excepción, puedan leer tu contenido).

7.1. SEO Sencillo: Ayudando a Google a Entender tu Sitio

El SEO (Search Engine Optimization) no tiene que ser magia negra. Se trata simplemente de ayudar a los motores de búsqueda como Google a entender de qué trata tu página para que puedan mostrársela a las personas correctas.

La mejor manera de hacerlo es con un lenguaje claro y una estructura lógica. Ya has empezado a hacerlo bien usando encabezados (#, ##) en Markdown.

Las Metaetiquetas Esenciales en tu Plantilla

Recuerda nuestra plantilla default.html? Vamos a mejorarla añadiendo algunas etiquetas importantes dentro de la sección <head>. No te preocupes, solo son líneas de texto que los buscadores leen.

Actualiza tu layouts/default.html:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>$title$ - Mi Blog Genial</title> <!-- Titulo más descriptivo -->

    <!-- La descripción es MUY importante para SEO -->
    <meta name="description" content="$description$">
    
    <!-- Palabras clave (menos importantes hoy, pero no duelen) -->
    <meta name="keywords" content="$if(keywords)$$keywords$$else$blog, tecnología, aprendizaje$endif$">
    
    <!-- Autor -->
    <meta name="author" content="$author$">

    <!-- Le dice a los buscadores qué URL es la "oficial", evita contenido duplicado -->
    <link rel="canonical" href="https://tudominio.com$url$" />

    <!-- Nuestros estilos -->
    <link rel="stylesheet" href="/assets/css/style.css">
    <link rel="stylesheet" href="/assets/css/prism.css">
    $if(math)$
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    $endif$
</head>

¿Qué cambió?

<title>: Ahora incluye no solo el título del post, sino también el nombre de tu blog. Esto se ve mejor en los resultados de búsqueda.
<meta name="description">: Esta es la descripción que aparece bajo el título en Google. Usa el campo description: de tu YAML para rellenarla.
<link rel="canonical">: Le dice a Google cuál es la dirección "maestra" de esta página, para que no se confunda si hay varias versiones.

Ahora, en tus archivos Markdown, puedes usar un YAML más completo:

---
title: "Cómo Aprendí a Usar GitHub Pages"
author: "Tu Nombre"
date: 2025-09-16
description: "Una guía sencilla para principiantes sobre cómo migrar de Bearblog a GitHub Pages con dominio propio y fórmulas matemáticas."
keywords: [github pages, bearblog, migración, blog técnico]
url: /posts/2025-09-16_como-aprendi-github-pages.html
---

7.2. Cómo se Ven tus Enlaces en Redes Sociales: Open Graph

¿Has visto que cuando compartes un enlace de YouTube en WhatsApp, sale una imagen, un título y una descripción? Eso se consigue con unas metaetiquetas especiales llamadas Open Graph. Sin ellas, tu enlace se verá como texto plano y aburrido.

Añade esto también en el <head> de tu default.html:

<!-- Metaetiquetas para Redes Sociales (Open Graph) - Hacen que los enlaces se vean bonitos -->
<meta property="og:title" content="$title$ - Mi Blog Genial" />
<meta property="og:description" content="$description$" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://tudominio.com$url$" />
<meta property="og:image" content="https://tudominio.com/assets/img/social-card.png" />
<meta property="og:site_name" content="Mi Blog Genial" />

<!-- Específicas para Twitter (opcional, pero buena práctica) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@tuusuario" /> <!-- Si tienes Twitter -->
<meta name="twitter:title" content="$title$" />
<meta name="twitter:description" content="$description$" />
<meta name="twitter:image" content="https://tudominio.com/assets/img/social-card.png" />

¿Qué necesitas hacer?

Crea una imagen para redes sociales: Diseña una imagen en Canva o con cualquier editor. Debe ser rectangular (una proporción de 1200x630 píxeles es ideal). Puede ser una imagen con el logo de tu blog y el título de tu post. Guárdala como social-card.png en tu carpeta assets/img/.
Actualiza las URLs: Asegúrate de que todas las URLs que empiezan con https://tudominio.com usen tu dominio real.

Ahora, cuando compartas un artículo en Facebook, LinkedIn o Twitter, se verá profesional y atractivo.

7.3. Accesibilidad: Tu Blog para Todos

La accesibilidad web (a menudo abreviada como A11y) significa que tu sitio puede ser usado por cualquier persona, incluidas aquellas con discapacidades visuales, motoras o auditivas que utilizan tecnologías de asistencia como lectores de pantalla.

Implementar accesibilidad no es solo lo correcto, sino que también mejora tu SEO, ya que Google valora los sitios bien estructurados.

Prácticas Sencillas de Accesibilidad:

Texto Alternativo en Imágenes (alt): Siempre que añadas una imagen, describe lo que se ve en ella. Esto lo leen los lectores de pantalla.
```
![Diagrama que muestra el flujo de trabajo de Pandoc convirtiendo Markdown a HTML](/assets/img/flujo-pandoc.png)
```
Encabezados Lógicos: Usa los encabezados (#, ##, ###) en orden. No saltes de un # (H1) a un ### (H3) sin poner un ## (H2) en medio. Esto crea un esquema que los lectores de pantalla pueden navegar.
Contraste de Colores: Asegúrate de que el color de tu texto y el fondo tengan suficiente contraste. Puedes usar herramientas gratuitas como WebAIM Contrast Checker para verificarlo. Los colores que te propusimos en el Capítulo 5 ya tienen un buen contraste.
Enlaces Descriptivos: En lugar de escribir "Haz clic aquí", escribe algo que describa el destino del enlace.
- ❌ Mal: Para ver mi post sobre Pandoc, haz clic aquí.
- ✅ Bien: Puedes leer mi guía completa sobre Pandoc para aprender más.

7.4. Verifica que Todo Funcione

Para SEO y Metaetiquetas:

Herramienta de Inspección de URLs de Google: Ve a Search Console, añade tu sitio y usa la herramienta para ver cómo Google ve tu página.
Probador de Open Graph de Facebook: Visita Facebook Sharing Debugger, pega la URL de tu post y haz clic en "Debug". Te mostrará cómo se verá tu enlace y te permitirá forzar una actualización si has hecho cambios.

Para Accesibilidad:

Lighthouse: Esta es una herramienta fantástica y GRATUITA que viene integrada en el navegador Chrome.
1. Abre tu página en Chrome.
2. Haz clic derecho y selecciona "Inspeccionar".
3. En la ventana que se abre, busca la pestaña "Lighthouse".
4. Asegúrate de que esté marcada la categoría "Accessibility".
5. Haz clic en "Generate report". ¡Te dará una puntuación y consejos específicos para mejorar!

Resumen del Capítulo 7

En este capítulo has hecho que tu blog sea visible y accesible:

SEO: Ayudaste a Google a entender tu contenido con metaetiquetas simples y un YAML Front Matter más completo.
Redes Sociales: Configuraste metaetiquetas Open Graph para que tus enlaces se vean atractivos y profesionales cuando los compartes.
Accesibilidad: Aprendiste prácticas básicas pero cruciales para asegurarte de que tu blog pueda ser disfrutado por toda tu audiencia.

Estos no son "trucos secretos", sino fundamentos de una buena ciudadanía web. Hacen que tu sitio sea más útil, ético y, en última instancia, más exitoso.

Próximo Paso: En el Capítulo 8, hablaremos del mantenimiento. Cómo actualizar tu contenido, cómo hacer copias de seguridad de tu repositorio de GitHub y qué hacer si algo sale mal. ¡Aprenderás a mantener tu blog funcionando sin problemas para siempre!

Capítulo 8. Mantenimiento Sin Estrés: Cómo Mantener Tu Blog Funcionando Para Siempre

¡Llegaste al capítulo final! Ahora tienes un blog que se ve profesional, es fácil de encontrar y accesible para todos. Pero, ¿qué pasa cuando quieres cambiar algo o si algo sale mal? No te preocupes. En este capítulo, te mostraré que mantener tu blog es tan fácil como crearlo. Aprenderás a actualizar contenido, hacer copias de seguridad y solucionar problemas comunes sin perder la calma.

8.1. Actualizar Tu Contenido: Un Proceso Que Ya Dominas

Agregar un nuevo artículo o actualizar uno existente es ahora pan comido gracias a la automatización que configuramos.

Para agregar un nuevo post:

Crea un nuevo archivo en la carpeta posts/ con un nombre claro, como 2025-09-17_mi-nuevo-post.md.
Escribe tu contenido usando Markdown y el YAML Front Matter, tal como aprendiste.
Ejecuta tu script de construcción (./build.sh en macOS/Linux o haciendo doble clic en build.bat en Windows).
¡Listo! El script convertirá el nuevo post a HTML y lo subirá a GitHub. En unos minutos, estará vivo en tu sitio.

Para editar un post existente:

Abre el archivo .md correspondiente en la carpeta posts/.
Haz tus cambios y guarda el archivo.
Ejecuta tu script de construcción nuevamente.
El script actualizará el archivo HTML y lo subirá a GitHub, reemplazando el anterior.

Recuerda: Siempre usa tu script automático. Es tu mejor amigo para evitar errores y ahorrar tiempo.

8.2. Copias de Seguridad: Tu Blog Está Más Seguro Que Nunca

Una de las mejores partes de usar GitHub es que tu contenido está automáticamente respaldado. Cada vez que haces un git push, GitHub guarda una copia completa de tu proyecto en sus servidores. Si tu computadora se rompe o pierdes tus archivos, puedes simplemente descargar todo de nuevo desde GitHub.

Cómo clonar tu repositorio en una computadora nueva:

Instala Git y Pandoc en la nueva computadora (como hiciste en el Capítulo 2).
Abre la terminal o símbolo del sistema.
Navega a la carpeta donde quieres guardar tu proyecto.

Ejecuta:

git clone https://github.com/tuusuario/tuusuario.github.io.git

(Reemplaza tuusuario con tu nombre de usuario de GitHub).

¡Eso es todo! Ahora tienes una copia local exacta de tu blog.

Para paz mental extra: haz una copia local ocasional.

Puedes comprimir toda tu carpeta del proyecto (la que tiene index.md, assets/, posts/, etc.) en un archivo ZIP y guardarla en Google Drive, Dropbox o un disco externo. Haz esto cada vez que hagas cambios importantes.

8.3. Solucionando Problemas Comunes: Tu Kit de Primeros Auxilios

A veces, las cosas no salen como esperamos. Pero no entres en pánico. Aquí tienes una guía rápida para los problemas más comunes.

❌ Mi dominio no funciona / muestra un error 404.

Causa probable: El DNS aún no se ha propagado o hay un error en la configuración.
Solución:
1. Verifica tu configuración DNS en Cloudflare nuevamente. Asegúrate de que los registros A y CNAME apunten a las direcciones correctas de GitHub (como se explicó en el Capítulo 4).
2. Verifica la configuración de "Custom domain" en la configuración de GitHub Pages de tu repositorio. Debe estar escrito exactamente igual que tu dominio.
3. Ten paciencia. Los cambios de DNS pueden tardar hasta 48 horas en propagarse por completo en internet. Usa una herramienta como WhatsMyDNS.net para verificar el progreso.

❌ Mi sitio no usa HTTPS (el candado no aparece).

Causa probable: GitHub está aún procesando tu certificado SSL.
Solución:
1. En la configuración de GitHub Pages, asegúrate de que la casilla "Enforce HTTPS" esté marcada.
2. Si acabas de agregar tu dominio, espera una hora. GitHub necesita tiempo para obtener e instalar el certificado.
3. Si sigue sin funcionar, intenta desmarcar y volver a marcar la casilla "Enforce HTTPS".

❌ Los cambios que hice no aparecen en el sitio.

Causa probable: Olvidaste ejecutar el script de construcción o hacer git push.
Solución:
1. Abre tu terminal y ejecuta tu script de construcción (./build.sh o build.bat).
2. Asegúrate de que el script terminó sin errores.
3. Verifica que los archivos HTML nuevos se hayan creado en tu carpeta local.
4. Si usas el script automático que incluye git push, tus cambios ya se deberían estar subiendo. Si no, ejecuta manualmente en la terminal:
```
git add .
git commit -m "Descripción de los cambios"
git push origin main
```

❌ Las fórmulas matemáticas no se ven bien.

Causa probable: Olvidaste incluir la opción --mathml en el comando de Pandoc.
Solución: ¡Usa tu script! El script ya incluye esta opción, así que si lo usas, este error no debería ocurrir. Si estás haciendo comandos manuales, recuerda agregar --mathml.

❌ Veo el código Markdown en bruto en el navegador.

Causa probable: Subiste el archivo .md en lugar del .html generado.
Solución: Nunca subas archivos .md directamente a GitHub (a menos que estés usando Jekyll). Siempre usa Pandoc para convertirlos a HTML primero y luego sube los archivos .html. Tu script se encarga de esto.

8.4. Revisión Periódica de Salud de Tu Sitio

Cada pocos meses, dedica 5 minutos a hacer esta checklist rápida:

¿Funciona mi dominio? Ábrelo en un navegador.
¿El certificado HTTPS (el candado) está activo?
¿Se ven bien las fórmulas matemáticas en un post?
Ejecuta un reporte de Lighthouse en Chrome (como aprendiste en el Capítulo 7) para verificar que la accesibilidad y el SEO siguen en buen estado.

Conclusión: Eres Autosuficiente

Mira cómo empezaste: migrando desde una plataforma sencilla. Ahora, tienes un sitio bajo tu control total, con un dominio personalizado, diseño propio y un flujo de trabajo automatizado.

Las cosas más importantes que aprendiste:

Control: Tú decides cómo se ve y funciona tu sitio.
Automatización: Los scripts hacen el trabajo pesado por ti.
Resiliencia: Tu contenido está seguro en GitHub.
Habilidad: Puedes solucionar problemas comunes con confianza.

No hay nada que puedas romper que no puedas arreglar. GitHub tiene un historial de todos tus cambios, así que siempre puedes volver atrás si es necesario.

Tu blog ya no es solo un hobby; es un activo profesional que puedes mantener para siempre, sin costos ocultos. ¡Felicidades por haber llegado hasta aquí!

Capítulo 9: Conclusión - Tu Viaje Solo Acaba de Comenzar

Recorriendo el Camino Recorrido

¡Felicidades! Has llegado al final de esta guía, pero esto es realmente solo el comienzo de tu viaje como publicador web independiente. Mira todo lo que has logrado:

Desde esos primeros pasos tentativos con Markdown hasta configurar un flujo de publicación automatizado, has construido algo remarkable. Has transformado tu contenido de un formato limitado en una plataforma a un sistema bajo tu control completo, capaz de publicar en múltiples formatos y plataformas.

El Poder que Ahora Tienes en Tus Manos

Lo más importante que has ganado no es solo un blog, sino autonomía digital. Ahora:

Controlas tu contenido: Ya no dependes de las limitaciones de una plataforma
Decides tu identidad: Desde el dominio hasta el diseño, todo refleja tu estilo
Eres multi-formato: Tu contenido puede vivir en web, eBooks, PDFs y más
Tienes las herramientas: Sabes solucionar problemas y mejorar tu sitio

Los Anexos: Tu Caja de Herramientas para el Futuro

Los anexos que hemos incluido no son appendixes decorativos, son trampolines para tu próxima fase de crecimiento. Cada uno representa una dirección en la que puedes especializarte:

Automatización con GitHub Actions/Netlify: Escalabilidad profesional
JavaScript interactivo: Experiencias de usuario ricas
CSS profesional: Diseño visual impactante
Publicación multi-formato: Alcance ampliado
LaTeX y motores de renderizado: Excelencia técnica

No necesitas dominar todos estos ámbitos a la vez. Elige lo que más te entusiasme y profundiza allí primero.

Mantén la Curiosidad y la Experimentación

La tecnología web evoluciona constantemente, pero los fundamentos que has aprendido aquí te servirán por años. La clave está en:

Seguir aprendiendo: La web es un ecosistema rico y en constante cambio
Experimentar sin miedo: Tus scripts de build y control de versiones te permiten probar cosas nuevas sin romper tu sitio
Participar en comunidades: GitHub, Stack Overflow, y foros técnicos están llenos de personas que comparten tus intereses

Tu Blog como Laboratorio Personal

Tu sitio ahora es más que un blog: es tu laboratorio personal, tu portafolio y tu plataforma de aprendizaje. Úsalo para:

Probar nuevas técnicas de diseño
Experimentar con diferentes formatos de contenido
Desarrollar tus habilidades técnicas
Construir tu presencia digital profesional

El Viaje Continúa

Recuerda que cada experto fue alguna vez un principiante. Esas primeras líneas de código que te parecieron misteriosas ahora son herramientas que manejas con confianza. Las dudas que tenías sobre DNS y deployment ahora son procedimientos que dominas.

Este no es un final, sino un punto de partida. Has construido los cimientos - ahora puedes elegir en qué dirección crecer.

¿Qué te emociona aprender a continuación? ¿Diseño avanzado con CSS Grid? ¿Aplicaciones web interactivas con JavaScript? ¿Tal vez generar libros electrónicos complejos? El camino está abierto y las herramientas están en tus manos.

¡El viaje continúa, y no podemos esperar a ver qué creas a continuación!

Anexo 1: Automatización y Despliegue Avanzado

Tu Trabajo Está Seguro: Controla Quién Ve Tu "Cocina"

Es completamente normal querer proteger tu trabajo y tu originalidad. Tal vez te preocupa que alguien pueda copiar tus ideas o tu código si todo está abierto al público. ¡Es una preocupación válida!

La buena noticia es que sí puedes tener privacidad y un blog público al mismo tiempo. Aquí es donde las plataformas modernas como Netlify muestran su poder.

GitHub Pages es fantástico y gratis, pero tiene una regla: para usar su hosting gratuito, tu repositorio debe ser público. Es como si para usar una plaza pública para una exposición, tuvieras que dejar tus apuntes y bocetos encima de la mesa para que cualquiera los vea.

Netlify cambia ese juego. Con Netlify, tú decides:

Mantener tu repositorio PRIVADO en GitHub: Solo tú (y las personas que tú invites) pueden ver el código fuente, tus archivos Markdown y tus scripts. Tu "cocina" está fuera del vista del público.
Tener un sitio web PÚBLICO y profesional: Netlify tiene permiso para acceder a tu repositorio privado, ejecutar tu script de construcción y publicar solo el resultado final (los archivos HTML, CSS e imágenes) en la web.

¿Cómo funciona esta magia?

Le das permiso a Netlify (una herramienta de confianza) para que "mire" tu repositorio privado en GitHub.
Netlify toma una "foto" instantánea de tu código cada vez que haces un cambio.
En sus propios servidores, ejecuta tu script build.sh para generar el sitio HTML.
Finalmente, publica solo esos archivos HTML finales en tu dominio. Tu código fuente original (los archivos .md) nunca se hace público.

Esto significa que puedes ser celoso de tu trabajo original y al mismo tiempo compartir abiertamente tus ideas con el mundo. Es la mejor combinación para quien está empezando y quiere sentirse seguro.

Configurarlo es muy simple: Cuando vinculas tu cuenta de GitHub a Netlify, este te mostrará una lista de todos tus repositorios, tanto públicos como privados. Simplemente eliges tu repositorio privado y Netlify se encarga del resto, solicitando los permisos necesarios de forma automática.

De Hacerlo Tú Mismo a que la Máquina lo Haga por Ti

Ahora, hablemos de automatización. Has aprendido a construir y desplegar tu blog manualmente con scripts. ¡Es un gran logro! Pero ahora vamos a dar un paso más hacia la automatización profesional. Imagina que cada vez que escribes un nuevo post y lo subes a GitHub, tu sitio se reconstruye y se actualiza automáticamente, sin que tú tengas que ejecutar ningún script. Eso es lo que hacen GitHub Actions y Netlify.

GitHub Actions: El Robot Asistente de GitHub

GitHub Actions es un sistema de integración y despliegue continuo (CI/CD) integrado en GitHub. En términos simples, es un robot que vive en GitHub y al que puedes decir: "Cada vez que yo suba nuevos cambios a mi repositorio, ejecuta estos pasos por mí".

¿Por qué usarlo?

Automatización total: Olvídate de ejecutar scripts manualmente.
Consistencia: El robot siempre ejecuta los mismos pasos de la misma manera, eliminando errores humanos.
Portabilidad: Tu proceso de construcción está definido en código dentro de tu repositorio. Cualquier persona (o cualquier máquina) puede replicarlo.

Cómo configurar un Flujo Básico con GitHub Actions

Crea el archivo de configuración: En tu repositorio local, crea una nueva carpeta y un archivo con esta ruta exacta: .github/workflows/deploy.yml
Copia y pega el siguiente código en el archivo deploy.yml:

name: Build and Deploy to GitHub Pages # Nombre de tu flujo de trabajo

on: # Este flujo se activa...
  push: # ...cada vez que haces un push...
    branches: [ main ] # ...a la rama principal (main)

jobs: # Los trabajos que se ejecutarán
  build-and-deploy: # Un trabajo llamado "build-and-deploy"
    runs-on: ubuntu-latest # Se ejecuta en una máquina virtual con Ubuntu

    steps: # Los pasos a seguir dentro del trabajo
    # Paso 1: Obtener una copia de tu código del repositorio
    - name: Checkout code
      uses: actions/checkout@v3

    # Paso 2: Instalar Pandoc
    - name: Install Pandoc
      run: sudo apt-get install -y pandoc

    # Paso 3: Construir el sitio HTML (¡Usa TU script!)
    - name: Build site with Pandoc
      run: chmod +x ./build.sh && ./build.sh

    # Paso 4: Desplegar el resultado a GitHub Pages
    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }} # Token de seguridad que GitHub provee automáticamente
        publish_dir: ./ # La carpeta desde la que se debe desplegar (la raíz)

Sube los cambios a GitHub: Guarda el archivo, haz commit y push a tu repositorio.

git add .github/workflows/deploy.yml
git commit -m "Añadir GitHub Action para despliegue automático"
git push origin main

¡Observa la magia!: Ve a la pestaña "Actions" en tu repositorio de GitHub. Verás que tu flujo de trabajo se está ejecutando. Cuando termine (después de 1-2 minutos), tu sitio se habrá actualizado automáticamente.

Consejo: Asegúrate de que tu script build.sh esté en la raíz de tu repositorio y sea ejecutable (chmod +x build.sh). GitHub Actions lo usará para construir tu sitio.

Netlify: Una Alternativa (o Complemento) Súper Poderosa

Netlify es una plataforma de despliegue moderno que va un paso más allá. No solo automatiza el despliegue, sino que ofrece funciones adicionales como formularios, funciones serverless y una CDN global ultrarrápida.

¿Por qué considerar Netlify?

Despliegues instantáneos: Suele ser más rápido que GitHub Pages.
Preview de cambios: Puedes ver cómo quedaría un cambio antes de mezclarlo con tu rama principal.
Funcionalidades extra: Ofrece muchas herramientas útiles para sitios estáticos de forma gratuita.
Soporte para repositorios privados: Como explicamos al inicio, esta es una ventaja clave si quieres mantener tu código en privado.

Cómo configurar Netlify

Regístrate en Netlify: Ve a netlify.com y crea una cuenta con tu proveedor de Git (GitHub).
Conecta tu repositorio:
- En el dashboard de Netlify, haz clic en "Add new site" > "Import an existing project".
- Conéctate a GitHub y elige tu repositorio (¡puede ser el privado!).
Configura la construcción:
- Build command: chmod +x build.sh && ./build.sh (o simplemente ./build.sh si ya es ejecutable).
- Publish directory: . (un punto, ya que tus archivos HTML se generan en la raíz).
¡Despliega!: Netlify hará lo mismo que GitHub Actions: cada vez que hagas push a main, clonará tu repo, ejecutará tu script y desplegará los archivos resultantes. Te dará una URL de Netlify (como mi-blog-genial.netlify.app) pero también puedes configurar tu dominio personalizado exactamente como lo hiciste con GitHub Pages.

Usando Netlify con GitHub Actions

Puedes combinar lo mejor de ambos mundos: usar GitHub Actions para construir tu sitio y Netlify para desplegarlo. Esto es útil si quieres usar las funciones avanzadas de Netlify pero prefieres controlar el proceso de construcción con tus propios scripts.

# Ejemplo de paso adicional para desplegar a Netlify
- name: Deploy to Netlify
  run: |
    npm install -g netlify-cli
    netlify deploy --dir=. --prod --auth=${{ secrets.NETLIFY_AUTH_TOKEN }} --site=${{ secrets.NETLIFY_SITE_ID }}

Para esto, necesitarías crear "secretos" en tu repositorio de GitHub (NETLIFY_AUTH_TOKEN y NETLIFY_SITE_ID) con los valores de tu cuenta de Netlify. Esto es un poco más avanzado, pero la documentación de Netlify te guía paso a paso.

¿Qué Elegir?

GitHub Actions + GitHub Pages: Ideal si quieres que todo esté en un solo lugar (GitHub), es completamente gratuito y no te importa que tu repositorio sea público.
Netlify: Ideal si quieres más velocidad, funciones adicionales, un flujo de trabajo con previews de cambios y, lo más importante, la capacidad de usar un repositorio privado.

No tengas miedo de experimentar. Puedes configurar ambos y ver cuál te gusta más. La belleza de tener tu contenido en Markdown y tu proceso en scripts es que eres libre de desplegarlo en cualquier lugar.

Recuerda: El código de ejemplo que te hemos dado es una plantilla. Te animamos a buscar en la documentación de GitHub Actions y Netlify para adaptarlo a tus necesidades exactas. ¡Hay un mundo de posibilidades esperándote

Anexo 2: Un Toque de Interactividad con JavaScript

Haz Tu Sitio Más Dinámico y Atractivo

Hasta ahora, tu blog es estático: muestra tu contenido maravillosamente, pero no puede responder a las acciones del usuario. JavaScript (JS) es el lenguaje que le da vida a la web, permitiendo crear experiencias interactivas. Desde un simple menú desplegable hasta complejas visualizaciones de datos, JS es lo que hace que una página web se sienta como una aplicación.

La belleza de tener tu propio sitio es que tú decides qué funcionalidades añadir, sin estar limitado por lo que una plataforma como Bearblog te permita hacer.

¿Por qué usar JavaScript?

Interactividad: Responder a clics, mostrar/ocultar elementos, validar formularios.
Dinamismo: Actualizar partes de la página sin recargarla completa.
Enriquecimiento: Incrustar mapas, galerías de imágenes interactivas, o herramientas complejas directamente en tus artículos.

Cómo Añadir JavaScript a Tu Sitio

Añadir JS es tan simple como añadir CSS. Se hace enlazando un archivo externo o escribiendo código directamente en tu plantilla HTML.

Crea una carpeta y un archivo para tus scripts: Dentro de tu carpeta assets, crea una subcarpeta llamada js. Dentro de ella, crea un archivo llamado scripts.js.
Enlaza el archivo JS en tu plantilla: Abre tu layouts/default.html y añade la siguiente línea justo antes de la etiqueta de cierre </body>. Esto asegura que el HTML se cargue antes que el JS, haciendo que la página se sienta más rápida.

    <!-- ... el resto de tu HTML ... -->
    <script src="/assets/js/scripts.js"></script>
</body>

Ejemplos Sencillos para Empezar

Aquí tienes tres ejemplos prácticos que puedes copiar, pegar y adaptar inmediatamente.

1. Botón "Volver al Principio"

Un clásico útil para posts largos.

En tu assets/js/scripts.js:

// Crea el botón
const backToTopButton = document.createElement("button");
backToTopButton.innerHTML = "↑"; // Usa un emoji o texto
backToTopButton.id = "back-to-top-btn";
document.body.appendChild(backToTopButton);

// Estilo básico con JS (¡mejor hacerlo en CSS!)
backToTopButton.style.position = "fixed";
backToTopButton.style.bottom = "20px";
backToTopButton.style.right = "20px";
backToTopButton.style.display = "none"; // Oculta el botón al inicio

// Muestra u oculta el botón al hacer scroll
window.addEventListener('scroll', () => {
    if (window.scrollY > 300) {
        backToTopButton.style.display = "block";
    } else {
        backToTopButton.style.display = "none";
    }
});

// Haz que al hacer clic, suba suavemente
backToTopButton.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});

Ahora, añade este estilo en tu assets/css/style.css para que se vea bien:

#back-to-top-btn {
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 1000;
}
#back-to-top-btn:hover {
    background-color: var(--color-primary-dark);
}

2. Modo Oscuro con Almacenamiento Local

Permite a tus visitantes elegir un tema y recordar su preferencia.

En tu assets/js/scripts.js:

// 1. Busca el botón toggle en el HTML
const darkModeToggle = document.getElementById('dark-mode-toggle');

// 2. Comprueba si la preferencia está guardada en el navegador
if (localStorage.getItem('theme') === 'dark') {
    document.body.classList.add('dark-mode');
}

// 3. Cambia el modo y guarda la preferencia al hacer clic
darkModeToggle.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
    // Guarda la preferencia
    if (document.body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

Añade el botón en tu plantilla (default.html), por ejemplo, en el menú de navegación:

<nav>
    <ul class="nav-links">
        <li><a href="/index.html">Inicio</a></li>
        <li><a href="/about.html">Acerca de</a></li>
        <li><button id="dark-mode-toggle">🌙/☀️</button></li>
    </ul>
</nav>

Añade las reglas CSS para el modo oscuro en tu style.css:

body.dark-mode {
    --color-background: #121212;
    --color-background-alt: #1e1e1e;
    --color-text: #eeeeee;
    --color-text-light: #a0a0a0;
    --color-border: #333333;
}

3. Galería de Imágenes Sencilla

Permite hacer clic en una imagen miniatura para verla en grande.

HTML (en tu post Markdown, usarías HTML puro):

<div class="gallery">
    <img src="/assets/img/thumb1.jpg" alt="Descripción 1" class="gallery-thumb">
    <img src="/assets/img/thumb2.jpg" alt="Descripción 2" class="gallery-thumb">
</div>
<div id="image-modal" style="display: none;">
    <span id="close-modal">&times;</span>
    <img id="modal-image" src="" alt="">
</div>

JS en scripts.js:

// Galería simple
document.querySelectorAll('.gallery-thumb').forEach(thumb => {
    thumb.addEventListener('click', () => {
        const modal = document.getElementById('image-modal');
        const modalImg = document.getElementById('modal-image');
        modal.style.display = "block";
        modalImg.src = thumb.src; // Usa la misma imagen, podrías tener una versión grande
    });
});

// Cerrar la modal
document.getElementById('close-modal').addEventListener('click', () => {
    document.getElementById('image-modal').style.display = "none";
});

Necesitarías añadir bastante CSS para que la modal (ventana emergente) se vea bien. Esto nos lleva al siguiente punto.

No Reinventes la Rueda: Usa Librerías

Escribir todo el código desde cero para funcionalidades complejas es difícil y lleva mucho tiempo. La comunidad de JavaScript ha creado librerías (código preescrito) para casi todo.

Cómo incluir una librería en tu sitio:

Encuentra la librería. Algunas populares para blogs son:
- Lightbox: Para galerías de imágenes elegantes (https://lokeshdhakar.com/projects/lightbox2/).
- Disqus: Para añadir comentarios a tus posts (https://disqus.com/).
- Chart.js: Para crear gráficos y visualizaciones de datos (https://www.chartjs.org/).
Sigue sus instrucciones de instalación. Normalmente implican:
- Enlazar un archivo CSS en el <head>.
- Enlazar un archivo JS antes de </body>.
- Inicializar la librería con un pequeño fragmento de código JS propio.

Ejemplo: Usando Lightbox para una galería

Descarga los archivos de Lightbox y ponlos en tus carpetas assets/css y assets/js.

Enlázalos en tu default.html:

<head>
    ...
    <link rel="stylesheet" href="/assets/css/lightbox.min.css">
</head>
<body>
    ...
    <script src="/assets/js/lightbox-plus-jquery.min.js"></script>
    <script src="/assets/js/scripts.js"></script>
</body>

Usa la sintaxis que indica Lightbox en tus posts:

<a href="/assets/img/image1.jpg" data-lightbox="vacaciones" data-title="Mi viaje">
    <img src="/assets/img/thumb1.jpg" alt="Vacaciones">
</a>

Dónde Encontrar Inspiración y Ayuda

CodePen (https://codepen.io/): Un universo de ejemplos de HTML, CSS y JS que puedes copiar y adaptar. Busca "read more toggle", "image gallery", etc.
CSS-Tricks (https://css-tricks.com/): Tutoriales y guías sobre cómo hacer cosas específicas.
MDN Web Docs (https://developer.mozilla.org/): La documentación más completa y confiable para JavaScript y tecnologías web.

Consejo Final: Empieza con cosas pequeñas. Añade un botón, un toggle, un pequeño efecto. Verás cómo estas pequeñas victorias te darán la confianza para abordar proyectos más grandes. Tu sitio es tu lienzo, y JavaScript es uno de los pinceles más potentes que tienes para pintarlo.

Anexo 2 bis: Un Toque de Interactividad con JavaScript

Dos Librerías Esenciales para un Blog Técnico

En el mundo de los blogs técnicos, dos librerías de JavaScript se destacan por su utilidad y potencia: Prism.js para resaltar código y MathJax para renderizar fórmulas matemáticas. Son las herramientas profesionales que transforman bloques de texto aburridos en código colorido y fórmulas elegantes.

Prism.js: El Arte de Resaltar Código

Prism.js es una librería ligera y poderosa que convierte tus bloques de código estáticos en experiencias visuales intuitivas y coloridas, haciendo que tu código sea más legible y comprensible.

Cómo Integrar Prism.js en Tu Sitio

Descarga Personalizada:
- Ve al sitio de Prism.js
- Selecciona los lenguajes que usas frecuentemente (Bash, JavaScript, Python, etc.)
- Elige un tema visual (Okaidia es excelente para modo oscuro)
- Descarga los archivos prism.css y prism.js

Estructura de Carpetas:

tu-sitio/
└── assets/
    ├── css/
    │   └── prism.css
    └── js/
        └── prism.js

Inclusión en Tu Plantilla: Añade estas líneas en tu layouts/default.html:

<head>
    <!-- ... otros elementos ... -->
    <link rel="stylesheet" href="/assets/css/prism.css">
</head>
<body>
    <!-- ... tu contenido ... -->
    <script src="/assets/js/prism.js"></script>
</body>

Uso en Tus Artículos: Encierra tu código entre triple backticks especificando el lenguaje:

```python
def fibonacci(n):
    """Genera secuencia Fibonacci hasta n términos"""
    a, b = 0, 1
    for _ in range(n):
        print(a, end=' ')
        a, b = b, a + b
        
fibonacci(10)  # Output: 0 1 1 2 3 5 8 13 21 34
```

Resultado:

def fibonacci(n):
    """Genera secuencia Fibonacci hasta n términos"""
    a, b = 0, 1
    for _ in range(n):
        print(a, end=' ')
        a, b = b, a + b
        
fibonacci(10)  # Output: 0 1 1 2 3 5 8 13 21 34

Características Avanzadas de Prism.js

Líneas destacadas: Resalta líneas específicas para explicarlas
Numeración de líneas: Muestra números para referenciar fácilmente
Plugin de línea de comandos: Estiliza los prompts de terminal
Copiar al portapapeles: Añade un botón para copiar código con un plugin

Ejemplo con líneas destacadas:

```python{1,3-4}
def factorial(n):
    if n == 0:
        return 1  # Caso base
    else:
        return n * factorial(n-1)  # Llamada recursiva
```

MathJax: Belleza Matemática en Tu Blog

MathJax es un motor de visualización matemática que convierte notación LaTeX en hermosas ecuaciones renderizadas, perfecto para blogs científicos, técnicos o educativos.

Integración de MathJax

Incluye MathJax en Tu Plantilla: Añade este código en tu layouts/default.html:

<head>
    <!-- ... otros elementos ... -->
    <script>
        MathJax = {
            tex: {
                inlineMath: [['$', '$'], ['\\(', '\\)']],
                displayMath: [['$$', '$$'], ['\\[', '\\]']]
            },
            svg: {
                fontCache: 'global'
            }
        };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>

Uso en Tus Artículos: Escribe fórmulas usando sintaxis LaTeX entre delimitadores:

La famosa ecuación de Einstein: $E = mc^2$ (en línea).

O en modo display:

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

Sistema de ecuaciones:

$$
\begin{align*}
x + y &= 5 \\
2x - y &= 1
\end{align*}
$$

Resultado: La famosa ecuación de Einstein: $E = m c^{2}$ (en línea).

O en modo display:

\int_{- \infty}^{\infty} e^{- x^{2}} d x = \sqrt{π}

Sistema de ecuaciones:

\begin{matrix} x + y & = 5 \\ 2 x - y & = 1 \end{matrix}

Configuración Avanzada de MathJax

Personaliza MathJax para que se adapte a tus necesidades:

<script>
MathJax = {
    tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        displayMath: [['$$', '$$'], ['\\[', '\\]']],
        tags: 'ams',  // Numeración de ecuaciones
        macros: {
            // Define tus propios comandos
            RR: "\\mathbb{R}",
            bold: ["\\mathbf{#1}", 1]
        }
    },
    chtml: {
        scale: 0.9  // Escala de las ecuaciones
    }
};
</script>

Combinando Ambas Librerías

Para artículos técnicos avanzados, puedes combinar ambas librerías:

El algoritmo para calcular la transformada de Fourier discreta:

```python
import numpy as np

def dft(x):
    """Calcula la Transformada Discreta de Fourier"""
    N = len(x)
    n = np.arange(N)
    k = n.reshape((N, 1))
    M = np.exp(-2j * np.pi * k * n / N)
    return np.dot(M, x)
```

Que se basa en la fórmula:

$$
X_k = \sum_{n=0}^{N-1} x_n \cdot e^{-\frac{2\pi i}{N} k n}
$$

Donde $X_k$ es el k-ésimo componente de frecuencia.

Optimización del Rendimiento

Para mejorar el rendimiento de tu sitio:

Prism.js: Descarga solo los lenguajes que necesitas
MathJax: Usa la versión comprimida y considera precargarlo:

<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">

Recursos Adicionales

Temas de Prism: Prism Theme Gallery
Documentación de MathJax: MathJax Documentation
Ejemplos de LaTeX: LaTeX Wiki

Estas dos librerías transformarán tu blog técnico en una experiencia profesional y visualmente atractiva, mostrando tanto tu código como tus fórmulas con la claridad y elegancia que se merecen.

Anexo 3: Domina el Diseño con CSS - Desde Cero hasta Profesional

Da Vida y Personalidad a Tu Blog con CSS

CSS (Cascading Style Sheets) es el lenguaje que controla la presentación visual de tu sitio web. Si HTML es la estructura de tu casa (paredes, puertas, ventanas), CSS es la pintura, la decoración y el diseño de interiores que la hace única y acogedora.

3.1. Conceptos Fundamentales que Debes Conocer

Selectores: Cómo Decirle a Qué Elemento Aplicar Estilos

Los selectores son como direcciones que le indican al navegador qué elementos HTML quieres estilizar.

/* Selector de elemento (afecta a TODAS las etiquetas <p>) */
p {
  color: #333;
}

/* Selector de clase (afecta a elementos con class="destacado") */
.destacado {
  background-color: yellow;
}

/* Selector de ID (afecta al elemento con id="header") */
#header {
  height: 200px;
}

/* Selector combinado (afecta a <a> dentro de elementos con class="nav") */
.nav a {
  text-decoration: none;
}

La Caja (Box Model): El Concepto Más Importante

Cada elemento en una página web es una caja rectangular con estas propiedades:

.caja-ejemplo {
  width: 300px;         /* Ancho del contenido */
  height: 200px;        /* Alto del contenido */
  padding: 20px;        /* Espacio interno */
  border: 2px solid black; /* Borde */
  margin: 30px;         /* Espacio externo */
  box-sizing: border-box; /* ¡Importante! Hace que padding y border no aumenten el tamaño total */
}

Tip: Siempre usa box-sizing: border-box; para evitar dolores de cabeza con los cálculos de tamaño.

3.2. Layout Moderno con Flexbox y Grid

Flexbox: Para Diseños en 1 Dimensión

Perfecto para menús de navegación, alineación vertical, y distribuir elementos en una fila o columna.

.contenedor-flex {
  display: flex;
  justify-content: space-between; /* Distribuye espacio entre elementos */
  align-items: center; /* Centra verticalmente */
  gap: 20px; /* Espacio entre elementos */
}

/* Ejemplo práctico: menú de navegación */
.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  color: var(--color-primary);
  transition: color 0.3s ease; /* Transición suave al pasar el mouse */
}

.nav-links a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

CSS Grid: Para Diseños en 2 Dimensiones

Ideal para layouts complejos, galerías de imágenes, y diseños de cuadrícula.

.contenedor-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 columnas: ancho flexible */
  grid-gap: 20px;
}

/* Layout típico de blog */
.layout-blog {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 250px 1fr;
  gap: 2rem;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

3.3. Diseño Responsive: Que Tu Blog se Vea Bien en Cualquier Dispositivo

El diseño responsive asegura que tu sitio se adapte a diferentes tamaños de pantalla.

Media Queries: La Herramienta Clave

/* Estilos base (móviles first) */
.contenedor {
  padding: 1rem;
}

/* Tablet: 768px en adelante */
@media (min-width: 768px) {
  .contenedor {
    padding: 2rem;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Desktop: 1024px en adelante */
@media (min-width: 1024px) {
  .contenedor {
    max-width: 960px;
  }
  
  .layout-blog {
    grid-template-columns: 300px 1fr;
  }
}

Unidades Responsive

.articulo {
  /* Unidades relativas que se adaptan al tamaño base de fuente */
  font-size: 1rem; 
  line-height: 1.6;
  
  /* Viewport units: relativas al tamaño de la pantalla */
  height: 100vh; /* 100% del alto de la pantalla */
  width: 80vw;   /* 80% del ancho de la pantalla */
  
  /* Unidades flexibles para layouts */
  padding: 2rem; /* Se escala con el tamaño base de fuente */
  margin: 0 auto;
  max-width: 70ch; /* Limita el ancho para mejor lectura */
}

3.4. Animaciones y Transiciones

Agrega interactividad y personalidad a tu sitio con animaciones sutiles.

/* Transición suave para enlaces */
a {
  transition: all 0.3s ease;
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-dark);
  transform: translateY(-2px); /* Efecto de levitación */
}

/* Animación de aparición */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.articulo {
  animation: fadeIn 0.6s ease-out;
}

/* Animación para botones */
.boton {
  background: var(--color-primary);
  color: white;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
}

.boton:hover {
  background: var(--color-primary-dark);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

3.5. Variables CSS: Mantén la Consistencia

Las variables CSS (custom properties) te permiten definir valores que puedes reutilizar en todo tu CSS.

:root {
  /* Colores principales */
  --color-primary: #2563eb;
  --color-primary-dark: #1e40af;
  --color-background: #ffffff;
  --color-text: #1f2937;
  
  /* Tipografía */
  --font-family: 'Inter', system-ui, sans-serif;
  --font-size-base: 1rem;
  --line-height: 1.6;
  
  /* Espaciado */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
  
  /* Bordes */
  --border-radius: 0.5rem;
  --border-width: 1px;
}

.articulo {
  font-family: var(--font-family);
  color: var(--color-text);
  line-height: var(--line-height);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
}

.boton {
  background: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-md);
}

.boton:hover {
  background: var(--color-primary-dark);
}

3.6. Mejores Prácticas y Consejos Profesionales

Organización de Archivos CSS

css/
├── base/
│   ├── _reset.css      /* Normaliza estilos entre navegadores */
│   ├── _typography.css /* Estilos de texto */
│   └── _variables.css  /* Variables CSS */
├── components/
│   ├── _buttons.css    /* Estilos de botones */
│   ├── _cards.css      /* Tarjetas de contenido */
│   └── _navigation.css /* Navegación */
├── layout/
│   ├── _grid.css       /* Sistema de grid */
│   ├── _header.css     /* Cabecera */
│   └── _footer.css     /* Pie de página */
└── main.css            /* Archivo principal que importa todos los demás */

Performance y Optimización

/* Evita estos problemas comunes */

/* ❌ Específicidad excesiva */
#header .nav ul li a { color: blue; }

/* ✅ Mejor especificidad */
.nav-link { color: blue; }

/* ❌ Demasiadas animaciones pesadas */
* { transition: all 0.5s ease; }

/* ✅ Animaciones optimizadas */
.elemento { transition: opacity 0.3s ease; }

/* ❌ !important (último recurso) */
.texto { color: red !important; }

/* ✅ Mejor especificidad en lugar de !important */
.contenedor .texto { color: red; }

Herramientas Útiles

DevTools del Navegador: Aprende a usar las herramientas de desarrollo de tu navegador para inspeccionar y debuggear CSS.
CSS Grid Generator: Herramientas online para visualizar y generar código Grid.
Flexbox Froggy: Juego interactivo para aprender Flexbox.
Autoprefixer: Añade automáticamente los prefijos de vendor para compatibilidad entre navegadores.

3.7. Ejemplo Práctico Completo

/* Sistema de diseño completo */
:root {
  /* Sistema de colores */
  --color-primary: #2563eb;
  --color-primary-dark: #1e40af;
  --color-secondary: #64748b;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  
  --color-background: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #1f2937;
  --color-text-light: #64748b;
  
  --border-radius: 0.5rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

/* Reset básico */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-background);
}

/* Componente: Card */
.card {
  background: var(--color-surface);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  color: var(--color-primary);
}

/* Layout responsivo */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.grid {
  display: grid;
  gap: var(--spacing-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

3.8. Recursos para Seguir Aprendiendo

MDN Web Docs: La documentación más completa sobre CSS.
CSS-Tricks: Tutoriales y guías excelentes.
Frontend Mentor: Desafíos prácticos para mejorar tus habilidades.
YouTube Channels: Kevin Powell, Web Dev Simplified.

Recuerda: La mejor manera de aprender CSS es practicando. Experimenta, comete errores, inspecciona sitios web que te gusten y no tengas miedo de probar cosas nuevas. Tu blog es el lugar perfecto para practicar y desarrollar tus habilidades de diseño.

Anexo 4: Publica en Múltiples Formatos con Pandoc

Lleva Tu Contenido Más Allá de la Web

Hasta ahora has aprendido a crear un blog web impresionante, pero ¿sabías que con el mismo contenido Markdown puedes generar eBooks, documentos PDF y mucho más? Pandoc es como una imprenta digital que puede convertir tus ideas en múltiples formatos profesionales.

4.1. Por Qué Publicar en Múltiples Formatos

Llegar a más audiencias: Algunos prefieren leer en eBooks, otros en papel
Contenido fuera de línea: Perfecto para estudiar o leer sin conexión
Portabilidad: Los PDFs y EPUBs se pueden leer en cualquier dispositivo
Apariencia profesional: Ideal para crear manuales, guías o libros electrónicos

4.2. Generando eBooks en Formato EPUB

El formato EPUB es el estándar para libros electrónicos, compatible con la mayoría de lectores (Kindle, Kobo, tablets, etc.).

Comando Básico para EPUB:

pandoc mi-libro.md -o mi-libro.epub

Comando Avanzado con Metadatos y Estilos:

pandoc mi-libro.md \
  -o mi-libro.epub \
  --epub-cover-image portada.jpg \
  --css estilos-epub.css \
  --metadata title="Título de Mi Libro" \
  --metadata author="Tu Nombre" \
  --metadata lang=es \
  --table-of-contents \
  --toc-depth=3

Ejemplo de Archivo de Estilos para EPUB (`estilos-epub.css`):

body {
  font-family: "Georgia", serif;
  line-height: 1.6;
  margin: 1rem;
}

h1 {
  font-size: 1.8rem;
  text-align: center;
  margin-top: 3rem;
}

code {
  font-family: "Courier New", monospace;
  background-color: #f5f5f5;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}

/* Especificar saltos de página */
h1, h2 {
  page-break-before: always;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
}

4.3. Creando Documentos PDF Profesionales

Para generar PDFs, Pandoc utiliza LaTeX en segundo plano, lo que te permite crear documentos de calidad profesional.

Comando Básico para PDF:

pandoc documento.md -o documento.pdf

Comando Avanzado con Configuración Completa:

pandoc documento.md \
  -o documento.pdf \
  --pdf-engine=xelatex \
  -V documentclass=article \
  -V papersize=a4 \
  -V fontsize=12pt \
  -V geometry=margin=2.5cm \
  -V mainfont="Times New Roman" \
  -V urlcolor=blue \
  --table-of-contents \
  --number-sections

Variables Útiles para PDF:

# En el comando o en el YAML front matter
-V title="Título"
-V author="Tu Nombre"
-V date="2025-09-16"
-V classoption=oneside
-V linestretch=1.25
-V linkcolor=blue
-V citecolor=green
-V urlcolor=cyan

4.4. Plantillas Personalizadas para Diferentes Formatos

Pandoc permite usar plantillas personalizadas para cada formato de salida.

Ejemplo de Plantilla Básica para PDF (`plantilla.latex`):

\documentclass[$if(fontsize)$$fontsize$,$endif$$if(papersize)$$papersize$,$endif$$if(lang)$$babel-lang$,$endif$]{$documentclass$}

\usepackage{hyperref}
\usepackage{graphicx}
\usepackage{fancyhdr}

$if(title)$
\title{$title$}
$endif$
$if(author)$
\author{$author$}
$endif$
$if(date)$
\date{$date$}
$endif$

\begin{document}

$if(title)$
\maketitle
$endif$

$if(toc)$
\tableofcontents
\newpage
$endif$

$body$

\end{document}

Uso de la Plantilla:

pandoc documento.md -o documento.pdf --template=plantilla.latex

4.5. Script de Automatización para Múltiples Formatos

Crea un script que genere todos los formatos automáticamente:

#!/bin/bash
# build-all.sh - Genera múltiples formatos

ARCHIVO=$1
NOMBRE=$(basename "$ARCHIVO" .md)

echo "Generando formatos para $NOMBRE..."

# HTML
pandoc "$ARCHIVO" -o "$NOMBRE.html" --mathml --standalone --template=layouts/default.html --css=assets/css/style.css

# EPUB
pandoc "$ARCHIVO" -o "dist/$NOMBRE.epub" --epub-cover-image=assets/img/portada.jpg --css=assets/css/epub.css --table-of-contents

# PDF
pandoc "$ARCHIVO" -o "dist/$NOMBRE.pdf" --pdf-engine=xelatex -V geometry=margin=2.5cm --number-sections

# DOCX (Word)
pandoc "$ARCHIVO" -o "dist/$NOMBRE.docx" --reference-doc=plantilla.docx

echo "✅ Formatos generados en la carpeta dist/"

4.6. Metadatos Avanzados en YAML Front Matter

Para obtener mejores resultados, usa metadatos completos en tus archivos Markdown:

---
title: "Mi Libro Impresionante"
author: 
  - Tu Nombre
  - Colaborador Opcional
date: 2025-09-16
rights: © 2025 Tu Nombre. Algunos derechos reservados.
language: es-ES
identifier:
  - scheme: ISBN
    text: 123-4567890123
publisher: Tu Editorial
description: |
  Una descripción completa del libro que aparecerá
  en los metadatos del eBook y en tiendas en línea.
cover-image: portada.jpg
keywords: [tema1, tema2, tema3]
---

4.7. Conversión Masiva de Múltiples Archivos

Si tienes varios archivos Markdown que quieres combinar en un solo libro:

# Combinar todos los archivos MD de una carpeta
pandoc capitulos/*.md -o libro-completo.epub

# Especificar orden de los capítulos
pandoc prefacio.md introduccion.md capitulo-*.md apendices.md -o libro.epub

# Usar un archivo de índice para controlar el orden
pandoc -f markdown -t epub --metadata-file=metadatos.yaml capitulos/*.md -o libro.epub

4.8. Recursos y Plantillas Predefinidas

No necesitas empezar desde cero. Aquí tienes recursos valiosos:

Plantillas de eBook profesionales:
- Awesome Pandoc Templates
- Eisvogel Template
Estilos CSS para EPUB:
- [Book Design Templates](https://www.bookdesign templates.com/)
- EPUB CSS Samples
Plantillas LaTeX para PDF:
- Pandoc LaTeX Templates
- [AcademicPaper Template](https://github.com/tomduck/pandoc- academicpaper)

4.9. Flujo de Trabajo Recomendado

Escribe todo en Markdown con el formato consistente que ya conoces

Mantén una estructura de carpetas organizada:

mi-libro/
├── capitulos/
│   ├── 01-introduccion.md
│   ├── 02-capítulo-1.md
│   └── 03-conclusion.md
├── assets/
│   ├── img/
│   └── css/
├── dist/          # Archivos generados
└── build-all.sh   # Script de construcción

Usa scripts de automatización como el mostrado arriba
Revisa los resultados en diferentes dispositivos y lectores
Sube tus eBooks a plataformas como:
- Amazon Kindle Direct Publishing
- Google Play Books
- Apple Books
- Tu propio sitio web para descarga

Conclusión del Anexo

Con Pandoc, has descubierto una herramienta increíblemente poderosa que te permite ser tu propia editorial. El mismo contenido que publicas en tu blog puede convertirse en:

eBooks profesionales (EPUB)
Documentos listos para imprimir (PDF)
Archivos Word compatibles (DOCX)
Presentaciones (PPTX)
Y muchos formatos más

La clave está en mantener tu contenido bien estructurado en Markdown y usar los metadatos adecuados. Una vez que tienes esta base, generar múltiples formatos es tan simple como ejecutar un comando.

No tengas miedo de experimentar con diferentes plantillas y estilos. La belleza de este enfoque es que puedes iterar rápidamente y ver los resultados inmediatamente. ¡Tu contenido merece ser disfrutado en todos los formatos posibles!

Anexo 5: LaTeX y Pandoc - Una Relación Poderosa

Entendiendo el Motor detrás de la Magia

LaTeX (se pronuncia "lá-tej") es un sistema de composición tipográfica de alta calidad, especialmente popular en ámbitos académicos y científicos. Pandoc aprovecha su potencia para generar documentos PDF profesionales, pero su relación va mucho más allá.

¿Qué es LaTeX y por qué es importante?

LaTeX no es un procesador de texto como Word, sino un lenguaje de marcado (como HTML) especializado en documentos técnicos y científicos. Sus ventajas incluyen:

Calidad tipográfica superior: Manejo excepcional de fórmulas matemáticas
Consistencia en el formato: Separa el contenido de la presentación
Referencias cruzadas: Numeración automática de ecuaciones, figuras y tablas
Bibliografías: Gestión automática de citas y referencias

La Relación entre Pandoc y LaTeX

Pandoc actúa como un traductor multilingüe que puede:

Convertir Markdown a LaTeX
Usar motores LaTeX para producir PDFs
Convertir LaTeX a otros formatos (HTML, Word, etc.)

Motores de Renderizado: Tus Opciones

1. MathJax (Renderizado en Navegador)

¿Qué es?: Una biblioteca JavaScript que renderiza matemáticas en el navegador Ventajas:

No requiere instalación adicional
Funciona en todos los navegadores modernos
Resultados consistentes

Desventajas:

Requiere que el usuario tenga JavaScript habilitado
Renderizado ligeramente más lento
Depende de conexión a internet (a menos que se sirva localmente)

Uso en Pandoc:

pandoc documento.md -o documento.html --mathjax

2. WebTeX (Renderizado como Imágenes)

¿Qué es?: Servicio que convierte fórmulas LaTeX en imágenes Ventajas:

Compatibilidad universal
No requiere JavaScript

Desventajas:

Calidad dependiente de resolución
Requiere conexión a internet
No es accesible para lectores de pantalla

Uso en Pandoc:

pandoc documento.md -o documento.html --webtex

3. MathML (Estándar Web)

¿Qué es?: Lenguaje de marcado para matemáticas (estándar W3C) Ventajas:

Nativo en navegadores modernos
Accesible
Calidad vectorial

Desventajas:

Soporte variable entre navegadores
Difícil de editar manualmente

Uso en Pandoc:

pandoc documento.md -o documento.html --mathml

Motores PDF: ¿Necesitas Instalar LaTeX?

Opción 1: PDFTeX/LuaTeX/XeTeX (Recomendado)

Requisito: Instalación completa de LaTeX (2-4 GB) Ventajas:

Máxima calidad tipográfica
Control completo sobre el formato
Compatibilidad con fuentes personalizadas

Cómo instalar:

Windows: MiKTeX o TeX Live
macOS: MacTeX
Linux: sudo apt install texlive-full (Ubuntu/Debian)

Uso en Pandoc:

pandoc documento.md -o documento.pdf --pdf-engine=xelatex

Opción 2: WeasyPrint (Alternativa Ligera)

Requisito: Solo WeasyPrint (mucho más pequeño que LaTeX) Ventajas:

Instalación más rápida y ligera
Buen soporte para CSS

Desventajas:

Soporte limitado para matemáticas complejas
Menor control sobre tipografía

Cómo instalar:

# Ubuntu/Debian
sudo apt-get install weasyprint

# macOS
brew install weasyprint

# Python (todas las plataformas)
pip install weasyprint

Uso en Pandoc:

pandoc documento.md -o documento.pdf --pdf-engine=weasyprint

Opción 3: wkhtmltopdf (Otra Alternativa)

Requisito: Solo wkhtmltopdf Ventajas:

Renderiza mediante WebKit
Buen soporte para HTML/CSS

Desventajas:

Soporte matemático limitado
Proyecto menos activo

Comparación Rápida

Motor	Calidad Matemáticas	Tamaño Instalación	Velocidad	Dependencias
XeTeX	Excelente	2-4 GB	Rápido	LaTeX completo
WeasyPrint	Bueno	~100 MB	Medio	Python
MathJax	Excelente	0 MB (online)	Lento*	Navegador
MathML	Bueno-Excelente	0 MB	Rápido	Navegador moderno

*Depende de la conexión y potencia del dispositivo

Recomendaciones Prácticas

Para HTML (Tu Blog):

# Opción recomendada para máxima compatibilidad
pandoc post.md -o post.html --mathml

# Alternativa con MathJax (si necesitas funciones avanzadas)
pandoc post.md -o post.html --mathjax

Para PDF (Documentos para Imprimir/Compartir):

# Si tienes LaTeX instalado (máxima calidad)
pandoc documento.md -o documento.pdf --pdf-engine=xelatex

# Si no quieres instalar LaTeX (calidad decente)
pandoc documento.md -o documento.pdf --pdf-engine=weasyprint

Para EPUB (eBooks):

# WebTeX es often la mejor opción para eBooks
pandoc libro.md -o libro.epub --webtex

Solución de Problemas Comunes

Error: "pdflatex not found"

Solución: Instala LaTeX o usa un motor alternativo:

# Instalar LaTeX (Ubuntu/Debian)
sudo apt install texlive-latex-base texlive-fonts-recommended texlive-fonts-extra texlive-latex-extra

# O usar WeasyPrint
sudo apt install weasyprint
pandoc doc.md -o doc.pdf --pdf-engine=weasyprint

Fórmulas que no se Renderizan Correctamente

Solución: Prueba diferentes opciones:

# Probar MathML
pandoc doc.md -o doc.html --mathml

# Probar MathJax
pandoc doc.md -o doc.html --mathjax

# Probar WebTeX
pandoc doc.md -o doc.html --webtex

Conclusión: ¿Necesitas Instalar LaTeX?

Sí, si:

Generas PDFs frecuentemente
Necesitas la máxima calidad tipográfica
Trabajas con documentos académicos complejos
Usas características avanzadas de LaTeX

No, si:

Solo generas HTML para tu blog
Ocasionalmente generas PDFs (usa WeasyPrint)
Tienes limitaciones de espacio en disco
Prefieres soluciones más simples

La belleza de Pandoc es que te permite elegir. Puedes empezar sin instalar LaTeX y añadirlo later si lo necesitas. La mayoría de usuarios de blogs técnicos pueden perfectamente usar --mathml para HTML y --pdf-engine=weasyprint para PDFs ocasionales, sin necesidad de instalar los pesados distributivos de LaTeX.

Recuerda: Tu contenido en Markdown permanece independiente del motor de renderizado, así que siempre puedes cambiar de opinión later sin afectar tus archivos fuente.

Anexo 6: Troubleshooting Avanzado y Optimización

Solución de Problemas Comunes

Problemas de Renderizado de Fórmulas

# Si las fórmulas no se ven en HTML:
# 1. Verifica que usas --mathml o --mathjax
# 2. Prueba con diferentes navegadores (Firefox tiene mejor soporte nativo)

# Si las fórmulas fallan en PDF:
pandoc documento.md -o documento.pdf --pdf-engine=xelatex

Problemas de Deployment

# En tu workflow de GitHub Actions, añade logging:
- name: Debug - List files
  run: ls -la

Optimización de Imágenes

# Script para optimizar imágenes automáticamente
find . -name "*.jpg" -exec convert {} -resize 1200x -quality 85 {} \;
find . -name "*.png" -exec pngquant --force --output {} {} \;

Monitoreo y Analytics

Configuración Básica de Google Analytics

<!-- En tu template default.html -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Monitor de Rendimiento con Lighthouse CI

# En tu workflow de GitHub Actions
- name: Run Lighthouse CI
  uses: treosh/lighthouse-ci-action@v9
  with:
    uploadArtifacts: true
    temporaryPublicStorage: true

Anexo 7: Monetización y Crecimiento

Estrategias de Monetización

Publicidad No Intrusiva

<!-- Ejemplo de integración con Ethical Ads -->
<script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
<div data-ea-publisher="your-site" data-ea-type="image"></div>

Membresías y Contenido Premium

// Ejemplo básico de paywall con JavaScript
function checkSubscription() {
  return localStorage.getItem('subscribed') === 'true';
}

Afiliación y Productos Digitales

[![Libro recomendado](/assets/libro.jpg)](https://afiliado.com/?ref=tu_codigo)
*Descripción del producto con enlace de afiliado*

Crecimiento de Audiencia

SEO Técnico Avanzado

<!-- Schema.org markup para artículos -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Título del artículo",
  "datePublished": "2025-09-16T00:00:00Z",
  "author": {
    "@type": "Person",
    "name": "Tu Nombre"
  }
}
</script>

Newsletters y Email Marketing

<!-- Integración con servicios de email -->
<form action="https://api.your-email-service.com/subscribe" method="POST">
  <input type="email" name="email" placeholder="Tu email" required>
  <button type="submit">Suscribirse</button>
</form>

Anexo 8: Seguridad y Mantenimiento

Mejores Prácticas de Seguridad

Headers de Seguridad

# En tu configuración de Netlify _headers
/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: geolocation=(), camera=()

Prevención de Vulnerabilidades

# Script para verificar dependencias
npm audit
# o
pip-audit

Backup y Recuperación

Script de Backup Automático

#!/bin/bash
# backup.sh
TIMESTAMP=$(date +%Y%m%d_%H%M%S)
tar -czf "backup_$TIMESTAMP.tar.gz" .
git add backup_*.tar.gz
git commit -m "Backup automático $TIMESTAMP"
git push origin main

Restauración desde Backup

# Extraer el backup más reciente
LATEST_BACKUP=$(ls -t backup_*.tar.gz | head -1)
tar -xzf "$LATEST_BACKUP"

Monitorización Continua

Health Checks Automatizados

# En tu workflow de GitHub Actions
- name: Health Check
  run: |
    curl -f https://tudominio.com || exit 1
    curl -f https://tudominio.com/feed.xml || exit 1

Monitor de Uptime

# Configuración para monitor de uptime
- name: Uptime Check
  uses: LouisBrunner/checks-action@v1.2.0
  with:
    checks: 'https://tudominio.com/health'

Estos anexos adicionales te proporcionan herramientas para llevar tu sitio al siguiente nivel, cubriendo aspectos avanzados de optimización, monetización, seguridad y crecimiento. Cada uno representa una especialización potencial que puedes explorar según tus necesidades e intereses.

Anexo 9: Para Usuarios de Windows - PowerShell es Tu Amigo

No Tengas Miedo: La Terminal de Windows ha Evolucionado

Si eres usuario de Windows y algunos de los comandos de terminal te parecen intimidantes, ¡tenemos buenas noticias! PowerShell, la terminal moderna de Windows, es mucho más amigable y poderosa de lo que piensas. Bajo el liderazgo de Satya Nadella, Microsoft ha abrazado el mundo del código abierto y ha hecho que el desarrollo en Windows sea más fácil que nunca.

PowerShell vs. Bash: Similitudes, no Diferencias

Muchos de los comandos que hemos usado en esta guía funcionan de forma similar en PowerShell. Aquí tienes una comparación rápida:

Propósito	Bash (Linux/macOS)	PowerShell (Windows)
Navegación	`cd directorio`	`cd directorio`
Listar archivos	`ls`	`ls` o `Get-ChildItem`
Crear directorio	`mkdir nuevo_dir`	`mkdir nuevo_dir`
Ver contenido archivo	`cat archivo.txt`	`Get-Content archivo.txt`
Copiar archivos	`cp origen destino`	`Copy-Item origen destino`
Variables	`NOMBRE="valor"`	`$NOMBRE = "valor"`

Los Comandos de Esta Guía en PowerShell

Casi todos los comandos que hemos usado funcionan exactamente igual:

Para Pandoc:

# Funciona exactamente igual
pandoc documento.md -o documento.html --mathml --standalone

Para Git:

# Los comandos de Git son idénticos
git status
git add .
git commit -m "Mi mensaje"
git push origin main

Para scripts:

# En lugar de ./script.sh, usas:
.\script.ps1

Configura Tu Entorno de Desarrollo en Windows

1. Windows Terminal (Recomendado)

Instala la Windows Terminal desde Microsoft Store. Es moderna, personalizable y admite pestañas.

2. PowerShell Core

Considera instalar PowerShell 7+, la versión multiplataforma y más moderna.

3. WSL (Windows Subsystem for Linux)

Si realmente prefieres el entorno Linux, puedes instalarlo directamente en Windows:

# En PowerShell como administrador
wsl --install

Esto te permite ejecutar Ubuntu u otras distribuciones Linux directamente en Windows.

Ejemplo: Script de Build Adaptado a PowerShell

# build.ps1 - Script de construcción para Windows
param(
    [string]$InputFile = "index.md"
)

$OutputFile = [System.IO.Path]::GetFileNameWithoutExtension($InputFile) + ".html"

# Verificar si Pandoc está instalado
if (-not (Get-Command pandoc -ErrorAction SilentlyContinue)) {
    Write-Error "Pandoc no está instalado. Por favor instálalo primero."
    exit 1
}

# Ejecutar Pandoc
pandoc $InputFile -o $OutputFile --mathml --standalone --template=layouts/default.html --css=assets/css/style.css

if ($LASTEXITCODE -eq 0) {
    Write-Host "✅ Conversión completada: $OutputFile" -ForegroundColor Green
} else {
    Write-Error "❌ Error en la conversión"
}

Consejos para Usuarios de Windows

Ejecución de scripts: Por seguridad, PowerShell restringe la ejecución de scripts. Para permitirlo:
```
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
```

Variables de entorno: Si necesitas añadir algo al PATH:

# Temporalmente para esta sesión
$env:PATH += ";C:\ruta\a\tu\programa"

# Permanentemente
[System.Environment]::SetEnvironmentVariable("PATH", $env:PATH + ";C:\ruta\a\tu\programa", "User")

Atajos de teclado útiles:
- Tab: Autocompletado
- Ctrl + C: Cancelar comando actual
- Flecha arriba: Historial de comandos
- Ctrl + D: Salir de la sesión

Recursos para Aprender PowerShell

Microsoft Learn: Cursos gratuitos oficiales de PowerShell
PSReadLine: Mejora la experiencia de línea de comandos
oh-my-posh: Personaliza el prompt de PowerShell

No Estás Solo: La Comunidad de Windows

La comunidad de desarrolladores en Windows es enorme y activa. Si tienes problemas:

Stack Overflow: Usa las etiquetas [powershell] y [windows]
Microsoft Docs: Documentación oficial excelente
GitHub Issues: Para problemas con herramientas específicas

Recuerda: Lo importante no es la terminal que uses, sino entender los conceptos. Una vez que entiendes qué hace git add . o pandoc --mathml, puedes ejecutarlo en cualquier entorno.

¡El mundo del desarrollo en Windows es más accesible que nunca! No dejes que el miedo a la terminal te impida disfrutar del poder y control que te ofrece tener tu propio sitio web.

TABLA DE CONTENIDOS

Guía para Inexpertos: De Bearblog a GitHub Pages como un Profesional
Capítulo 9: Conclusión - Tu Viaje Solo Acaba de Comenzar
Anexo 1: Automatización y Despliegue Avanzado
- Tu Trabajo Está Seguro: Controla Quién Ve Tu "Cocina"
  - ¿Cómo funciona esta magia?
- De Hacerlo Tú Mismo a que la Máquina lo Haga por Ti
Anexo 2: Un Toque de Interactividad con JavaScript
- Haz Tu Sitio Más Dinámico y Atractivo
Anexo 2 bis: Un Toque de Interactividad con JavaScript
- Dos Librerías Esenciales para un Blog Técnico
Anexo 3: Domina el Diseño con CSS - Desde Cero hasta Profesional
- Da Vida y Personalidad a Tu Blog con CSS
Anexo 4: Publica en Múltiples Formatos con Pandoc
- Lleva Tu Contenido Más Allá de la Web
Anexo 5: LaTeX y Pandoc - Una Relación Poderosa
- Entendiendo el Motor detrás de la Magia
Anexo 6: Troubleshooting Avanzado y Optimización
- Solución de Problemas Comunes
- Monitoreo y Analytics
  - Configuración Básica de Google Analytics
  - Monitor de Rendimiento con Lighthouse CI
Anexo 7: Monetización y Crecimiento
- Estrategias de Monetización
- Crecimiento de Audiencia
  - SEO Técnico Avanzado
  - Newsletters y Email Marketing
Anexo 8: Seguridad y Mantenimiento
Anexo 9: Para Usuarios de Windows - PowerShell es Tu Amigo
- No Tengas Miedo: La Terminal de Windows ha Evolucionado

Guía para Inexpertos: De Bearblog a GitHub Pages como un Profesional

Introducción: ¿Por qué migrar y por qué esta guía?

Capítulo 1. Los Cimientos: Entendiendo los "Ingredientes" de tu Web

1.1. Markdown (.md): Tu Mejor Amigo para Escribir

1.2. LaTeX: El Lenguaje de las Fórmulas

1.3. MathML: El Traductor de Fórmulas para la Web

1.4. Pandoc: La Navaja Suiza de la Conversión

Resumen del Capítulo 1

Capítulo 2. Configurando Tu Arsenal: Instalando las Herramientas Necesarias

2.1. Pandoc: Instalando el Traductor Universal

Para Windows:

Para macOS:

Para Linux (Ubuntu/Debian):

✅ Verificación:

2.2. Git: El Control de Versiones (No Tengas Miedo)

Para Windows:

Para macOS:

Para Linux (Ubuntu/Debian):

✅ Verificación:

2.3. Un Editor de Texto "Listo para Programar"

2.4. Crear una Cuenta en GitHub

Resumen del Capítulo 2

Capítulo 3. Primeros Pasos: Desde una Carpeta en tu PC hasta GitHub Pages

3.1. Creando tu Primer Proyecto Local

3.2. Escribiendo tu Primer Archivo Markdown con Fórmulas

3.3. La Magia de la Conversión: De .md a .html con Pandoc

3.4. Preparando el Terreno para GitHub con Git

3.5. Tu Primera "Foto" del Proyecto (Commit)

3.6. Conectando tu Carpeta Local con GitHub

3.7. ¡Despliega tu Sitio con GitHub Pages!

3.8. ¡Felicidades! Tu Sitio Está En Línea

3.9. Visualizando el Resultado y Entendiendo el YAML Front Matter

¿Cómo se vería tu página web?

La Magia Detrás del Bloque YAML: Tu Tarjeta de Identificación

¿Por qué es tan importante?

El Layout default.html (Una Explicación Sencilla)

¿Y si no uso Jekyll?

Capítulo 4. Tu Propio Dominio Personalizado: De usuario.github.io a tusitio.com

4.1. ¿Por qué un Dominio Personalizado y por qué Cloudflare?

4.2. Paso 1: Consigue un Nombre de Dominio

4.3. Paso 2: Configura Cloudflare para Gestionar tu Dominio

4.4. Paso 3: Configura los Registros DNS en Cloudflare

4.5. Paso 4: Configura GitHub Pages para Reconocer tu Dominio

4.6. Paso 5: La Prueba Final y la Paciencia

Resumen del Capítulo 4

Capítulo 5. Dale Vida y Estructura a Tu Sitio: CSS, Navegación y Organización

5.1. La Estructura de Carpeta Definitiva

5.2. Tu Primer Archivo CSS con Variables

5.3. La Plantilla Base: default.html

5.4. Ensamblando Todo: El Comando de Conversión Definitivo

5.5. Creando Otras Páginas (Como "Acerca de")

5.6. Automatización con un Script Sencillo

Resumen del Capítulo 5

Capítulo 6. Publicando Artículos y Automatizando tu Flujo de Trabajo

6.1. Creando tu Primer Artículo de Blog

6.3. Creando un Índice de Blog en tu Página Principal

6.4. Automatización Total: Un Script Para Gobernarlos a Todos

Para macOS/Linux (build.sh):

Para Windows (build.bat):

6.5. Despliegue con un Solo Comando

Resumen del Capítulo 6

Un Momento de Calma: No Todo es Complicado

La Manera "Fácil" de GitHub: Jekyll

Nuestro Método: Pandoc "Desde Casa"

Conclusión: Tú Tienes el Control

Capítulo 7. Haz que tu Blog Sea Encontrado y Accesible para Todos

7.1. SEO Sencillo: Ayudando a Google a Entender tu Sitio

Las Metaetiquetas Esenciales en tu Plantilla

7.2. Cómo se Ven tus Enlaces en Redes Sociales: Open Graph

7.3. Accesibilidad: Tu Blog para Todos

Prácticas Sencillas de Accesibilidad:

7.4. Verifica que Todo Funcione

Resumen del Capítulo 7

Capítulo 8. Mantenimiento Sin Estrés: Cómo Mantener Tu Blog Funcionando Para Siempre

8.1. Actualizar Tu Contenido: Un Proceso Que Ya Dominas

8.2. Copias de Seguridad: Tu Blog Está Más Seguro Que Nunca

8.3. Solucionando Problemas Comunes: Tu Kit de Primeros Auxilios

❌ Mi dominio no funciona / muestra un error 404.

❌ Mi sitio no usa HTTPS (el candado no aparece).

❌ Los cambios que hice no aparecen en el sitio.

El Layout `default.html` (Una Explicación Sencilla)

Capítulo 4. Tu Propio Dominio Personalizado: De `usuario.github.io` a `tusitio.com`

5.3. La Plantilla Base: `default.html`

Para macOS/Linux (`build.sh`):

Para Windows (`build.bat`):