TinyHow2: Хостинг страниц GitHub для React (с пользовательским доменом)

Требования:

Эта краткая инструкция написана при следующих предположениях:

• Вы уже знакомы с рабочим процессом GitHub, Node.js и Npm.

• Ваше приложение аккуратно хранится на принадлежащем вам репозитории GitHub.

• Вы умеете работать с консолью/терминалом.

• Вы находитесь в режиме TLDR и у вас нет времени на долгие технические инструкции.

Если это не про вас, обратитесь к этой подробной инструкции.

Настройка:

a) Вы только что сделали последний коммит в dev-ветку вашего первого приложения React (JS) на GitHub.

б) Вам не терпится развернуть его с помощью GitHub Page.

c) У вас уже есть собственный домен с красивым именем. Он размещен на GoDaddy, Bluehost, Namecheap или аналогичном (доменном) хостинге.

Подход:

1) Откройте консоль/терминал, убедитесь, что вы находитесь в папке, содержащей ваш проект React, и запустите:

   npm install gh-pages

Примечания: Откройте package.json и убедитесь, что у вас установлена следующая зависимость, чтобы все упомянутое здесь работало правильно:

  "devDependencies": {
    "gh-pages": "^3.2.3"
  }

2)
2a) Откройте package.json, добавьте homepage над именем вашего проекта:

  "homepage": "https://www.your-custom-domain-name.whatever",
  "name": "your-react-project-name",

2b) Добавьте файл CNAME в общую папку с единственной записью www.your-custom-domain-name.whatever.

3) Прокрутите вниз до раздела script в package.json и убедитесь, что добавили следующее:

  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",
  "start": "react-scripts start",

4) Настройте ваш пользовательский домен со стороны вашего хостинга:

• Просто найдите вкладку/опцию Advanced DNS на приборной панели вашего хостинга доменов.

• Создайте следующие записи A:

   185.199.108.153
   185.199.109.153
   185.199.110.153
   185.199.111.153

• Создайте запись CNAME с: Host: www и Value: your-github-username.github.io. Затем сохраните все.

Примечания: Применение этих изменений может занять некоторое время.

5) Снова откройте консоль/окно терминала и запустите:

   npm run deploy

6) Зайдите на github.com и перейдите к репозиторию, из которого будет производиться развертывание, найдите вкладку Settings и нажмите на Pages.

7) Выберите Branch: gh-pages в качестве источника.

8) Убедитесь, что ваш пользовательский домен прошел проверку DNS и не забудьте проверить Enforce HTTPS после этого. Если все прошло успешно, вы должны увидеть:

BannerPic by Martin Katler