Lección 2.7: Publicar una web con GitHub Pages

Una web es, como mínimo, un archivo HTML. GitHub Pages lo publica gratis en una dirección tuya.

La idea

Una página web es, como mínimo, un archivo HTML: texto con etiquetas que dicen qué es cada cosa. Un título, un párrafo, un botón.

GitHub Pages coge los archivos de un repositorio y los publica en una dirección: https://TU-USUARIO.github.io/mi-juego/. Gratis.

Una página mínima

Crea index.html en mi-juego:

HTML

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Mi juego</title>
  </head>
  <body>
    <h1>Hola, soy Ana</h1>
    <p>Esta es mi primera página.</p>
  </body>
</html>

head: lo que no se ve. charset deja usar tildes y eñes, y title es el nombre de la pestaña.
body: lo que se ve. h1 es el título y p, un párrafo.

HTML tiene su propia etapa, Front-end, que está en camino. Por ahora basta con esto.

El nombre importa: index.html es la página que se abre cuando nadie pide otra.

Verla en tu ordenador

Haz doble clic en index.html: se abre en el navegador. Así se prueba antes de publicar.

Publicarla

Primero, súbela a GitHub:

Terminal

$ git add index.html
$ git commit -m "feat(pagina): añade la página"
$ git push

Después, en GitHub, en tu repositorio:

Settings → Pages.
En Source, elige Deploy from a branch.
En Branch, elige main y la carpeta / (root). Pulsa Save.

En uno o dos minutos estará en https://TU-USUARIO.github.io/mi-juego/. Con la cuenta gratuita, el repositorio tiene que ser público.

Pruébalo

Ejercicio

Publica la página con tu nombre y abre su dirección en el móvil.

Ver la solución

Los tres comandos de arriba y los pasos de Settings → Pages. Si la dirección da error 404, espera un par de minutos: la primera publicación tarda. En la pestaña Actions del repositorio se ve cuándo ha terminado.

En resumen

Una web es, como mínimo, un archivo HTML.
index.html es la página que se abre por defecto.
GitHub Pages publica un repositorio en TU-USUARIO.github.io/repositorio.
Cada git push actualiza la web.