Github-pages usando gh-pages y Vite

4931 단어

Vite para generar tus páginas con React, tienes que saber que se requiere un proceso diferente para poder subir nuestras páginas en github pages usando la alternativa de npm gh-pages , y hoy aprenderás como hacerlo.

Lo primero será 설치 gh-pages

npm install gh-pages --save-dev

Según ladocumentación si tu repositorio es del tipohttps://github.com/<USERNAME>/<REPO> lo primero seria dirigirnos a nuestro archivo vite.config.js y añadir `la propiedad base con el nombre del repositorio.


export default defineConfig({
  base:'/REPO/',
  plugins: [react()]
})

Luego creamos un nuevo archivo en la carpeta raíz llamado deploy.sh donde pegaremos el siguiente frarmento de código

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git checkout -b main
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git main

# if you are deploying to https://<USERNAME>.github.io/<REPO>
# git push -f [email protected]:<USERNAME>/<REPO>.git main:gh-pages

cd -

Y modificamos la ultima linea cambiando el USERNAME Y REPO



     git push -f [email protected]:<USERNAME>/<REPO>.git main:gh-

 ` 

Dentro de el archivo package.json deberémos agregar el los scripts "deploy": "gh-pages -d dist" para hacer el deploy de forma más sencilla.


   "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"
},
 
 


Ahora para terminar tendremos que ejecutar:


 git add .
git commit -m 'gh-pages deploy'

npm run build
 
 


Con el último comando generaremos una nueva carpeta llamada dist la cual tiene toda la información de nuestra aplicación para poder ser subida a github pages. Por ultimo en la consola


 npm run deploy
 
 


Si has seguido los pasos en la consola verás que sale un mensaje diciendo Published y en tu pagina de github abajo a la derecha te saldrá lo siguiente.



En caso de que algo mal ocurra y te diga:


 fatal: Una rama llamada 'gh-pages' ya existe.latten 
 
 


Puedes probar con este comando para eliminarla (en linux funciona bien).


 rm -rf node_modules/.cache/gh-pages
 
 

                
                    
        
    
    
    
    
    
                
                

                
                
                    
                        
                            

                            
                            Reference
                            


                            이 문제에 관하여(Github-pages usando gh-pages y Vite), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
                                
                                https://dev.to/av952/github-pages-usando-gh-pages-y-vite-1n0n
                            

                            
                            
                                텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
                            
                            
                                
                                
                                

                                
                                

                                우수한 개발자 콘텐츠 발견에 전념
                                (Collection and Share based on the CC Protocol.)

Github-pages usando gh-pages y Vite

Reference

좋은 웹페이지 즐겨찾기