How to deploy an app on GitHub Pages?

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.

The most important thing is understanding that GitHub Pages requires you to choose which folder to serve as your site's root, and 90% of problems come from that. It's not intuitive: lots of people upload the entire repo and then wonder why it shows nothing. When I deployed my first project built with Vite, I lost hours because I had the index.html file in the dist folder, but GitHub Pages was looking in the root.

What I'd do is: create the repo, push your code, then go to Settings > Pages. There select the branch (usually main) and specify the exact folder where the files you want to serve are located (in most cases it's / for the root, or /docs or /dist if you're using a bundler). If you're using React, Vue or similar, you need to run the build locally first to generate the final static files, commit those files, and only then activate them on Pages.

One detail that saved me afterward: if you want the deploy to be automatic every time you push, you can use a GitHub Action. It's more advanced, but it saves you from having to build manually every time. In the early days I did everything by hand and sometimes forgot to commit the build. Now I use a simple script that does it for me and I don't think about it anymore.