Github : mettre son site en ligne gratuitement sur Github pages
1/ Ouvrez le dossier de votre application dans votre éditeur et exécutez cette commande dans votre terminal :
npm install gh-pages --save-dev
2/ Ouvrez le fichier package.json et ajoutez ces deux lignes au niveau de "scripts" :
"predeploy": "npm run build",
"deploy": "gh-pages -d build"Ce qui vous donnera par exemple :
"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"
},
3/ Ajoutez ensuite cette ligne en haut de votre fichier package.json :
"homepage": "https://nom-utilisateur.github.io/mon-repo",Modifiez nom-utilisateur avec votre nom utilisateur de votre compte Github et modifiez mon-repo avec le nom de votre repository.
Ce qui vous donnera par exemple :
"name": "portfolio-anna",
"version": "0.1.0",
"private": true,
"homepage": "https://CDS-Annabelle.github.io/portfolio-anna",
"dependencies": {
4/ Pour déployer, exécutez maintenant cette commande dans votre terminal :
npm run deploy
5/ Dans Git Bash, faites votre commit :
git add .
git commit -m "run deploy"
git push
6/ Rendez-vous sur votre repo Github > settings > pages
Votre application est désormais visible.
Erreur 404 : react-router-dom
Si vous utilisez <BrowerRouter>, vous pouvez rencontrer une erreur 404.
Dans ce cas, utilisez <HashRouter> :
function App() {
return (
<HashRouter>
<Header />
<Routes>
<Route path="/" element={<Homepage />} />
<Route path="/about" element={<About />} />
<Route
path="/accommodations/:id"
element={<Accommodations />}
/>
<Route path="*" element={<Error />} />
</Routes>
<Footer />
</HashRouter>
)
}