Crear un sitio web es una inversión seria; usted tiene que pagar por cada paso de la construcción de un sitio web.
¿Quieres crear un sitio web gratuito para el crecimiento personal o profesional? Esta es una manera de diseñar su próximo sitio web con un nombre de dominio personalizado, alojamiento gratuito de por vida y encriptación SSL absolutamente gratis. ¡Uf! ¿Qué más se puede pedir?
Es obvio que tener un sitio web aumenta significativamente sus cifras de crecimiento, y hoy en día es más una inversión que un lujo. Esto no solo es cierto para las empresas, sino que las personas también pueden beneficiarse enormemente a través de un sitio web personal.
Ya sea que registre un nombre de dominio, aloje los contenidos de su sitio web, cree el sitio web o habilite el cifrado SSL, debe estar listo para vaciar sus bolsillos. Además del dolor, algunos de estos gastos son recurrentes y continúan para siempre.
¿Qué pasaría si le dijera que puede crear un sitio web gratuito mientras realiza todos los pasos cruciales mencionados anteriormente en la creación de sitios web también de forma gratuita? Por poco mundano que parezca, puedes hacer todo esto gratis si eres estudiante.
Si conoce GitHub, es posible que conozca las páginas de GitHub. Es un servicio de uso gratuito que viene con cada cuenta de GitHub. GitHub Pages permite a cada usuario crear un sitio web gratuito y alojarlo, pero hay una gran advertencia. Los nombres de dominio de estos sitios web gratuitos esencialmente terminan en github.io, lo que arruina la profesionalidad de su sitio web.
Tabla de contenido
¿Qué es el paquete de desarrollo para estudiantes de GitHub?
Menos usuarios tomarán en serio su sitio web, y tener un nombre de dominio innecesariamente largo nunca es una buena idea. ¡Pero hey! No estamos aquí para hablar sobre las ventajas o advertencias de las páginas de GitHub. Le prometí una forma de permitirle crear un sitio web gratuito con el nombre de dominio personalizado, y así es como puede hacerlo.
GitHub ofrece la oportunidad de hacer uso de un fantástico kit repleto de prácticas herramientas en línea para todos los estudiantes inscritos en un curso de grado o diploma, conocido como Paquete de desarrollo para estudiantes de GitHub. El paquete incluye suscripciones profesionales y descuentos asombrosos en herramientas populares como Canva, Namecheap, Microsoft Azure, Discord, Name.com y StreamYard, entre muchas otras.
En este artículo, usaremos Namecheap para registrar un dominio personalizado gratuito y usaremos las páginas de GitHub para alojar nuestro sitio web. Luego, buscaremos formas de diseñar y cargar sus archivos HTML, CSS y JavaScript en las páginas de GitHub. Eventualmente, también habilitaremos el cifrado SSL para el sitio web, pero antes que nada, debemos registrarnos en el Paquete de Desarrollador para Estudiantes.
¿Cómo solicitar el paquete de desarrollo para estudiantes de GitHub?
El proceso de registro para el Student Developer Pack se reduce a tener una dirección de correo electrónico de estudiante otorgada por la universidad. La dirección de correo electrónico de un estudiante generalmente termina con el nombre de dominio de su universidad, por ejemplo, [email protected] Hay otras formas de registrarse para el paquete, pero requieren tiempos de revisión mucho más largos que usar un correo electrónico de estudiante. Si tiene lista su dirección de correo electrónico de estudiante, así es como puede registrarse para el paquete:
Paso 1: Ir a GitHub educación y haga clic en la opción Iniciar sesión.
Puedes iniciar sesión con tus credenciales si ya tienes el pack. De lo contrario, puede seguir los pasos a continuación.
Haga clic en la opción Crear una cuenta en la ventana Iniciar sesión.
Paso 2: Luego, regístrese usando su correo electrónico de estudiante y cree una cuenta.
Paso 3: Cuando se le pregunte «¿Cuál describe mejor su estado académico?», asegúrese de seleccionar Estudiante.
Paso 4: ahora complete los cuadros necesarios con detalles sobre el nombre de su escuela y su propósito de usar GitHub.
Paso 5: Finalmente, envíe su solicitud utilizando la opción «Envíe su información».
Debería recibir un correo electrónico de confirmación con respecto al paquete de desarrollador si GitHub aprueba su aplicación. El proceso suele tardar unos días, pero el tiempo puede variar significativamente durante las horas pico.
¿Cómo solicitar el Paquete de desarrollador para estudiantes de GitHub sin el correo electrónico del estudiante?
GitHub también te da la opción de solicitar el paquete utilizando una tarjeta de identificación de estudiante válida o cualquier otra prueba de tu estado académico. Las únicas advertencias son el largo tiempo de espera y la mayor tasa de rechazo. De todos modos, así es como puedes solicitar el paquete de estudiante a través de este método:
Paso 1: Siga los pasos mencionados anteriormente para crear una cuenta a través de su correo electrónico personal.
Paso 2: Ahora cargue la prueba de su estado académico usando la opción de cámara o cargue las fotos directamente a GitHub usando el botón Cargar.
Paso 3: A continuación, complete todos los detalles necesarios, como el nombre de la escuela y el propósito de usar GitHub.
Paso 4: Envíe su solicitud.
¿Cómo registrar su dominio personalizado usando Namecheap?
Supongo que tiene su cuenta GitHub Education en funcionamiento. Los siguientes pasos implican el uso de Namecheap para registrar su dominio personalizado gratuito y alojarlo a través de las páginas de GitHub. Siga estos pasos para registrar su nombre de dominio preferido:
Paso 1: inicie sesión en su cuenta de GitHub Education y vaya a la sección Beneficios.
Debería ver un Web Dev Kit y un Virtual Event Kit.
Paso 2: Vaya al Kit de eventos virtuales y desplácese hacia abajo para encontrar Namecheap.
GitHub ofrece un registro de nombre de dominio de 1 año en .me TLD, al que puede acceder haciendo clic en la opción Obtener acceso.
Paso 3: La siguiente ventana le pedirá que autorice la solicitud de conexión de Namecheap a su cuenta de GitHub. Autorice a Namecheap y continúe con el siguiente paso.
Debería ver un mensaje que dice: «Hemos verificado con éxito su paquete de estudiante con GitHub» después de la autorización exitosa.
Paso 4: encuentre su dominio preferido a través de la barra de búsqueda y haga clic en Buscar.
Debería ver la disponibilidad del nombre de dominio en la siguiente pantalla. Si su nombre de dominio está disponible, puede proceder a comprarlo gratis.
Paso 5: Pague usando la dirección de correo electrónico de GitHub Education y seleccione Páginas de GitHub como su método de hospedaje mientras continúa.
Después de registrar con éxito su nombre de dominio personalizado y elegir las páginas de GitHub como su alojamiento, Namecheap debería crear automáticamente un repositorio en su cuenta de GitHub. Este repositorio está completamente vacío y solo contiene un archivo README.md.
Puede acceder a este repositorio iniciando sesión en su cuenta de GitHub y haciendo clic en la sección «Sus repositorios». GitHub Pages no ofrece herramientas visuales ni temas preconstruidos para su sitio web; necesita codificar todo el sitio web manualmente y cargar archivos relacionados a su repositorio de GitHub recién creado.
¿Cómo crear un sitio web gratuito y alojarlo en las páginas de GitHub?
Como se mencionó anteriormente, deberá crear todos los archivos HTML, CSS y JavaScript relacionados con su sitio web. Si le gusta el desarrollo web y sabe cómo codificar, puede cargar sus archivos en su repositorio de GitHub y hacer que su sitio web funcione. Puede desplazarse a la sección de este artículo que trata sobre cómo cargar el código del sitio web en las páginas de GitHub.
Pero si usted es alguien que tiene poca o ninguna información sobre Web Dev, lo tenemos cubierto. Puede seguir los pasos que se indican a continuación y diseñar su propio sitio web utilizando HTML básico:
Paso 1: Ir a HTML5 ARRIBA y desplácese hasta el diseño del sitio web que desee. Puede elegir cualquier otro tema preconstruido desde cualquier plataforma. Aquí he elegido «Masivamente» de HTML5 UP, pero puede descargar y personalizar cualquier diseño de sitio web de su elección.
Paso 2: extraiga el archivo zip descargado de su diseño de sitio web favorito.
Debería ver archivos llamados index.html y generic.html y carpetas como recursos e imágenes en la carpeta extraída.
Paso 3: ahora abra los archivos extraídos con Visual Studio Code y seleccione el archivo index.html.
Paso 4: descargue e instale la extensión «Live Server» en Visual Studio Code si aún no la tiene.
Paso 5: seleccione el archivo index.html, haga clic con el botón derecho del mouse y seleccione la opción «Abrir en servidor en vivo». Esta opción le permite visualizar los cambios en su archivo HTML en su navegador en tiempo real.
¿Cómo personalizar el diseño de su sitio web?
No denominaré el proceso más allá de este punto como «Pasos» para personalizar su sitio web. La personalización de los archivos HTML depende totalmente de sus preferencias, pero así es como personalicé el diseño «Masivamente» de HTML5 UP y lo convertí en una cartera. Puede optar por inspirarse en esto o personalizar su sitio web completamente por sí mismo. ¡La decisión es tuya!
Modificación de las etiquetas Título y Párrafo
Comenzando mi proceso de personalización, cambié la etiqueta del título «Masivamente». La etiqueta de título de su archivo HTML decidirá su nombre mientras se abre en una pestaña del navegador. El título predeterminado para Massively debería ser «Massively by HTML5 UP», y recomiendo cambiarlo a algo que se parezca a su sitio web.
Cambié la etiqueta del título a “Samyak Goswami | Escritor de contenido técnico”, ya que se adaptaba perfectamente a mi cartera. A continuación, cambié la sección de introducción del sitio web, que decía: «Esto es masivo» (contenido en la etiqueta H1) y lo convertí en «Portafolio de Samyak» por razones obvias. Posteriormente, cambié el texto a continuación en las etiquetas de párrafo a «Una muestra de mis proyectos y mis habilidades».
Al ir a la sección Navegación (Nav) en el archivo de índice, omití dos de los tres botones de navegación contenidos en la etiqueta Lista. Quería crear un sitio web de una sola página con todos los detalles en una sola página, pero eres libre de modificar la cantidad de botones de navegación según tu elección.
Más tarde cambié el texto «Esto es masivo» en el botón de navegación a «Mis artículos».
Modificación de los enlaces e íconos de las redes sociales
También debe ver los diversos íconos de redes sociales en el servidor en vivo como Twitter, Facebook, Instagram y GitHub. Decidí omitir Twitter y Facebook y mantener Instagram y LinkedIn para mi caso de uso.
Puede modificar los íconos de las redes sociales y sus enlaces yendo a la sección Navegación (Nav) y desplazándose hasta Listar etiquetas con Twitter, Instagram y más escritos dentro de ellas.
Observe cómo no hay enlaces adjuntos a estos íconos de redes sociales ya que la etiqueta href se deja en blanco. Puede agregar enlaces a la etiqueta href reemplazando «#» con su enlace preferido.
Modificación de los contenidos de la página de inicio
Primero, cambié la etiqueta H2 y la convertí en «Mi nombre es Samyak Goswami» y luego cambié la etiqueta Párrafo a «Soy un entusiasta de la tecnología…». Le sugiero que cambie la etiqueta H2 con algo que coincida con el contenido de su página de inicio y la etiqueta del párrafo que lo explica.
Ahora estamos llegando a la parte más crucial de esta personalización; modificando el contenido de los mosaicos del artículo.
Para hacer esto, vaya a la sección Publicaciones en el archivo de índice y debería ver varios fragmentos de código contenidos en las etiquetas de artículos. Puede agregar enlaces a sus historias modificando la sección href como lo hicimos al agregar enlaces a los íconos de redes sociales.
Posteriormente puede cambiar el nombre de los artículos modificando los contenidos dentro de las etiquetas H2. También puede agregar una descripción a sus artículos usando la etiqueta de párrafo.
Repita el proceso para cada artículo agregando enlaces, cambiando nombres y agregando una descripción a todos sus artículos.
Agregar imágenes a sus sitios web
Debe haber notado que la vista previa se ve muy diferente de las imágenes presentes en el sitio web de HTML5 UP. Esto se debe al avión y las fotos suaves en el archivo personalizable. Vamos a animar nuestro sitio web añadiéndole imágenes personalizadas.
Imágenes originales
Para hacerlo, navegue a la carpeta donde previamente extrajo el archivo zip «Masivamente». Abra la carpeta extraída y vaya a la carpeta Imágenes. Debería ver diferentes imágenes denominadas bg, pic01, pic02, etc. Estas son las imágenes vinculadas con nuestros artículos en la etiqueta del artículo.
Puede agregar imágenes personalizadas y modificar el archivo de índice con los nombres de estas imágenes o agregar las imágenes y nombrarlas de manera similar a las imágenes predeterminadas. Dar a las imágenes nombres idénticos nos ahorra modificar el código y mucho tiempo posteriormente.
Imágenes modificadas
Le sugiero que revise y modifique otras secciones de su sitio web que no son importantes. Aquí está el portafolio que creé siguiendo los pasos que mencioné anteriormente: samyakgoswami.me.
¿Cómo subir el código de tu sitio web a las páginas de GitHub?
Después de finalmente codificar y diseñar su sitio web, es hora de subirlo a las páginas de GitHub y ponerlo en marcha en Internet.
Así es como puede cargar su sitio web en las páginas de GitHub:
Paso 1: inicie sesión en su cuenta de GitHub y vaya a la sección Mis repositorios.
Paso 2: Deberías ver un repositorio llamado your_username.github.io. Entra en este repositorio.
Paso 3: debería ver una opción para crear su propio archivo o cargar archivos en el repositorio de GitHub.
Paso 4: Seleccione los cinco archivos y carpetas; activos, imágenes, elementos, genéricos, índices y arrástrelos y suéltelos en el repositorio.
Después de cargar los archivos, confirme el código y espere hasta que GitHub procese sus archivos.
Paso 5: Vaya a Configuración>Páginas de GitHub para ver el estado de su sitio web. Debería ver el mensaje «Su sitio web está publicado en su_dominio_personalizado».
Ahora puede ir a su dirección web y verificar el sitio web usted mismo. Recuerde, el sitio web puede tardar algún tiempo antes de que se active inicialmente.
¿Cómo habilitar el cifrado SSL en las páginas de GitHub?
HTTP es una forma insegura de administrar las solicitudes de los usuarios en su sitio web. Cualquier persona con intenciones maliciosas y conocimientos técnicos sólidos puede interceptar las interacciones entre el usuario y su sitio web. Por otro lado, HTTPS brinda a todos sus visitantes una sesión de navegación mucho más segura. Las páginas de GitHub ofrecen cifrado HTTPS gratuito, y así es como puede aprovecharlo:
Desplácese a la sección Páginas en el repositorio.
Debería ver la opción «Aplicar HTTPS» al final de la ventana. El cifrado SSL debería activarse tan pronto como marque la casilla de verificación Forzar HTTPS.
En caso de que encuentre que la opción Forzar HTTPS no está disponible para su dominio, puede habilitar el cifrado SSL siguiendo los pasos a continuación:
Paso 1: inicie sesión en su cuenta de Namecheap y vaya a la sección «Lista de dominios».
Paso 2: Ahora navegue hasta Administrar dominio y luego a la sección «Advanced DNS».
Debería ver algunos registros CNAME y A existentes.
Agregue los siguientes registros A con host como «@» y dirección IP como «185.199.108.153». El siguiente con el nombre de host «@» y la dirección IP como «185.199.109.153».
Siga la tendencia hasta que tenga 4 registros A hasta la dirección IP «185.199.111.153».
Elimina todos los registros A anteriores.
Paso 3: a continuación, agregue un registro CNAME con Host como «www» y Value como su nombre de usuario de GitHub (punto) github (punto) io.
Elimina los registros CNAME anteriores. Al final, su configuración de DNS debería tener 4 registros A y 1 registro CNAME.
Paso 4: Ahora ve a las páginas de GitHub en la sección Configuración. La opción Forzar HTTPS ahora debería estar disponible para su dominio.
Resumiendo 👈
GitHub brinda una oportunidad fantástica a todos los estudiantes para crear un sitio web gratuito y administrarlo. Aunque no puede usar las páginas de GitHub para alojar cargas de tráfico masivas, marca todas las casillas de verificación para un sitio web estático a pequeña escala. El nombre de dominio personalizado, el alojamiento y el cifrado SSL gratuitos hacen que sea aún más maravilloso tenerlo.
Ahora puede leer «Cómo elegir un servidor web para su nuevo sitio web».
Aquí hay algunas herramientas de monitoreo de velocidad de página para notificarle cuando su sitio web se cae.