Вступление

В этой статье мы увидим, как опубликовать один из наших репозиториев GitHub как страницу GitHub. Мы будем обсуждать проблемы, с которыми я столкнулся при этом, со скриншотами. Если вы готовы, давайте просто создадим страницу.

Фон

Я уверен, что в Интернете доступно множество связанных статей, но некоторые из них только объясняют шаги для достижения этой цели, но не объясняют проблемы, с которыми я столкнулся, поэтому я подумал, что могу написать о проблемах, с которыми я столкнулся при создании страницы для моего GitHub. репозиторий.

Предпосылки

  1. Учетная запись пользователя / организации на GitHub
  2. Репозиторий Angular

Опубликовать страницу GitHub

Выбор репозитория

На этом этапе вы можете выбрать любой репозиторий Angular, который есть в вашем профиле. Я собираюсь выбрать свой репозиторий Azure-AI-Image-Text-Reader.

Создание страницы GitHub

Теперь давайте создадим наш репозиторий. Не забудьте изменить базовое свойство href вашего файла index.html. Обычно значение базовой href равно «/», теперь мы собираемся изменить то же самое с аргументом
–base-href в нашей команде сборки.

ng build --prod --base-href "https://sibeeshvenu.com/Azure-AI-Image-Text-Reader/"

Я уже использую страницу GitHub для своей учетной записи пользователя, и я также включил для нее собственный домен, поэтому я указал настраиваемый URL-адрес в базовом href. В вашем случае вы должны предоставить URL как https: // ‹username› .github.io / ‹repositoryName› /

Пожалуйста, не удаляйте косую черту (/) в конце URL-адреса, а также помните, что имя репозитория чувствительно к регистру.

URL-адрес репозитория с учетом регистра

Приведенная выше команда создаст новую папку, если вы используете angular cli 6 или выше, именем папки будет имя проекта, указанное в файле angular.json.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "azure-ai-image-text-reader": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
}

С помощью пакета npm angular-cli-ghpages мы можем легко загрузить содержимое сборки в наш репозиторий.

npm i angular-cli-ghpages --save-dev

А затем используйте команду ниже.

npx ngh --dir=dist/Azure-AI-Image-Text-Reader

Если вы не уверены в разнице между npm и npx, рекомендую прочитать мою статью здесь.

Здесь свойство –dir используется для указания папки, в которой создается содержимое сборки. Обратите внимание, что по умолчанию имя каталога - dist, поэтому, если ваша версия angular cli ниже 6, вам не нужно указывать имя папки.

Если вы получаете аналогичную ошибку при запуске команды ngh, убедитесь, что вы установили пакет

PS C:\Users\SibeeshVenu\source\repos\Azure-AI-Image-Text-Reader> npx ngh --dir='dist/azure-ai-image-text-reader' --branch=page
npx: installed 87 in 8.588s
Path must be a string. Received undefined
(node:16984) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.

Как только задача будет выполнена, мы можем перейти к настройкам нашего репозитория и активировать страницу GitHub для нашего репозитория. Нажмите на настройки и перейдите в раздел GitHub Pages.

Теперь вы можете перейти по URL-адресу страницы и проверить, правильно ли загружается ваше приложение angular. В моем случае я могу перейти по URL
https://sibeeshvenu.github.io/Azure-AI-Image-Text-Reader/ или
https://sibeeshvenu.com/ Azure-AI-Image-Text-Reader /

Заключение

Вот это да!. Теперь мы узнали, как можно опубликовать страницу GitHub нашего репозитория GitHub. Мы также рассмотрели возможные небольшие ошибки и способы их устранения.

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

Твоя очередь. Что вы думаете?

Большое спасибо за чтение. Пропустил ли я что-нибудь, что, по вашему мнению, необходимо в этой статье? Не могли бы вы найти этот пост полезным? Пожалуйста, не забудьте поделиться со мной своим мнением.

С наилучшими пожеланиями
Сибиш Вену