How to deploy an app on GitHub Pages?

Basically you create a repo on GitHub, push your code and if you're using a framework like React or Vue you configure the build script in the package.json, then you enable GitHub Pages from the repo settings pointing to the dist or gh-pages folder. If it's a simple static HTML/CSS/JS site you just push the files directly to the main branch or create a gh-pages branch and you're done, the deploy is basically automatic.

Yes, basically that's it, but I want to add a detail that was really helpful for me when I started doing deployments. Like I said above, the base is correct, but it really depends on what you're deploying. If it's a simple static site, like HTML, CSS and vanilla JavaScript, you literally just push the code and enable Pages from settings - you choose whether you want it to read from the main branch and root folder, or from a /docs folder. Done.

But if you use React or Vue, things change a bit. You need to install the `gh-pages` package with npm, then configure your `package.json` by adding `"homepage": "https://yourusername.github.io/repo-name"` (important to put the repo name if it's not your main site). After that you add the build and deploy scripts, like `"deploy": "npm run build && gh-pages -d build"` for React. When you run `npm run deploy`, the tool compiles everything and automatically pushes the build folder to the `gh-pages` branch. From settings you enable Pages on that branch and you're good.

Another thing I learned from trying various stuff: if you have assets or images that don't load, it's often a problem with relative paths. Make sure the images are linked correctly in your code. And if you use a router (like React Router), you need to configure it with `basename` for the repo name, otherwise the links won't work. It's one of those details you discover when you see everything broken in production, haha.

Exactly, what they said is right. I'd just add that if you have a simple static site (html, css, js) you don't even need to do anything special, just make sure the repo is public and enable Pages from the settings pointing to the branch you want, usually main. For React and stuff like that you need to install `gh-pages` and put the right scripts in your package.json like `"deploy": "gh-pages -d build"`, then when you run `npm run deploy` it uploads everything automatically.

One thing nobody really talks about but is super useful: if your project isn't in the root of the repo, you need to specify the right folder in your GitHub Pages settings (pick "Deploy from a branch" and select the `/docs` or `/dist` folder depending on where your build ends up). I learned this the hard way when I deployed a site alongside other projects in the same repo and ended up with a blank page. Oh, and a trick I use all the time: set up a simple GitHub Actions workflow that automatically builds when you push, so you don't have to manually run `npm run build` and then commit the compiled folder - let GitHub do it for you and the whole thing becomes way cleaner.