如何将React App部署到Github页面以创建个人页面 [英] How to deploy react app to Github pages for personal page

问题描述

那里有一些教程，介绍了如何将React-app部署到GitHub项目页面，例如，

在第2步之后，我的网站已经启动并开始运行，可以通过 www.{github-username} .github.io/进行访问.

您可以继续进行，并将您的项目提交也推送到分支主管.当然，这样做不会影响您的构建和GitHub个人页面.

3. 最后一个问题是避免出现错误分支gh页已存在".使用 CTRL + C 终止无响应的终端后.

解决方案是删除缓存，但是由于 gh-pages node_module 的3.1版，他们将缓存移到了其他路径.因此，代替:

  rm -rf node_modules/gh-pages/.cache 

，我曾经用过:

  rm -rf node_modules/.cache/gh-pages 

避免出现错误(感谢尼古拉斯的评论).

我希望这对其他人也有帮助:)

There are a few tutorials out there on how to deploy a react-app to GitHub project pages, e.g., this post (i.e., www.{github-username}.github.io/{project-name}), using npm run deploy.

However, when I tried to deploy the react-app I built as my personal page (i.e., the URL will be www.{github-username}.github.io/), the terminal would freeze after a successful build while trying to deploy.

My package.json looks like below (as suggested by the existing tutorials):

{
  "homepage": "http://{github-username}.github.io/",
  "name": "personal-page",
  ...
}

"scripts": {
    ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },

and I ran npm run deploy command. The project builds successfully and then the terminal crashes before deploying. When I use CTRL+C to terminate the process and rerun the command, it shows me this error: "Branch gh-pages already exists". Some already mentioned running this command will solve the problem: rm -rf node_modules/gh-pages/.cache, but it did not work for me.

解决方案

Since I spent two hours to solve this problem and I had to get this information from multiple sources and solutions, I decided to spend another hour to write this post here for other future deployers (!) facing the same issues.

To provide context, For each account, GitHub allows hosting 1 personal static webpage and numerous static project webpages on GitHub Pages for free. To use this functionality, you must change the repository name to {github-username}.github.io for the personal page and {github-username}.github.io/{project-name} for any projects you want to deploy to GitHub Pages.

This question and answer are about the personal page only, but might give some insights for debugging the project pages as well. Tutorials for deploying a react project using npm can be found online (e.g., see this post).

1. To fix the freezing problem, someone suggested that you change the deploy command to the following:

   "scripts": {
       ...
       "predeploy": "npm run build",
       "deploy": "gh-pages -b master -d build"
   },
   

Adding -b master specifies the branch your project will be deployed to. This helps avoid the terminal freezing and your code actually gets deployed and accessed via www.{github-username}.github.io/, but all the build file information will be committed and pushed to the master branch.

What I wanted to do was having the source project on the master branch and having the deployed website on a different build branch. But also, I did not want the URL to include the branch name as well.

I tried changing -b master to -b {deploy-branch=name}, e.g., -b gh-pages where gh-pages is the name of the branch I'd like to deploy my website to. This caused running npm run deploy to freeze again!!

To solve this problem, I had to manually create a remote branch, called gh-pages and run the deploy command again.

2. To make sure the GitHub pages will be loaded from the gh-pages branch, I had to go to my GitHub repository > Settings > GitHub Pages and change the branch to gh-pages (see image below).

After step 2, my website was up and running and could be accessed via www.{github-username}.github.io/.

You can go ahead and push your project commits to the branch master as well. Doing this, of course, will not affect your build and GitHub personal page.

3. The last problem is avoiding the error "Branch gh-pages already exists" after using CTRL+C to terminate the unresponsive terminal.

The solution is removing the cache, but since version 3.1 of gh-pages node_module, they moved the cache to a different path. So instead of:

rm -rf node_modules/gh-pages/.cache

, I used:

rm -rf node_modules/.cache/gh-pages

to avoid the error (thanks to Nicholas for his comment).

I hope this helps other people as well :)

这篇关于如何将React App部署到Github页面以创建个人页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！