Cómo desplegar un blog personal gratuito en 5 minutos con GitHub y Cloudflare Pages

📌 ¿Por qué elegir este método para crear un blog?

Muchas personas quieren tener su propio sitio de blog, pero se ven frenadas por el coste del servidor, la configuración del entorno o el despliegue del código. La solución que presentamos aquí ofrece:

  • ✅ Totalmente gratuito: cuota permanente gratuita de GitHub + Cloudflare Workers Pages
  • ✅ Acceso ultrarrápido: CDN global de Cloudflare
  • ✅ Actualizaciones sencillas: despliegue automático al hacer push en Git; escribir un artículo es como redactar un documento
  • ✅ Dominio personalizado: permite vincular tu propio dominio

🛠️ Paso 1: elegir la plantilla de blog que prefieras

1.1 Buscar proyectos en GitHub

Abre GitHub y en la barra de búsqueda introduce palabras clave como:

  • astro blog template
  • personal blog starter
  • portfolio blog theme

1.2 Filtrar por lenguaje (recomendado: Astro)

En la barra lateral izquierda, selecciona Language: Astro. Los blogs generados con el framework Astro cargan más rápido y son más amigables para SEO, ideales para un sitio de blog.

1.3 Criterios de selección

Al elegir un proyecto, fíjate en los siguietnes puntos:

  • ⭐ Número de Stars: cuanto más alto, más popular es el proyecto
  • 📅 Actualización reciente: garantiza que el proyecto se mantiene activamente
  • 📖 Completitud del Readme: prioriza los que incluyen instrucciones detalladas de despliegue

💡 Proyectos recomendados: la biblioteca oficial de temas de Astro, o busca palabras clave como astro-paper, astro-blog-template, etc.

📥 Paso 2: obtener el código fuente

2.1 Copiar el enlace del repositorio

Entra en el repositorio de GitHub seleccionado, haz clic en el botón verde Code y copia el enlace HTTPS o SSH.

2.2 Clonar en local

git clone <enlace-del-repositorio-copiado>

2.3 Abrir con el IDE

Abre la carpeta del proyecto con VS Code u otro editor de código.

✏️ Paso 3: personalización

3.1 Consultar el README

Abre el archivo README.md en la raíz del proyecto para conocer:

  • Estructura del proyecto
  • Comandos de instalación de dependencias
  • Forma de iniciar en local
  • Comandos de compilación

3.2 Vista previa local (recomendado)

Instala primero las dependencias y arranca la vista previa local para ver los cambios en tiempo real:

npm install
npm run dev

Después abre en el navegador http://localhost:4321 para previsualizar el sitio.

3.3 Modificar el contenido

Adapta los siguientes elementos según tus necesidades:

  • Nombre/título del sitio
  • Avatar o imagen de portada
  • Página «Acerca de»
  • Contenido de los artículos

🔗 Paso 4: subir a tu propio repositorio de GitHub

4.1 Eliminar el historial de Git original

Borra la carpeta .git del proyecto (en Windows es necesario activar la visualización de archivos ocultos):

rm -rf .git

4.2 Inicializar un nuevo repositorio

git init
git add .
git commit -m "primer commit"

4.3 Crear y subir al repositorio remoto

Crea un nuevo repositorio en GitHub (sin marcar la opción de añadir README) y ejecuta:

git remote add origin https://github.com/tu-usuario/nombre-del-repo.git
git branch -M main
git push -u origin main

☁️ Paso 5: desplegar en Cloudflare Pages

5.1 Registrarse / iniciar sesión en Cloudflare

Accede a Cloudflare; se recomienda iniciar sesión directamente con la cuenta de GitHub para facilitar la autorización posterior.

5.2 Configurar el idioma (opcional)

Tras iniciar sesión, haz clic en tu avatar en la esquina superior derecha → Idioma → selecciona el idioma de tu preferencia.

5.3 Entrar en la página de Pages

Menú lateral → Workers y Pages → haz clic en la pestaña Pages.

5.4 Crear un nuevo proyecto

En la esquina superior derecha, haz clic en Crear → elige Pages → Conectar a Git.

5.5 Autorizar y seleccionar el repositorio

  • La primera vez es necesario autorizar la cuenta de GitHub
  • Selecciona el repositorio del blog que acabas de subir

5.6 Configurar los parámetros de compilación

Consulta el comando de compilación en el README.md del proyecto. Configuración habitual:

Parámetro Valor de ejemplo
Comando de compilación pnpm run build
Directorio de salida dist
Versión de Node 18 o 20

⚠️ Aviso: los comandos exactos dependen del README de tu proyecto, ya que pueden variar entre plantillas.

5.7 Desplegar

Haz clic en Guardar y desplegar y espera entre 1 y 2 minutos; Cloudflare completará automáticamente la compilación y el despliegue.

🎉 Paso 6: acceder a tu blog

Una vez finalizado el despliegue, Cloudflare generará un dominio gratuito con extensión .pages.dev, al que podrás acceder haciendo clic directamente.

Vincular un dominio personalizado (opcional)

  1. En los ajustes del proyecto de Pages, selecciona Dominio personalizado
  2. Introduce tu dominio y añade el registro CNAME según las indicaciones

📝 Actualizar artículos posteriormente

Para publicar nuevos artículos a partir de ahora solo necesitas:

  1. Crear un archivo .md o .mdx nuevo en el directorio local posts/ o content/blog/
  2. Hacer push del código a GitHub
  3. Cloudflare Pages detectará automáticamente los cambios y volverá a desplegar
git add .
git commit -m "nuevo articulo del blog"
git push

🔗 Recursos

  • GitHub
  • Cloudflare Pages
  • Documentación oficial de Astro
  • Biblioteca de temas de Astro

Etiquetas: astro cloudflare-pages GitHub blog-estatico jamstack

Publicado el 10-11 08:42