Cómo implementar una aplicación React de forma gratuita con las páginas de GitHub

Si tiene un proyecto y desea alojarlo de forma gratuita sin comprar un dominio, usar Páginas de GitHub es una excelente opción. GitHub Pages convierte sus repositorios en sitios web y le permite alojar sitios de proyectos ilimitados.

La implementación de un sitio de React con navegación requiere una configuración adicional en comparación con la implementación de un sitio estático. Este tutorial lo guía a través de todo el proceso, desde crear un repositorio de GitHub hasta tener un sitio alojado.

Crear una aplicación de reacción

Para propósitos de demostración, necesita crear un proyecto de reacción con enrutamiento que implementará más adelante. Sin embargo, si ya tiene un proyecto reaccionar, no dude en omitir este paso.

En la terminal, ejecute el crear-reaccionar-app Comando para andamiar rápidamente un proyecto de React:

npx crear-reaccionar-aplicación reaccionar-gh

Navegue a la carpeta creada e inicie su aplicación.

npm inicio de ejecución

A continuación, abra la carpeta del proyecto con su preferido

editor de código. En el origen carpeta, elimine todo excepto Aplicación.js y índice.js. Reemplace los contenidos en App.js con lo siguiente:

aplicación de función () {
 devolver (


Páginas Github

Implementación de React en Github




 );
}
exportar la aplicación predeterminada;

Añadir enrutamiento

Para agregar enrutamiento a su aplicación, primero, instale reaccionar-enrutador-dom:

npm instalar reaccionar-enrutador-dom

En App.js, agregue el enlace a la página acerca de:

importar {Enlace} desde "react-router-dom";
aplicación de función () {
 devolver (


Acerca de
Páginas Github

Implementación de React en Github




 );
}
exportar la aplicación predeterminada;

Dado que App.js actuará como su página de inicio, solo necesita crear el Acerca de componente:

const Acerca de = () => {
 devolver ( 


Casa
Acerca de la página




 );
}
exportar por defecto Acerca de;

Ahora, debe crear las rutas y configurar un enrutador React.

Modifique index.js para hacer coincidir la URL con los componentes respectivos:

importar React desde "react";
importar ReactDOM desde "react-dom";
importar la aplicación desde "./App";
importar { HashRouter, Rutas, Ruta } desde "react-router-dom";
importar Acerca de desde "./Acerca de";
ReactDOM.render(



} />
}/>


,
 documento.getElementById("raíz")
);

Fíjate cómo usaste HashRouter en vez de NavegadorRouter. Utilizando NavegadorRouter generaría un error 404. Esto se debe a que el enrutamiento funciona de manera diferente en las páginas de GitHub. Enrutador de hashr no genera un error porque usa la parte hash de la URL para sincronizar la interfaz de usuario con la URL.

El paso final es enviar todos los cambios nuevos a Git:

agrega git
git commit -m "Crear aplicación React"

Crear repositorio de GitHub

Ya que Páginas de GitHub alojará su aplicación convirtiendo el repositorio en un sitio web, debe crear un repositorio de GitHub. Ve a tu cuenta de GitHub y crea un nuevo repositorio con el mismo nombre que tu proyecto.

A continuación, agregue el repositorio de GitHub a su repositorio local como remoto:

git remoto agregar origen /.git

Finalmente, envíe el repositorio local a GitHub:

rama git -M principal
git push --set-upstream origen principal

Implementar la aplicación React en las páginas de GitHub

Para usar GitHub Pages, primero deberá instalarlo:

npm instalar páginas gh

páginas gh le permitirá crear la páginas gh rama donde implementará su código.

A continuación, vaya a su paquete.json archivo y agregue la página de inicio, que será la URL de inicio de la aplicación:

"página de inicio": "https://.github.io//",
"guiones": {
 "preimplementación": "compilación de ejecución de npm",
 "implementar": "gh-páginas -d construir", 
 "inicio": "inicio de scripts de reacción",
 "construir": "construir scripts de reacción",
 "prueba": "prueba de scripts de reacción",
 "expulsar": "reaccionar scripts expulsar"
 }

Ejecute el siguiente comando para completar el proceso de implementación:

npm ejecutar implementar

Su aplicación ahora está implementada en GitHub y puede visitarla en https://.github.io/.

Haga más con las páginas de GitHub

Páginas de GitHub proporciona una forma sencilla de implementar sitios web en Internet de forma gratuita. Si bien solo vio cómo puede implementar un proyecto React simple, GitHub Pages le permite hacer mucho más. Por ejemplo, puede crear un blog completo con Jekyll e incluso alojarlo con un dominio personalizado.

Cómo alojar un sitio web de forma gratuita utilizando las páginas de GitHub

Leer siguiente

Sobre el Autor