Despliega tu página web gratis con GitHub Pages

En el mundo del desarrollo web, contar con un espacio donde mostrar tus proyectos es fundamental. Afortunadamente, GitHub ofrece una solución gratuita, práctica y profesional: GitHub Pages. Con esta herramienta puedes alojar páginas estáticas (HTML, CSS y JavaScript) directamente desde un repositorio en GitHub.

En este tutorial aprenderás cómo publicar tu propia página web en GitHub Pages paso a paso.

¿Qué necesitas antes de empezar?

Antes de sumergirte en el proceso, asegúrate de tener lo siguiente:

• Una cuenta de GitHub: Si no tienes una, regístrate en github.com.
• Git instalado: Git es un sistema de control de versiones. Descárgalo y configúralo en tu computadora.
• Un editor de código: Puede ser Visual Studio Code o el de tu elección.
• Un proyecto web: Puede ser un simple archivo index.html con algo de CSS y JavaScript.

Paso 1: Crea un repositorio en GitHub

Lo primero es crear un nuevo repositorio para tu proyecto en GitHub.

1. Inicia sesión en tu cuenta y haz clic en el botón New para crear un nuevo repositorio.
2. Dale un nombre a tu repositorio, por ejemplo, mi-primer-sitio-web.
3. Elige si quieres que sea Public o Private el repositorio.
4. Marca la casilla para agregar un archivo README.md y un .gitignore si lo necesitas.
5. Haz clic en Create repository.

Paso 2: Sube tu proyecto web a GitHub

Ahora, subiremos los archivos de tu proyecto web al repositorio que acabas de crear.

1. En la página de tu repositorio, haz clic en el botón Add file y luego Upload files.
2. Arrastra y suelta tus archivos (HTML, CSS, JS, imágenes, etc.) en el área designada.
3. Cuando todos tus archivos se hayan subido, añade un mensaje en el recuadro de Commit changes (por ejemplo, «First commit»).
4. Haz clic en Commit changes.

Alternativa: Sube tu proyecto usando Git desde tu terminal

Si te sientes más cómodo usando la línea de comandos, puedes clonar tu repositorio y subir los archivos así:

1. git clone https://github.com/tu-usuario/mi-primer-sitio-web.git 2. cd tu-repositorio 3. # Copia tus archivos de proyecto aquí 4. git add . 5. git commit -m "first commit" 6. git push origin main

Paso 3: Activa GitHub Pages

Este es el paso mágico. Ahora activaremos la función de GitHub Pages para que tu sitio se publique.

1. En la página principal de tu repositorio, haz clic en la pestaña Settings.
2. En el menú lateral izquierdo, haz clic en Pages.
3. En la sección Build and deployment, asegúrate de que el Source esté configurado en Deploy from a branch.
4. En el menú desplegable de Branch, selecciona la rama main y haz clic en Save.

GitHub Pages comenzará a construir tu sitio. Esto puede tardar unos minutos. Verás un mensaje en la parte superior que dice: «Your site is live at…» o el botón Visit site.

Una vez que esté listo, el enlace a tu sitio web aparecerá en la parte superior. Será algo como:
https://tu-usuario.github.io/mi-primer-sitio-web/

¡Felicidades!

¡Ya has publicado tu sitio web de forma gratuita! Cada vez que realices cambios en tus archivos y los subas a la rama main de tu repositorio, GitHub Pages se actualizará automáticamente.

Archivos y lenguajes compatibles (visibles)

GitHub Pages procesa y sirve la mayoría de los archivos de una página web estática y necesita el archivo index.html. El navegador del usuario es el que interpreta el código, no GitHub.

• HTML, CSS, JavaScript: Estos son los lenguajes básicos para construir la interfaz de una página web estática y son completamente compatibles.
• Imágenes: Formatos comunes como .png, .jpg, .gif, .svg, sirven sin problema.
• Fuentes: Archivos de fuentes (.woff, .ttf, .otf) para tipografías personalizadas, es compatible.
• Archivos de datos: Puedes incluir archivos de datos como .json o .xml que tu JavaScript pueda leer.
• Archivos de texto: Documentos de texto como .txt o .md son servidos como cualquier otro archivo.
• Jekyll y otros generadores de sitios estáticos: GitHub Pages tiene soporte nativo para Jekyll. Esto significa que puede procesar archivos con extensiones como .md o .html que contengan front matter (metadatos) y convertirlos en páginas web completas.

Archivos y lenguajes no compatibles (no visibles/procesables)

GitHub Pages no puede ejecutar código de servidor. Esto significa que cualquier lenguaje que requiera un backend o una base de datos, no funcionará directamente.

• Lenguajes de backend: Archivos de lenguajes como PHP, Python (.py), Ruby (.rb) o Node.js (.js en el servidor) no se ejecutarán. Si subes estos archivos, GitHub Pages los servirá como texto sin formato.
• Bases de datos: No se pueden usar bases de datos como MySQL, PostgreSQL, o MongoDB.
• Lenguajes de plantilla de servidor: Archivos como .erb (Ruby) o .ejs (JavaScript) no se procesarán.

GitHub Pages es una herramienta poderosa para cualquier desarrollador que busque publicar sitios estáticos de forma sencilla y gratuita. No solo sirve para compartir portafolios o practicar comandos de Git, incluso puedes desplegar aplicaciones modernas creadas con frameworks como React. Con solo unos minutos de configuración, puedes tener tu sitio web en línea y accesible desde cualquier parte del mundo.