How to Host React App on GitHub Pages | Step by Step

In this tutorial, I show how to upload a React app to GitHub pages. I show the exact steps that you can follow to easily and quickly upload a react app with GitHub pages.

NPM command to install Gh-pages package: npm i gh-pages

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

Chapters:
0:00 Intro
0:05 Final Result Demo
0:10 Create GitHub Repo
0:17 Clone GitHub Repo to Local Machine
0:31 Create React App
0:50 Move React Files to Root Directory
1:52 Install Gh-pages Package
2:30 Push Code to GitHub Repo
2:40 Run NPM run deploy Command
2:56 Test GitHub Pages Link
3:11 Outro

#github #pages #react #tutorial

😄 Want to support and help grow my channel?

☕ Love my video and want to support me?

Technology that I use for my workflow setup:

*The links above include affiliate commission or referrals.

[AndysTechTutorials]

Hey Everyone! Below are the commands / scripts that I used during the tutorial:

NPM command to install Gh-pages package:
npm i gh-pages

GitHub Package.json scripts:
"homepage": ",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",

NPM command to deploy repo to GitHub Pages:
npm run deploy

[rudrakpatra]

absolutely incredible tutorial! short and concise. I followed it and it work. I am very happy!

[DigitalDuck-rc]

Hi first of all thanks for your help, it is almost working, just that my images are not showing up on the website I hosted, by any chance do you have any idea?

[vinhtiennguyen]

first of all I just want to say thanks you for the tutorial. after I did everything in your tutorial It worked but not really 100%. because when I got to the index file it was all empty, there was no content to be found. I chose gh-pages branch in the Settings -> Pages tab and even choose both the /root and /docs folder but my webpage is still blank. Do you what is happening to it

[shashank_sharma_]

Hi sir, It is not working for me can you plz check this error that I am getting

Error: ENOENT: no such file or directory, stat 'F:\React

[rachellohan]

I keep getting an error when I run "npm run deploy" it gives me this error message

Error: ENOENT: no such file or directory, stat

{my directory}

Thanks for the vid!

[dhawalkpatil]

Do I have to add the node modules to git ignore?

[whiskeyfr]

I dont get the build folder .... when i do the npm run deploy

[shantanukapse]

Hii this is a great tutorial! But im getting some problems here, I done exactly and got "published" in my terminal but when viewing the deployment it only shows me the readme file instead of the site... can you please help me here

EDIT: ahh ig I just had to wait a little😂 It works now! thanks!

[wolfdragonhybrid]

instead of published i get
'gh-pages' is not recognized as an internal or external command,
operable program or batch file.