Как развернуть мое React-приложение на пользовательских страницах github

Я изо всех сил пытался развернуть свое приложение React на

Страницы пользователей Github: например, http://#

вместо страниц Github: например, http://#

Я наткнулся на МНОГО ответов и HOW-TO, которые на самом деле не дали рабочего решения (или, по крайней мере, простого), поэтому я решил задать себе вопрос здесь, чтобы я мог поделиться им для в следующий раз кто-то должен знать.

Я прочитал условия и обнаружил, что можно задать вопрос и ответить на него, если я считаю, что это может быть полезно.

В этом примере я предполагаю, что вы создаете простую Onepage, потому что маршруты могут вызвать другие проблемы (я не буду говорить о них здесь).


reactjs github-pages
person Daniel Vafidis    schedule 07.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, создайте пустой репозиторий на github и назовите его как ваш веб-сайт.

  • если ваше имя на github

"mygithubname"

назови это

"mygithubname.github.io"

Затем откройте терминал/Gitbash в папке вашего приложения React и выполните следующие действия.

$ npm install gh-pages --save-dev

Затем откройте файл package.json и в самом начале (после первой скобки) добавьте следующее:

"homepage": "http://mygithubname.github.io/",

и добавьте эти строки в "скрипты":

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

Поскольку gh-pages создает ветку gh-pages, а пользовательские страницы github показывают ваш веб-сайт только из основной ветки, вы должны принудительно это сделать.

Наконец, вернитесь к своему терминалу/gitbash и введите следующие команды:

$ git init

$ git remote add origin https://github.com/mygithubname/mygithubname.github.io.git

$ npm run deploy

И Вуаля! ваш веб-сайт теперь находится в сети на "http://#"

Имейте в виду, что таким образом только ваш рабочий веб-сайт будет онлайн, если вы также хотите отслеживать источник, вы можете создать другую ветку и отправить ее туда (или иметь другой репозиторий).

Надеюсь, это будет полезно, получайте удовольствие!

person Daniel Vafidis    schedule 07.02.2019
comment
Спасибо за урок. Пройдет ли какое-то время, прежде чем сайт станет доступен на username.github.io? - person meerkat; 20.05.2020
comment
Привет @user10971344! обычно занимает несколько минут! - person Daniel Vafidis; 21.05.2020