Hospedar tu sitio web en Github

Github es una compañía que hospeda "repositorios de código", colecciones de código para proyectos. Muchos de los repositorios de código son de "código abierto", lo que significa que están disponibles de manera pública para que todo el mundo los navegue. Eso es genial ¡porque así es como los programadores aprenden entre sí y construyen a partir del trabajo de otros! Khan Academy tiene bastantes repositorios de código abierto. Los repositorios de código pueden contener todo tipo de código, no solo HTML y CSS, sino cualquier código que sea necesario para hacer que el proyecto funcione.

¿Por qué te estoy contando acerca de ellos? Bueno, Github tiene una característica llamada Github Pages, la cual hace fácil y gratuito que puedas crear un sitio web de varias páginas hospedado en tunombredeusuario.github.io.

Visita github.com y verás un formulario de registro en su página principal. (Si no lo ves, ¡felicidades!, ya tienes una cuenta! Puedes continuar con el Paso 2).

Cuando escojas tu nombre de usuario, recuerda que va a ser visible de manera pública en Internet y que estará en la URL de tu sitio web: tunombredeusuario.github.io. A algunas personas les gusta usar sus apodos o nombres chistosos en lugar de su nombre real, por razones de privacidad, pero eso depende de ti.

En el paso 2, elige el plan gratuito. No necesitas un plan de pago para un repositorio público de sitios web (siempre puedes actualizar tu plan después si te convierte en un usuario prolífico de Github y necesitas sus características profesionales).

En el Paso 3 puedes responder la encuesta o saltarte ese paso:

Después de llenar el formulario de crear una nueva cuenta, asegúrate de revisar la bandeja de entrada de tu correo y haz clic en el enlace para verificar tu dirección de correo electrónico:

Una vez que hayas verificado tu dirección de correo electrónico, verás la página de inicio. Haz clic en "Start a project" (Empezar un proyecto).

En la página de creación del proyecto, se te va a pedir un nombre de proyecto. Asegúrate de nombrar tu proyecto exactamente “TU_NOMBRE_DE_USUARIO.github.io”. Eso le dice a Github que estás haciendo un proyecto especial de una página web, de modo que sabe que tiene que subir tus archivos a esa URL que ve el usuario cada vez que los modifiques. Como mi usuario es "PamelaFoxBot", llamé a mi proyecto "PamelaFoxBot.github.io":

Felicidades, ¡ya tienes un nuevo proyecto! Pero todavía no tiene archivos. Como una manera rápida de crear el primer archivo, haz clic en el enlace "README":

Ahora estás viendo la interfaz de editor de archivos de Github para un archivo llamado README.md. Cambia el nombre de README.md a index.html. Los servidores esperan que index.html sea el nombre del archivo principal de la carpeta de un sitio web. Tu índice puede tener vínculos a otras páginas del sitio web.

Borra el contenido actual del editor de archivos y reemplázalo con el HTML de tu página web. Puedes copiar y pegar el código HTML de un proyecto de Khan Academy o de uno que hayas estado desarrollando en tu computadora.

Desplázate hacia abajo de la página hasta encontrar la zona de Commit y haz clic en “Commit new file” (Cometer nuevo archivo). Cada vez que creas una nueva versión de un archivo, estás haciendo un “commit” para registrarlo en el historial de versiones del archivo. Cada commit tiene un mensaje para describir el cambio. GitHub sugiere un mensaje predeterminado (“Create index.html”, en este caso), pero se puede reemplazar al escribir en el cuadro.

Github tarda de 1 a 10 minutos en subir los cambios de tu proyecto a la URL de la página que ven los usuarios, así que puede que necesites tener paciencia. También puede que necesites "forzar la recarga" (mantén presionada la tecla shift mientras refrescas la página), para limpiar la memoria caché del navegador.

Quizá algunos de ustedes ya estén trabajando en sitios web de varios archivos fuera de Khan Academy al usar un editor de escritorio. Su sitio web podría múltiples archivos de HTML, CSS, JS y de imágenes.

Si quieres subir ese sitio web a Github, no te preocupes, ¡no necesitas copiar y pegar cada uno de los archivos individualmente! Eso seria bastante tedioso. Hay una mejor manera...

Abre tu proyecto en Github y haz clic en "Upload files" (Subir archivos).

Verás la interfaz de Github para subir archivos. Para seleccionar tus archivos, arrastra y suelta o usa el selector de archivos:

Por lo general, quieres subir todos los archivos que has modificado. Si no estás seguro, simplemente sube todo. GitHub utilizará un algoritmo para averiguar qué ha cambiado y qué no, y solamente hará nuevas versiones de los archivos modificados.

Cambia el mensaje del commit como desees y haz clic en “Commit changes” (Cometer cambios).

Recuerda que puede tardar hasta 10 minutos. Aquí la paciencia es nuestra amiga. 😊

Por eso es mejor que hagas tu desarrollo y tus pruebas en tu entorno de escritorio local y solo subas a Github (o cualquier otro proveedor de alojamiento) una vez que estés contento con cómo se ve tu sitio web localmente.