Cómo crear una página/sitio web en Github gratis

En este artículo voy a mostrar cómo podemos crear un sitio web o página en Github Pages usando el repositorio Github, es gratis. Y es bastante sencillo.

Pasos a seguir:

Paso 1: Registrate en Github o accede a tu cuenta

Lo primero es registrarte en Github.com, si no tienes cuenta, házte una, solo se necesita un correo y contraseña. Github, para quién no lo sepa, es el mayor repositorio de software del mundo, ahora comprado por Microsoft.

Atención: Elije bien tu nombre de usuario pues luego se usará como root de las URL de los repositorio y de los sitios webs.
Si no sabes a qué me refiero lee primero el tutorial completo antes de comenzar, al final del Paso 3 lo explico perfectamente.

Paso 2: Crear un repositorio

Una vez iniciada sesión en nuestra cuenta, arriba a la derecha hay una cruz, pulsamos ahí y luego en “new repository”, como se observa en la captura:

Ahora  veremos lo siguiente, tan solo tienes que elegir el “Repository name”, como vemos en la siguente captura, yo he puesto “repositoriodeprueba”:

Dejamos el repositorio en “publico”. Y vemos las siguientes opciones(no tocamos nada), solo pulsamos el botón verde “Create Repository”:

 

Paso 3: Modificar el repositorio creado

Ahora deberias ver algo similar a esto:

Tienes que pulsar “Settings”. Y verás lo siguiente(pulsa el botón “Choose a theme”:

Te aparecerá lo siguiente:

Elije un tema cualquiera(es irrelevante para nuestra web) y pasarás a la siguiente fase:

Como ves en la anterior captura, pone que el archivo es “index.md”, elimina eso y escribe “index.html”, para que nuestro archivo sea leído como una web por el navegador.

Y ya casi hemos terminado, ahora simplemente tienes que modificar el código, para ello usa el botón “edit” que es el lápiz que se ve a continuación en la parte derecha:

Borra todo el código que hay escrito y escribe lo siguiente:

<h1>Hello World!</h1>

Ahora, guarda el archivo, para ello solo tienes que pulsar el botón verde “Commit change”, puedes dejar un comentario antes de pulsarlo, lo normal es que en el comentario digas los cambios realizados, pero no es necesario que escribas nada:

 

 

Y ya está, ahora debes esperar 1 minuto(si, tarda un poco en actualizarse) y ya está, puedes visitar la web que has creado, y deberias ver lo siguiente:

¿No sabes como visitar la web que acabas de crear? No te preocupes, en mi caso es esta: “https://yourgeekweb.github.io/repositoriodeprueba/”(quizás ya no funcione porque al ser de prueba la eliminaré algún día), y entonces en tu caso sería igual pero cambiado “yourgeekweb” por tu nombre de usuario y “repositoriodeprueba” por el nombre de repositorio que elijiste en el Paso2 de este tutorial.

Así pues sería:

https://nombredeusuario.github.io/nombrerepositorio/

Y ¡listo! 🙂

Además si lo que quieres es un nombre de dominio más limpio, puedes usar el repositorio principal, y entonces, siguiendo con mi caso, sería:

https://nombredeusuario.github.io

Pero solo puedes tener un solo repositorio principal y por tanto un solo dominio así, el resto deberá ser como el primero.

Si quieres poder tener más con un dominio así más simple o bien te haces otra cuenta en Github o te haces un plan de pago.

Además puedes usar un dominio externo si quieres, es decir, sin el “github.io”, en vez de eso, un “.com”, “.de”, “.net”, etc. Pero eso hay que pagarlo, comprarlo en una registradora y cambiar los DNS apuntandolos a Github, es sencillo, pero no es parte de este tutorial.

 

Paso 4: El código HTML

Si, tienes que usar HTML para poder crear tu sitio web, y también puedes usar CSS y Javascript. Puedes crear más hojas de HTML y enlazarlas entre si dentro de un mismo repositorio, puedes darle estilos con CSS en cada hoja de HTML o con una hoja propia de CSS a la que hagan referencias todas las webs hechas en HTML.

Además puedes usar https://jekyllrb.com/ para  crear webs más rápido.

Si sabes HTML te será sencillo crear una página aqui, si sabes además CSS y Javascript, bueno, entonces esto es campo libre para crear lo que te de la real gana.

En caso de que no sepas ni HTML, no te puedo enseñar en un solo tutorial y menos en este, pero aún sin saber HTML puedes crear una web sencillita, simplemente escribe el código siguiente:

<html>

<body>

<h1>Titulo</h1>

<h2>Subtitulo o también puntos inferiores.</h2>

<h3></h3>

....hasta <h6></h6>

<p>Párrafo</p>

<b>Negrita</b>

<a href="https://google.es">Esto es un enlace</a>

</body>

</html>

Sirviendote de lo anterior puedes crear una web sencilla. Simlemente las etiquetas <p></p> son párrafos, y casi todas las etiquetas HTML son 2, una que abre y otra que cierra, como habrás observado en el anterior ejemplo. Y teniendo etiquetas para titulos y para párrafos, ya se puede hacer una web simple, y con enlaces con he puesto en el ejemplo anterio. Además, es tan sencillo que lo único que tienes que hacer si quieres usar más cosas aún sin saber HTML es buscar las etiquetas en Google, en bien sencillo de usar, en cuanto al CSS y Javascript eso requiere más tiempo pero no es necesario para una web simple.

Opinión sobre crear una página en Github Pages

En mi opinión, crear una web en Github, no es adecuado para crear un blog por ejemplo, para aquellos que sepan HTML, CSS y Javascript, es sencillo, pero aún así es engorroso comparado con tener una web en WordPress, y más limitado además, aunque para algunos proyectos sea adecuado ya hay hostings y planes de cloud computing que solventan mejor esos problemas y que además permiten backend, cosa que no permite Github Pages.

Github Pages me parece muy útil para crear aplicaciones con Javascript y para sitios webs estáticos que no vayan a tener que ser ampliados muy a menudo ni en los que vayamos a escribir tan a menudo. Pero para crear un pequeño directorio, un pequeño blog, una web estática sencilla, y para Javascript frontend, me parece perfecto.

Además se suele usar para simplemente crear un mini sitio web que explique los distintos repositorios que tenemos en Github.