GitHub
Temas
- Crear una cuenta
- Crear un repositorio
- Administrar un repositorio
- Publicar un repositorio
- Hospedar páginas estáticas
GitHub es un servicio que permite compartir código de cualquier lenguaje de programación, desarrollar proyectos abiertos y colaborativos, así como hospedar código. Los usuarios pueden crear repositorios (proyectos donde suben código organizado) y pueden compartirlo y publicarlo.
Los temas que vemos aquí están escritos desde la perspectiva del uso de GitHub para proyectos basados en HTML y CSS.
El sitio web está disponible solo en inglés, hay una app para Android y iOS pero requiere la creación previa de la cuenta del usuario.
Crear una cuenta
La pantalla por defecto para creación de cuentas tiene un diseño tipo gamificado. Solicita al usuario ingrese datos tradicionales para crear una cuenta.
Pantalla inicial para crear cuenta
Paso 1. Ingresa tu correo
Paso 2. Crea tu contraseña
Paso 3. Crea tu nombre de usuario
Paso 4. Verifica que no eres un robot y crea tu cuenta
Crear un repositorio
Los repositorios son los proyectos en los que almacenamos código. Podemos crear tantos repositorios como necesitemos.
En el contexto de una clase de diseño web, lo más práctico puede ser que el alumno cree un único repositorio en el cuál puede crear a su vez carpetas para organizar sus prácticas.
Clonar un repositorio existente
Al iniciar el aprendizaje de una nueva herramienta, normalmente es más sencillo partir de una base ya hecha para entender su funcionamiento. El siguiente ejemplo indica cómo copiar un repositorio ya existente de otro usuario y empezar a usarlo en una versión propia.
El primer paso es ubicar el repositorio existente que deseamos utilizar. La URL es la forma de identificarlos. Para este propósito, hemos creado este repositorio de demostración con la estructura de documentos simulando prácticas.
Paso 1. En GitHub usando tu cuenta, tienes la opción de crear un repositorio nuevo, elige esa opción.
Paso 2. En lugar de crearlo desde cero, elige la opción para importar uno existente.
Paso 3. Ingresa el URL del repositorio que quieres clonar.
Paso 4. Dale un nombre nuevo con el que lo verás en tus repositorios y márcalo como público.
Paso 5. Aplica los cambios con el botón verde.
Paso 6. Verás un mensaje de confirmación cuando termine.
Crear un repositorio nuevo
Un repositorio nuevo es un proyecto en blanco, el cuál vamos a estructurar con los archivos y carpetas que necesitamos.
Para crerlo es un proceso muy similar a la clonación, pero únicamente hay que darle nombre, por lo que es más sencillo.
Administrar un repositorio
Para administrar un repositorio, simplemente selecciónalo y verás una lista de su contenido
Verás una lista de su contenido, como si estuvieras explorando una carpeta. Puedes darle clic a cualquier elemento para entrar a las carpetas o abrir los archivos.
Publicar un repositorio
Paso 1. Entra a tu repositorio, verás los archivos que contiene, y en la parte superior varias opciones, selecciona la que corresponde a configuración (Settings).
Paso 2. De las opciones de configuración, selecciona Pages.
Paso 3. Verás que no hay ninguna seleccionada, haz clic en el botón para elegir.
Paso 4. La opción principal (Main) es la que te permitirá publicar todo tu contenido.
Paso 5. Asegúrate de guardar los cambios.
Paso 6. Verás una confirmación y un enlace a tu web publicada.
Hospedar páginas estáticas
Una vez que has publicado un respositorio, puedes usar su estructura de carpetas como la estructura de carpetas de un servidor web, partiendo de la dirección que te da GitHub.
Para los ejemplos de esta sección, el repositorio es CoBachBC/DemoEjerciciosWeb y está publicado en https://cobachbc.github.io/DemoEjerciciosWeb/
La estructura de carpetas actual es (se muestra cuando en la carpeta existe un archivo llamado index.html):
- DemoEjerciciosWeb
- Ejemplos
- Ejercicio1
index.html
- Ejercicio2
index.html
- Ejercicio3
index.html
- Ejercicio4
index.html
- Ejercicio5
index.html
- Ejercicio6
index.html
Cuando en una carpeta existe un archivo index.html podemos usar el nombre de esa carpeta como parte de la dirección, en este caso, la dirección del proyecto publicado es https://cobachbc.github.io/DemoEjerciciosWeb/, si agregamos el nombre de una carpeta con index al final, podemos ver su contenido como si estuviera en un servidor estático (solo acepta HTML, CSS, y JS).
Si navegas a https://cobachbc.github.io/DemoEjerciciosWeb/Ejercicio1 verás el index servido:
¡Ta-da! Un sitio publicado sin costo ni anuncios.