6. Publicando tu Proyecto con GitHub y cPanel

 

🖥️ Ahora que tienes el control de versiones con Git y ya has subido tu código a GitHub, es hora de que tu sitio web esté disponible para el mundo. Puedes usar GitHub Pages para alojar sitios web estáticos de manera gratuita o, si prefieres un hosting más robusto, configurar tu página en un servidor usando cPanel.

🌍 Opción 1: GitHub Pages (para sitios estáticos)

GitHub ofrece un servicio gratuito llamado GitHub Pages, ideal para sitios web sencillos que no necesitan bases de datos. Vamos a aprender a configurarlo.

1. Ve a tu repositorio en GitHub.
2. Haz clic en "Settings" (Configuración).
3. Desplázate hacia abajo hasta encontrar la sección "Pages".
4. Selecciona la rama "main" o "master" y la carpeta /root como la fuente de tu página.
5. Haz clic en "Save".

Después de unos minutos, GitHub Pages generará un enlace donde tu sitio estará alojado. ¡Compártelo con el mundo!

🛠️ Ejercicio práctico con GitHub Pages

1. Sigue los pasos anteriores para activar GitHub Pages.

2. Ve a la URL que te proporciona GitHub y verifica que tu sitio web esté funcionando correctamente.

   Por ejemplo: https://mitanef.github.io/mi-proyecto/

🌍 Opción 2: Publicar en un servidor con cPanel

Si necesitas más control sobre tu hosting, cPanel es una excelente opción para administrar tu sitio web en un servidor. Aquí aprenderás a usar cPanel para desplegar tu proyecto web.

1. Accede a cPanel: La mayoría de los proveedores de hosting te dan acceso a cPanel. Inicia sesión con las credenciales proporcionadas por tu hosting.

2. Sube tu proyecto:

   • Abre la sección "File Manager".
   • Navega a la carpeta public_html o crea una nueva carpeta si deseas.
   • Sube tus archivos desde tu computadora o directamente desde GitHub (descargando primero los archivos).

3. Configura tu dominio:

   • Si tienes un dominio personalizado, ve a la sección "Domains" y configúralo para que apunte a tu servidor.
   • Si no, cPanel te proporciona un subdominio temporal.

4. Configura bases de datos (si es necesario):

   • Si tu proyecto utiliza bases de datos, ve a "MySQL Databases" y crea una base de datos.
   • Asegúrate de conectar tu aplicación con las credenciales correctas.

🛠️ Ejercicio práctico con cPanel

1. Accede a cPanel y sube tu sitio web.
2. Configura el dominio para que apunte a tu servidor.
3. Accede al sitio web utilizando tu dominio o subdominio temporal para verificar que todo esté funcionando.

🏆 Pro Tip

• Mantén tus archivos bien organizados en cPanel para evitar confusiones.
• Usa SSL para asegurar tu sitio con HTTPS.

---

7. Transferencia de Archivos: FTP al Rescate

🚀 FTP (File Transfer Protocol) es una de las formas más comunes de subir y gestionar archivos en un servidor. Aunque puedes usar el administrador de archivos de cPanel, FTP es una opción más robusta y rápida para manejar proyectos más grandes.

🔧 Configuración de FTP

Para conectarte a tu servidor mediante FTP, necesitarás:

1. Un cliente FTP como FileZilla o WinSCP.
2. Credenciales FTP (generalmente proporcionadas por tu proveedor de hosting).

🎯 Cómo conectar con FTP

1. Descarga e instala FileZilla.

2. Configura una nueva conexión:

   • Host: tu dominio o dirección IP.
   • Username: tu nombre de usuario FTP.
   • Password: tu contraseña FTP.
   • Port: 21 (el puerto predeterminado de FTP).

3. Conéctate al servidor y navega por los archivos locales y del servidor.

4. Subir archivos: Simplemente arrastra los archivos de tu computadora a la carpeta public_html del servidor para subirlos.

🛠️ Ejercicio práctico con FTP

1. Descarga e instala FileZilla.
2. Conéctate a tu servidor utilizando las credenciales proporcionadas por tu hosting.
3. Sube los archivos de tu proyecto web a la carpeta public_html.

🏆 Pro Tip

• Usa SFTP (Secure File Transfer Protocol) siempre que sea posible para una transferencia de archivos más segura.

---

8. Despliegue del Proyecto en cPanel

📦 ¡Es momento de hacer tu despliegue final! Ahora que ya tienes tus archivos listos, aprenderás a hacer un despliegue completo usando cPanel, asegurando que tu sitio esté activo y corriendo correctamente.

🌐 Pasos para el despliegue final

1. Asegúrate de que todos los archivos estén en su lugar: Verifica que todos los archivos de tu proyecto (HTML, CSS, imágenes, etc.) hayan sido subidos correctamente mediante FTP o el administrador de archivos de cPanel.

2. Configura las bases de datos (si aplican): Si tu proyecto requiere bases de datos, asegúrate de que estén creadas y configuradas en cPanel, y que tu código esté apuntando a la base de datos correcta.

3. Verifica tu dominio: Asegúrate de que tu dominio o subdominio esté correctamente apuntando al servidor y funcionando.

4. Revisa la configuración de DNS: Si estás usando un dominio personalizado, asegúrate de que los DNS estén configurados correctamente para apuntar a tu servidor.

5. Activa el SSL: Esto es crucial para asegurar que tu sitio esté protegido con HTTPS. En cPanel, puedes ir a la sección de SSL/TLS para activar un certificado SSL gratuito.

🛠️ Ejercicio práctico de despliegue

1. Sube todos los archivos del proyecto a cPanel.
2. Verifica que el dominio esté correctamente configurado.
3. Accede a tu sitio web en el navegador para asegurarte de que todo está funcionando.

🏆 Pro Tip

• Usa Herramientas de Google como PageSpeed Insights para analizar el rendimiento de tu sitio una vez que esté activo.
• Configura una herramienta de monitoreo para asegurarte de que tu sitio esté siempre en línea.

---

9. Mantenimiento y Mejora Continua

🔧 El desarrollo web no termina con el despliegue. Es importante seguir iterando y mejorando tu sitio web, tanto en funcionalidad como en rendimiento. Aquí verás cómo mantener tu proyecto a largo plazo.

🎯 Buenas prácticas para HTML, CSS y Git

• HTML semántico: Asegúrate de utilizar etiquetas HTML de manera correcta y semántica para mejorar la accesibilidad y SEO de tu sitio.
• CSS modular y limpio: Organiza tu CSS de manera que sea fácil de mantener, y elimina cualquier código redundante o no utilizado.
• Commits frecuentes y descriptivos: Sigue haciendo commits pequeños y frecuentes para mantener un historial de cambios claro y fácil de seguir.

🛠️ Ejercicio de mejora continua

1. Revisa el código HTML para asegurarte de que sigue las mejores prácticas semánticas.
2. Optimiza los archivos CSS eliminando reglas redundantes o poco claras.
3. Haz un nuevo commit con estos cambios.

🏆 Pro Tip

• Revisa continuamente tu código para asegurar que siga las mejores prácticas.
• Utiliza herramientas de testing como Lighthouse para optimizar la velocidad y accesibilidad de tu sitio web.

---

💻 ¡Felicitaciones! Ya has recorrido el camino para crear, gestionar y mantener un sitio web completo. Desde aprender HTML básico hasta desplegar y mejorar tu proyecto, ahora tienes las habilidades necesarias para seguir desarrollando en la web.