910
¿Está buscando comenzar a escribir en un blog o publicar su currículum en línea? Una excelente manera de comenzar es alojar un sitio web estático en las páginas de GitHub.
GitHub le permite alojar un sitio web estático fuera de un repositorio. Solo necesita crear un repositorio en su cuenta de GitHub, habilitar la configuración de Páginas de GitHub y agregar el contenido de su sitio web. Lo mejor de todo es que es gratis alojar un sitio web estático en GitHub.
Exploraremos cómo puede crear el sitio desde cero o comenzar con una plantilla de sitio web estática basada en Jekyll y publicarla en su cuenta de GitHub.
Requisitos
Para seguir efectivamente:
- Una cuenta de GitHub. Si no tienes uno, inscribirse para una cuenta de GitHub primero.
- Una computadora con Git instalado. Este tutorial utiliza una computadora Ubuntu 22.04 con Git versión 2.34.1.
- Visual Studio Code con la extensión Git habilitada (instalada de forma predeterminada con VSCode).
Crear un nuevo repositorio
El primer elemento que debe tener es el repositorio de GitHub que alojará el contenido de su sitio web estático.
Primero, iniciar sesión a su cuenta de GitHub, vaya a su lista de repositorios y haga clic en Nuevo para crear un nuevo repositorio.
En la página siguiente, escriba el nombre del repositorio que desee. Hazlo tan simple o tan creativo como quieras. Además, agregue un Descripción (si lo desea). Dejar la visibilidad del repositorio Público para que cualquiera pueda verlo.
Una vez que esté satisfecho con la nueva configuración del repositorio, desplácese hasta la parte inferior de la página y haga clic en Crear repositorio.
Ahora tiene un repositorio vacío. Copie el enlace del repositorio; lo necesitarás más tarde.
Clona el repositorio a tu computadora
A continuación, clonemos el repositorio en la computadora local para que pueda comenzar a crear su sitio web.
Abra Visual Studio Code y haga clic en el Fuente de control botón en la barra de actividades. A continuación, haga clic en el Repositorio de clones botón y haga clic Clonar de GitHub.
Haga clic en el repositorio de la lista.
Elija la ubicación para almacenar el repositorio. En este ejemplo, dejémoslo en el directorio de inicio y hagamos clic en Seleccionar como destino del repositorio.
Después de clonar el repositorio, haga clic en Abierto.
Agregue contenido a su sitio web estático
Ahora agreguemos contenido al sitio web estático. Puede crear el sitio web desde cero y mostrar sus habilidades de diseño y codificación de inmediato. O puede comenzar con una plantilla, que es lo que se demostrará en esta sección.
Hay muchos lugares donde puede descargar sitios web estáticos de muestra. Las plantillas basadas en Jekyll son estándar ya que GitHub Pages usa Jekyll bajo el capó. Pero si no está listo para dar el paso con Jekyll, cualquier plantilla de sitio web estático debería estar bien.
Para este ejemplo, descarguemos un sitio de muestra de HTML5UP llamado Zerofour.
Extraiga el archivo ZIP descargado a su carpeta de repositorio.
Vuelva a la ventana de VS Code y vea que la carpeta del repositorio ahora está llena.
Empuje su sitio web estático a GitHub
Ahora tiene contenido para su sitio web estático. Ahora vamos a empujarlo a su repositorio.
Haga clic en el botón Control de fuente para ver la lista de cambios. En este caso, el tema del cambio es cada archivo, ya que los acaba de agregar a su repositorio local.
Nota. Si no ha configurado Git para usar su nombre de usuario y correo electrónico de GitHub, ejecute estos comandos en su terminal:
git config –usuario global.nombre “SU NOMBRE DE USUARIO”
git config –usuario global.email “SU_CORREO ELECTRÓNICO”
Escriba un mensaje de confirmación y haga clic en Confirmar.
Cuando se le pregunte si desea comprometerse directamente en lugar de realizar los cambios primero, haga clic en Sí.
Después de confirmar todos los cambios, haga clic en Empujar para enviar los cambios del repositorio local a su repositorio de GitHub.
Y los archivos de su sitio web estático ahora están presentes en GitHub.
Publica tu sitio web estático de GitHub
Entonces, creó el repositorio y agregó el contenido de su sitio web estático, pero aún debe decirle a GitHub que lo sirva como un sitio web. Para hacerlo, necesitaremos configurar los ajustes del repositorio y habilitar las páginas de GitHub.
En la página del repositorio, haga clic en Ajustes.
Bajo Código y Automatizaciónhaga clic Paginas. Elegir principal, / (raíz)y haga clic en Ahorrar. Esto significa que la fuente del sitio web es la rama principal debajo de la carpeta raíz.
Una vez guardado, GitHub publica el sitio web y le proporciona la URL, como se muestra a continuación. Hacer clic Visitar sitioy su sitio web se abre en una nueva pestaña o ventana.
¡Su sitio web estático de GitHub ya está activo!
¿Que sigue?
Si todo va bien y su sitio web estático de GitHub se ha publicado, puede modificar el código de su sitio web. Una vez que esté listo, continúe, confirme y envíe sus cambios a GitHub para actualizar su sitio web. Obtienes el flujo.
Trate de mantener los cambios al mínimo entre confirmaciones. Si necesita deshacer los cambios, puede hacerlo en lotes pequeños.
Intente usar Jekyll para generar su sitio web estático. Es cierto que la curva de aprendizaje puede ser empinada, pero los beneficios valen el esfuerzo.
Además, tenga en cuenta que la URL del sitio web estático de GitHub tiene como valor predeterminado https://
