2023-11-27
2779
#react
Nelson Michael
127590
Nov 27, 2023 ⋅ 9 min read

Deploying React apps to GitHub Pages

Nelson Michael Nelson Michael is a frontend developer from Nigeria. When he's not meddling with CSS, he spends his time writing, sharing what he knows, and playing games.

Recent posts:

How To Audit And Validate AI-Generated Code Output

How to audit and validate AI-generated code output

Validating and auditing AI-generated code reduces code errors and ensures that code is compliant.

Boemo Mmopelwa
Dec 2, 2024 ⋅ 5 min read
Building A Background Remover With Vue And Transformers.js

Building a background remover with Vue and Transformers.js

Build a real-time image background remover in Vue using Transformers.js and WebGPU for client-side processing with privacy and efficiency.

Emmanuel John
Nov 29, 2024 ⋅ 9 min read
Managing Search Parameters In Next.js With Nuqs

Managing search parameters in Next.js with nuqs

Optimize search parameter handling in React and Next.js with nuqs for SEO-friendly, shareable URLs and a better user experience.

Jude Miracle
Nov 27, 2024 ⋅ 10 min read
React logo over a beige background

Data fetching with Remix’s loader function

Learn how Remix enhances SSR performance, simplifies data fetching, and improves SEO compared to client-heavy React apps.

Abhinav Anshul
Nov 26, 2024 ⋅ 5 min read
View all posts

14 Replies to "Deploying React apps to GitHub Pages"

  1. “gh-pages-d build”, there is a space in -d. if you would not add space you can get message that “‘gh-pages-d’ is not recognized as an internal or external command,
    operable program or batch file. ”
    should be like this
    “deploy”: “gh-pages -d build”

  2. Thank you for putting everything very well. I could easily go through the steps and got the deploying done. A big thank you

  3. Hi Michael, thank for posting this. I’m getting an error near the beginning.
    npm install gh-pages –save-dev

    Unsupported engine {
    npm WARN EBADENGINE package: ‘@csstools/[email protected]’,
    npm WARN EBADENGINE required: { node: ‘^14 || ^16 || >=18’ },
    npm WARN EBADENGINE current: { node: ‘v17.9.1’, npm: ‘8.11.0’ }

    I think this is connected to problems I’m having using the command line to manage my repository on github… but maybe I fixed that and this is a new problem…?

    Also, I’d like to subscribe to your blog, but I’m not sure what logrocket is and how to subscribe without paying a membership fee.

  4. When I try this, I end up with an empty page that just says “This site is open source. Improve this page.”

    I looked at the `artifact.zip` file that the ci built, and it appears to have created this index.html with just that content in it at the top level.

    My project runs just fine locally with `npm run start` for example.

    Any idea why this would happen?

    1. In my case I had forgot to add the homepage property in the package.json.

      “In the package.json file, add a homepage property that follows this structure: http://{github-username}.github.io/{repo-name}.”

Leave a Reply