Cómo construí mi portfolio con GitHub Pages

En este artículo te mostraré cómo creé mi portfolio profesional desde cero usando GitHub Pages, una solución gratuita y poderosa para alojar sitios web estáticos.

¿Qué es GitHub Pages?

GitHub Pages es un servicio de hosting estático que toma archivos HTML, CSS y JavaScript directamente desde tu repositorio de GitHub y los publica como un sitio web. Es completamente gratuito para repositorios públicos y ofrece varias ventajas:

• Hosting gratuito y sin límites de ancho de banda
• Integración perfecta con Git
• Despliegue automático con cada push
• Soporte para dominios personalizados
• HTTPS incluido por defecto

Paso 1: Crear el repositorio

Lo primero que necesitas es crear un repositorio en GitHub. Para un sitio de usuario, el repositorio debe llamarse username.github.io, donde "username" es tu nombre de usuario de GitHub.

En mi caso, el repositorio se llama eucarigo.github.io, lo que significa que mi sitio está disponible automáticamente en https://eucarigo.github.io

Paso 2: Estructura del proyecto

Para mantener el proyecto organizado, utilicé la siguiente estructura:

/
  index.html          # Página principal
  blog/
    index.html        # Listado de posts
    post-1.html       # Artículo individual
  precita/            # Subpágina del proyecto
  assets/
    css/
    js/
    images/

Paso 3: Diseño moderno con TailwindCSS

Para el diseño, decidí usar TailwindCSS a través de CDN. Esto me permite tener un diseño moderno y responsive sin necesidad de compilar CSS:

<script src="https://cdn.tailwindcss.com"></script>

TailwindCSS me proporcionó clases utilitarias para crear rápidamente:

• Layouts responsive con Grid y Flexbox
• Gradientes modernos y efectos visuales
• Animaciones suaves y transiciones
• Componentes reutilizables

Paso 4: Sistema de blog dinámico

Una de las características más importantes era tener un blog que pudiera actualizar fácilmente. Para esto, creé un sistema que:

1. Almacena los posts en un array JavaScript
2. Renderiza dinámicamente los posts en el cliente
3. Permite búsqueda y filtrado por categorías
4. Soporta paginación para cargar más posts

La estructura de datos para cada post es simple:

{
  id: 1,
  title: "Título del artículo",
  excerpt: "Breve descripción...",
  date: "2026-04-15",
  category: "web",
  image: "url-de-imagen",
  readTime: "5 min",
  slug: "post-1"
}

Paso 5: Optimización SEO

Para asegurar que el sitio sea visible en los motores de búsqueda, implementé:

• Meta etiquetas descriptivas en cada página
• Estructura semántica HTML5
• URLs amigables
• Open Graph para redes sociales
• Enlaces internos entre páginas

Paso 6: Automatización del despliegue

Una de las mejores características de GitHub Pages es el despliegue automático. Cada vez que hago push al repositorio principal, GitHub automáticamente:

1. Detecta los cambios en el código
2. Construye el sitio si es necesario
3. Despliega la nueva versión
4. Actualiza el dominio en segundos

Consejos adicionales

Después de construir mi portfolio, aprendí algunos consejos útiles:

• Usa imágenes optimizadas para mejorar el rendimiento
• Implementa analytics para medir el tráfico
• Añade un formulario de contacto funcional
• Mantén el contenido actualizado regularmente
• Usa GitHub Actions para tareas automatizadas

Conclusión

GitHub Pages es una excelente opción para desarrolladores que quieren crear un portfolio profesional sin preocuparse por los costos de hosting. Es fácil de usar, poderoso y se integra perfectamente con el flujo de trabajo de desarrollo.

Si estás pensando en crear tu propio portfolio, te recomiendo encarecidamente probar GitHub Pages. Es la solución perfecta para mostrar tu trabajo al mundo.