Tabla de Contenidos

Prerrequisitos

Para poder desplegar tu aplicación React en GitHub Pages necesitas tener instalado lo siguiente:

  1. Node y npm
$ node --version
v16.13.2

$ npm --version
8.1.2

Si deseas instalar o manejar las versiones de NodeJs en tu sistema, puedes revisar este otro artículo.

  1. Git
$ sudo apt install git
  1. También debes tener una cuenta de GitHub.

A la acción

  1. Crea un repositorio en GitHub.

    • Asegúrate que la visibilidad de tu repositorio sea público.

  2. Crea tu aplicación React. Para ello puedes utilizar el siguiente comando:

$ npx create-react-app my-app

Ingresa al directorio creado.

$ cd my-app

Ejecuta la aplicación.

$ npm run start

Verifica en el navegador que la aplicación esté ejecutándose.

  1. Instala el paquete gh-pages, para ello utiliza el siguiente comando.
npm install gh-pages --save-dev

Puedes verificar la instalación de gh-pages en el archivo package.json.

  1. Agrega la propiedad homepage en el archivo package.json. Para ello puedes utilizar Visual Studio Code.

La propiedad homepage tiene el siguiente formato.

https://{username}.github.io

Debes reemplazar username por el nombre de usuario que tienes en GitHub.

Tu archivo package.json, quedaría de la siguiente manera.

"name": "my-app",
  "version": "0.1.0",
  "homepage": "https://ArturoMauricioDev.github.io/my-app",
  "private": true,
  1. Agrega los scripts de predeploy y deploy en tu package.json, tu archivo quedaría de esta manera.
 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
  1. Conecta tu repositorio local con el remoto (GitHub).
$ git remote add origin https://github.com/{username}/{repo-name}.git
  1. Finalmente, despliega tu aplicación React en GitHub Pages.
$ npm run deploy -- -m "Despliegue de la app en GitHub Pages"

GitHub Pages automáticamente realizará un commit en la rama gh-pages del repositorio remoto, de esa manera quedará todo listo en cuanto al despliegue. 🚀

Ingresa a tu app

Para obtener la url de tu app debes ingresar a Settings de tu repositorio y a la sección Pages, ahí encontrarás una url similar a https://gitname.github.io/my-app.