Вступление
В этой статье мы увидим, как опубликовать один из наших репозиториев GitHub как страницу GitHub. Мы будем обсуждать проблемы, с которыми я столкнулся при этом, со скриншотами. Если вы готовы, давайте просто создадим страницу.
Фон
Я уверен, что в Интернете доступно множество связанных статей, но некоторые из них только объясняют шаги для достижения этой цели, но не объясняют проблемы, с которыми я столкнулся, поэтому я подумал, что могу написать о проблемах, с которыми я столкнулся при создании страницы для моего GitHub. репозиторий.
Предпосылки
- Учетная запись пользователя / организации на GitHub
- Репозиторий 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. Мы также рассмотрели возможные небольшие ошибки и способы их устранения.
Вы всегда можете прочитать эту статью в моем блоге здесь.
Твоя очередь. Что вы думаете?
Большое спасибо за чтение. Пропустил ли я что-нибудь, что, по вашему мнению, необходимо в этой статье? Не могли бы вы найти этот пост полезным? Пожалуйста, не забудьте поделиться со мной своим мнением.
С наилучшими пожеланиями
Сибиш Вену