Listo, listo, lanzamiento: creación de un sitio estático con páginas de GitHub

Con todas las herramientas y marcos actuales de desarrollo web, crear un sitio web es cada vez más complicado. Pero a veces, no necesitas mucha interactividad en tu sitio. Si está enfocado en llevar la información al espectador y no necesita una funcionalidad compleja, un sitio estático puede ser la opción correcta.

En este tutorial, aprenderá qué es un sitio estático, incluidas sus ventajas, sus limitaciones y cómo crear e implementar un sitio web personal simple creado con HTML y Bootstrap de forma gratuita utilizando Páginas de GitHub.

¿Qué son las páginas de GitHub?

GitHub es una plataforma basada en la web para alojar repositorios de Git y colaborar en proyectos de software. Ofrece herramientas para compartir y rastrear cambios de código, administrar y revisar código, y la capacidad de abrir y revisar solicitudes de incorporación de cambios.

¡No confundas Git y GitHub! GitHub es un servicio de alojamiento que permite la colaboración entre desarrolladores, mientras que Git es el software de control de versiones local que utiliza para guardar instantáneas del estado de su proyecto de software.

GitHub Pages es una de las mejores funciones de GitHub. Es un servicio que te permite alojar un sitio web estático directamente desde un repositorio de GitHub. Esto significa que puede usar su repositorio para almacenar el código y los archivos de su sitio web, y GitHub los publicará automáticamente como un sitio web al que puede acceder en línea.

En resumen, las Páginas de GitHub son una forma rápida y fácil de poner en marcha su sitio web y es especialmente útil para mostrar su cartera, proyectos de código abierto u otro contenido estático.

Sitios web estáticos vs dinámicos

Como hemos visto, las Páginas de GitHub proporcionan una forma de implementar sitios web estáticos. Pero, ¿cuál es la diferencia entre un sitio web estático y un sitio web dinámico?

Empecemos discutiendo el contenido de dichos sitios.

El contenido estático se refiere a los elementos del sitio web que siguen siendo los mismos para todos los usuarios, independientemente de quiénes sean o qué acciones realicen en el sitio. Esto puede incluir cosas como el texto, las imágenes y el diseño del sitio web, así como el código subyacente y los archivos que componen el sitio. Un sitio estático se entrega al usuario exactamente como está almacenado.

Por el contrario, el contenido dinámico es contenido que cambia según las acciones del usuario, como iniciar sesión, interactuar con un muro de pago o comentar una publicación, u otros factores, como la hora o la ubicación actual.

Por ejemplo, un sitio web que muestra una imagen fija de un producto siempre mostrará la misma imagen a todos los usuarios (estática). Por otro lado, un sitio web que muestra la hora actual mostrará una hora diferente a cada usuario en función de su ubicación (dinámica).

En general, podemos decir que un sitio web es estático si solo contiene HTML, CSS y JavaScript en la interfaz, sin tecnologías de servidor como PHP o Python que interactúan con una base de datos.

Si bien no es posible crear sitios web dinámicos con GitHub Pages, puede crear fácilmente los suyos propios con un CMS como WordPress o generadores de sitios estáticos como Gatsby o Hugo.

Características clave de las páginas de GitHub

Veamos las fortalezas de GitHub Pages como servicio de hospedaje:

1. Configuración y publicación sencillas: las Páginas de GitHub facilitan el inicio con solo unos pocos pasos. Puede habilitar Páginas de GitHub para su repositorio y especificar la fuente de los archivos de su sitio web, y GitHub publicará automáticamente su sitio web y lo pondrá a disposición en una URL basada en su nombre de usuario y nombre de repositorio.
2. Dominios personalizados: con las Páginas de GitHub, puede usar un nombre de dominio personalizado para su sitio web en lugar de la URL predeterminada proporcionada por GitHub. Esto le permite usar su propia marca y facilitar que los usuarios encuentren y accedan a su sitio web.
3. Compatibilidad con HTTPS: GitHub Pages ofrece compatibilidad con HTTPS, lo que permite conexiones seguras a su sitio web. Esto es crucial para construir la confianza de su sitio.
4. Compatibilidad con Jekyll: GitHub Pages es compatible con Jekyll, un generador de sitios estáticos que le permite crear sitios web sofisticados utilizando plantillas y otras funciones. Esto facilita la creación de sitios web de aspecto profesional sin tener que escribir todo el código desde cero.

Limitaciones

Como se indicó anteriormente, solo puede crear sitios estáticos con Páginas de GitHub. Si desea construir un proyecto complejo con muchas funcionalidades, necesitará otros servicios de alojamiento. También debe tener en cuenta que no puede usar las Páginas de GitHub con fines comerciales, como administrar un negocio en línea o comercio electrónico.

GitHub Pages no permite que tu sitio tenga más de 1 GB, lo que significa que los archivos de tu repositorio no pueden superar esa cantidad de memoria. La mayoría de las veces, 1 GB es más que suficiente para un sitio estático; solo asegúrese de comprimir sus imágenes.

También tiene un límite de ancho de banda suave de 100 GB por mes. Esta cantidad de ancho de banda sería suficiente para distribuir su sitio web a unos pocos miles de personas por mes, por lo que, a menos que tenga una gran audiencia, estará listo para comenzar.

Creación e implementación con páginas de GitHub: guía paso a paso

Crear una página de GitHub es un proceso simple y directo para alojar un sitio estático. Tenga en cuenta que si necesita algún tipo de conexión a la base de datos, debe tener un proveedor de base de datos externo.

En la siguiente guía, aprenderá cómo crear una página de GitHub desde cero. Eso incluye la creación de un repositorio remoto, la creación de un sitio web personal receptivo con HTML y la implementación en la web con GitHub.

¡Entremos en ello!

1. Regístrese en GitHub

Para comenzar, debe tener una cuenta activa de GitHub. Si no tienes uno, ve a su página de registro. No debería tomar más de un par de minutos completar el formulario.

Después de iniciar sesión, debería poder crear un repositorio remoto.

2. Crear un repositorio remoto

Un repositorio es un directorio donde almacenas todo el código relacionado con un proyecto en particular.

Desde la página de inicio de GitHub, haga clic en el botón "Nuevo" o "Crear repositorio" ubicado en el panel izquierdo del sitio. Esto lo redirigirá a un formulario donde completará la información de su repositorio.

Estos próximos pasos son cruciales:

1. Establece el nombre de tu repositorio en "yourusername".github.io .
2. Revisa el botón público. Debe establecer el repositorio en Público para publicar su sitio.
3. Agregue un LÉAME.

Solo puede tener un repositorio para una determinada cuenta personal u organización. Por eso el nombre del repositorio es tu nombre de usuario y el dominio github.io . Más adelante, veremos cómo configurar un sitio desde un repositorio.

A menos que tenga GitHub Pro, solo puede publicar una página de GitHub si el repositorio es público. Tenga esto en cuenta si no desea compartir públicamente el código fuente de su sitio.

Después de esto, deberías tener algo como lo siguiente:

Si ya tiene el código fuente de trabajo de su sitio, puede omitir el flujo de trabajo común de Git y colocar los archivos directamente en el repositorio.

Para ello, haz clic en el menú Add file de tu repositorio, y selecciona la opción Subir archivos . Luego seleccione los archivos de su sitio web, con el archivo HTML principal llamado index.html . Recuerde poner todos sus archivos CSS y JavaScript en el repositorio también.

Finalmente, presione el botón Confirmar cambios .

En la siguiente sección, construiremos un sitio web personal simple con HTML y Bootstrap. Luego lo subiremos a GitHub y lo configuraremos como una página pública de GitHub con un dominio personalizado.

3. Cree un sitio personal

Comenzaremos clonando el repositorio de GitHub que acabamos de crear. Para hacer esto, asegúrese de tener el cliente Git ya instalado en su computadora. (Si no lo hace, eche un vistazo a nuestro tutorial sobre Git y GitHub).

Vaya a la pestaña code de su repositorio y copie la URL SSH en la opción SHH .

Luego, inicie una terminal o línea de comando. En la mayoría de las distribuciones de Linux y macOS, puede usar el acceso directo Ctrl + Alt + T , o buscar Terminal en el menú de la aplicación de su sistema. En Windows, puede usar Git BASH instalado de forma predeterminada con Git, CMD, PowerShell o un cliente GUI.

En su terminal, escriba git clone y la URL que copió. Esto descargará y creará una copia del repositorio remoto en su máquina local para que pueda crear su sitio web.

Luego ingrese la nueva carpeta llamada yourusername.github.io con cd y ls . Debería ver la carpeta .git , que contiene la configuración y los metadatos de su proyecto, así como el archivo README.md si creó uno.

Abra su editor de texto favorito (como Sublime Text) y comencemos a crear su sitio web.

En la raíz del repositorio, cree un archivo llamado index.html (este nombre es requerido por GitHub Pages) y escriba la estructura de código HTML típica:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kinsta User</title> </head> <body> </body> </html>

Como dijimos anteriormente, vamos a usar Bootstrap 5.0, un marco CSS de código abierto que nos ayuda a crear sitios web receptivos más fácilmente. Como verá, no tendremos que usar CSS personalizado para este sitio en particular.

Para obtener Bootstrap en nuestra página, necesitaremos incluir el CSS y JavaScript compilados a través de un CDN. Pegue el siguiente código dentro del HTML <head> para poder usar Bootstrap CSS:

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

De la misma manera, también incluiremos Devicon CDN para poder usar iconos SVG de lenguajes de programación y tecnologías populares sin muchos problemas:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">

Ahora, para incluir JavaScript, inserte el siguiente código justo encima del final de la etiqueta </body> :

 <!-- JavaScript: Above --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Comenzaremos creando un encabezado para nuestro sitio web. Será un encabezado oscuro, con enlaces a nuestra página de índice y otras dos páginas, "Proyectos" y "Registro de lectura", que puede crear más tarde:

 <nav class="navbar navbar-dark navbar-expand-lg bg-dark "> <div class="container-fluid"> <div class="mx-4"> <a class="navbar-brand" href="#">Kinsta User</a> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Projects</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reading Log</a> </li> </ul> </div> </div> </nav>

Usamos la barra de navegación del envoltorio de navbar y navbar-expand-lg para crear un contenedor receptivo que colapsa cuando el ancho de la pantalla es inferior a 992 px. Esto sucede debido a la opción de cuadrícula lg . Si desea obtener más información sobre las opciones de cuadrícula, eche un vistazo a la página de diseño de Bootstrap.

Ahora, creemos dos columnas receptivas dentro de un contenedor: una para una imagen gratuita de Unsplash y otra para una descripción de nosotros mismos:

 <div class="container my-4 "> <div class="row justify-content-center"> <div class="col-lg mb-lg-4"> <img src="image.jpg" class="img-fluid" alt=""> </div> <div class="col-lg mx-2 align-self-center"> <div class="my-3"> <h1 class="text-center">I'm a Kinsta User</h1> <p>As a passionate software developer, I am deeply enthusiastic about creating and developing software applications. I am constantly learning and experimenting with new technologies and approaches, and I have a strong desire to create innovative and effective solutions to complex problems. I am driven by my curiosity and love for problem-solving, and I am committed to producing high-quality, well-designed software that meets the needs of users. </p> </div> </div> </div> </div>

Como puede ver, obtenemos una imagen de un archivo local, por lo que debe estar en el repositorio cuando insertamos nuestros cambios en el repositorio de GitHub.

Finalmente, dentro de nuestro contenedor Bootstrap, usaremos íconos SVG de Devicon, junto con un poco de CSS interno para que nuestras habilidades se destaquen:

 <!-- Inside the container created above --> <div class="my-4"> <div class="text-center mb-4"> <h1>My Skills</h1> </div> <div class="row "> <style> I { font-size: 4em; } </style> <!-- Skills --> <div class="col"> <div class="text-center"> <h4>WordPress</h4> <i class="devicon-wordpress-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Django</h4> <i class="devicon-django-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Python</h4> <i class="devicon-python-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>GitHub</h4> <i class="devicon-github-original" ></i> </div> </div> </div> </div>

Dado que usamos la etiqueta HTML <i> , podemos tratarla como una fuente. Por lo tanto, establecemos el tamaño de nuestros logotipos en 4 em declarándolo en la etiqueta style .

Aquí está el resultado final de este sencillo sitio web personal:

¿Sabías que más del 50% del tráfico del sitio web proviene de dispositivos móviles? Debido a que usamos Bootstrap, ahorramos una gran cantidad de codificación CSS y también obtuvimos un sitio web receptivo, como puede apreciar a continuación.

Puedes personalizar este sitio tanto como quieras. Aquí está la fuente completa en GitHub, a su disposición.

Incluso puede adjuntar un CMS sin encabezado, como Ghost, utilizando una de nuestras soluciones completas de alojamiento de aplicaciones. Puede conectarse directamente a su repositorio de GitHub a través de su panel de MyKinsta y tener su nuevo sitio en funcionamiento en cuestión de minutos.

Es hora de empujar sus archivos. Para hacer esto, ejecute los siguientes comandos en su terminal, en el nivel superior de su proyecto.

 git add . git commit -m "Added website source code and image" git push

Ahora, podemos usar este sitio web para configurar nuestra página de GitHub.

4. Publicación de una página de GitHub de usuario

Tan pronto como envíe index.html al repositorio remoto que lleva el nombre de su nombre de usuario, GitHub iniciará automáticamente un proceso de flujo de trabajo para configurar su sitio en línea. Puede tomar un par de minutos, pero obtendrá su sitio estático en funcionamiento automáticamente.

La URL de su sitio será algo como lo siguiente: https://kinstauser.github.io/

Si después de 10 minutos su sitio no está en línea, puede intentar hacer un cambio ficticio en su código (por ejemplo, agregar un espacio) y presionar nuevamente para reactivar el proceso de creación de las Páginas de GitHub.

5. Publicación de una página de repositorio de GitHub

Hasta ahora, hemos creado un sitio de usuario, pero ¿qué pasa si queremos tener varios sitios de GitHub publicados? Entonces debemos ir con un sitio del proyecto.

Como ejemplo, usaremos el sitio de tecnología HTML que creamos en el tutorial de desarrollo de Git para Web.

La forma más fácil es ir a la pestaña Configuración de nuestro repositorio, luego a la opción Páginas dentro de la sección "Código y automatización".

Seleccione la fuente Implementar desde una rama y haga clic en la rama desde la que desea implementar los archivos. Se recomienda encarecidamente publicar desde la rama principal , pero crear características y corregir errores usando ramas auxiliares y luego fusionarlos. De esta forma no introducirás errores en el sitio publicado tan fácilmente.

Una vez que haya seleccionado la rama, seleccione la carpeta desde la que desea servir los archivos, generalmente la raíz ( / ), y haga clic en Guardar.

Nuevamente, espere unos minutos. Tu sitio debería estar disponible en "yourusername".github.io/ .

Para anular la publicación de un sitio de repositorio, puede ir a Configuración , luego a Páginas y hacer clic en la opción de tres puntos. Verás un cuadro con el mensaje Anular publicación del sitio .

¡Excelente! Tiene el sitio de su proyecto de código abierto en funcionamiento, pero el nombre de dominio en sí es largo y ciertamente no es fácil de recordar. Veamos cómo podemos mejorar esto.

6. Configuración de un dominio personalizado

La forma más fácil de configurar un dominio personalizado para una página de GitHub y asegurarse de que funcione es ir a su proveedor de DNS y crear cuatro registros A para las direcciones IP de las páginas de GitHub:

 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

También debe configurar un registro CNAME con yourusername.github.io como destino. Por lo general, los cambios de DNS son lentos, así que tenga paciencia, podría llevar hasta un día entero.

Después de hacer esto, vaya a la sección Dominio personalizado en la configuración de su repositorio, escriba su dominio, haga clic en el botón Guardar y espere a que GitHub verifique su dominio personalizado.

Además, si su DNS lo admite, marque la casilla Forzar HTTPS para servir su sitio solo a través de HTTPS.

¡Felicitaciones! Si has seguido hasta este punto del tutorial, tienes un sitio web estático alojado en Páginas de GitHub de forma gratuita.

Prácticas recomendadas para las páginas de GitHub

Antes de separarnos, aquí hay algunas mejores prácticas que debe tener en cuenta al publicar un sitio de GitHub:

1. Nunca realice confirmaciones directas en la rama desde la que está implementando. Cree cambios en otras ramas, luego cree una solicitud de extracción.
2. Seleccione un buen dominio para su sitio si puede permitírselo. Es una de las decisiones más importantes para tu marca personal o de proyecto.
3. No utilices las Páginas de GitHub con fines comerciales, como abrir un sitio de comercio electrónico.
4. Evalúe sus necesidades. Es genial poder publicar un sitio estático de forma gratuita, pero si espera mucho tráfico o desea funciones complejas, pagar por un excelente servicio de alojamiento es el camino a seguir.

Resumen

El desarrollo web es cada día más complicado. Los sitios estáticos han estado aquí desde la llegada de Internet y son una excelente manera de comenzar a crear proyectos.

En este tutorial, aprendió qué son los sitios estáticos y cómo configurarlos en línea usando Páginas de GitHub. Creó un sitio personal simple usando Bootstrap y lo publicó como su sitio de usuario de GitHub. También aprendió cómo poner en funcionamiento el sitio de un proyecto y cómo anular su publicación si es necesario.

En general, GitHub Pages es una forma conveniente y poderosa de alojar su sitio web estático de forma gratuita. Ya sea que esté buscando mostrar su cartera, compartir sus proyectos de código abierto o comenzar a crear una presencia en línea, GitHub Pages es una excelente opción. Y una vez que obtenga suficiente tráfico o esté listo para crear un sitio de pila completa, puede cambiar sin problemas a otros servicios de alojamiento de aplicaciones como Kinsta sin perder el ritmo.