Как разместить ангулярный сайт с помощью Netlify и GitHub

Разместите свой сайт на Angular бесплатно, используя этот простой процесс

При размещении сайта Angular в Интернете вы можете выбирать между множеством доступных платформ. Одна из них, которую вы можете использовать бесплатно, – Netlify

Если вы храните копию исходного кода своего сайта в репозитории GitHub, вы можете использовать Netlify для размещения этого сайта

Netlify также автоматически переразмещает ваш сайт, когда вы вносите новые изменения в ветку репозитория, которую вы размещаете

Как создать базовый пример приложения Angular

Вы можете создать простое приложение Angular с помощью такого редактора, как Visual Studio Code. Затем вы можете разместить этот сайт на хостинге с помощью Netlify

1. Создайте новое приложение Angular.
2. Создайте простую домашнюю страницу. Замените код в файле app.component.html следующим содержимым целевой страницы:<div class='container-dark header'>
<h2>Our Business Website</h2>
</div>
<div class='container-white'>
<div class='content'>
<h2>Our Business Website</h2>
<p>Learn how to design, develop, and maintain your professional website in no time.</p>
</div>
</div>
<div class='container-orange'>
<div class='content'>
<h2>What We Do</h2>
<p>We give you the tools to develop websites and unique solutions for your customers. We also provide training for
maintenance and other website related topics.</p>
</div>
</div>
<div class='container-white'>
<div class='content'>
<h2>About Us</h2>
<p>We are a small business operating from Melbourne, Australia. Our spaces are uniquely crafted so clients can also
visit us in person.</p>
</div>
</div>
<div class='container-dark footer'>
<p>Copyright 2023</p>
</div>
3. Добавьте немного стиля в приложение Angular, добавив некоторые CSS в файл app.component.css:* {
font-family: 'Arial', sans-serif;
}
.header {
padding: 30px 50px;
}
.footer {
padding: 5px 50px;
text-align: center;
}
.container-dark {
background-color: #202C39;
color: white;
display: flex;
align-items: center;
}
.container-orange {
background-color: #FFD091;
color: #202C39;
}
.container-white {
background-color: whitesmoke;
color: #202C39;
}
.content {
padding: 100px 25%;
display: flex;
flex-direction: column;
line-height: 2rem;
font-size: 1. 2em;
align-items: center;
text-align: center;
}
4. Добавьте некоторые стили для всего приложения Angular в styles.css:body {
margin: 0;
padding: 0;
}
5. Чтобы протестировать приложение, перейдите в его корневую папку с помощью терминала или командной строки. Введите команду ng serve:ng serve
6. Дождитесь компиляции кода и зайдите на сайт http://localhost:4200/ в веб-браузере, чтобы просмотреть свое приложение.
7. В файле.browserslistrc удалите iOS safari версии 15. 2-15. 3. Это предотвратит появление ошибок совместимости в консоли при сборке проекта.last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15. 2-15. 3
not safari 15. 2-15. 3
8. Соберите свой код с помощью команды ng build в терминале:ng build
9. В файле.gitignore удалите или закомментируйте строку /dist. Удаление этой строки обеспечит наличие папки dist в наборе файлов, которые вы отправляете в свой репозиторий GitHub.# /dist

Как опубликовать свой код Angular на GitHub

Вам необходимо хранить код в удаленном репозитории, чтобы Netlify могла получить доступ к исходному коду

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

1. Создайте новый репозиторий на GitHub. Это можно сделать, войдя в GitHub и нажав на New.
2. Введите данные для вашего нового репозитория. Дайте ему имя, например ‘netlify-app’, и описание. Не инициализируйте хранилище файлом README, файлом.gitignore или лицензией.
3. В терминале на вашем компьютере перейдите в каталог, в котором вы сохранили ваше приложение Angular. Выполните следующие команды, чтобы инициализировать папку как git-репозиторий:git init
git add.
git commit -m 'first commit'
4. Перенесите код из этой папки в новый удаленный репозиторий, который вы создали на GitHub. Выполните команды git remote add original, git branch и git push, предоставленные GitHub на странице вашего удаленного репозитория:git remote add original <Your GitHub repo link>
git branch -M main
git push -u origin main
5. Вы можете убедиться, что код вашего приложения Angular теперь находится в вашем удаленном репозитории GitHub, обновив страницу репозитория GitHub.

Как использовать Netlify для размещения вашего кода

Чтобы разместить свой код с помощью Netlify, вам нужно предоставить ему доступ к вашему исходному коду на GitHub. Затем Netlify будет использовать папку dist вашего проекта Angular для публикации собранной версии вашего кода

Вы можете настроить все эти параметры, следуя шагам настройки при создании нового сайта:

1. Войдите или зарегистрируйтесь в Netlify. Вы можете сделать это, используя учетные данные GitHub.
2. На главной приборной панели и странице списка сайтов разверните Добавить новый сайт и выберите Импортировать существующий проект.
3. Выберите GitHub.
4. Нажмите кнопку Настроить Netlify на GitHub.
5. Нажмите на Install.
6. Netlify отобразит список ваших репозиториев GitHub. Выберите тот, который вы хотите разместить. Например, если вы назвали свой репозиторий ‘netlify-app’, то выберите ‘netlify-app’ из списка.
7. На экране конфигурации оставьте значения полей Owner, Branch to deploy и Base directory по умолчанию. Если вы публикуете конкретную ветку, например, отдельную ветку ‘Production’, вы можете добавить это в поле Branch to deploy. Измените поле Build command на ‘ng build’.. В поле Publish directory введите dist/<имя вашего проекта&gt. Если вы не знаете, как называется проект, вы можете перейти в папку dist вашего проекта, чтобы найти его там. Например, ‘dist/netlify-app’.
8. Нажмите на кнопку Развернуть сайт.
9. Дождитесь завершения развертывания. Это может занять несколько минут, и вам может понадобиться обновить страницу. Если все прошло успешно, вы сможете увидеть успешное развертывание в списке развертываний. Нажмите на опубликованную установку, например, Production: main@HEAD.
10. Нажмите на кнопку Open production deploy.
11. Теперь вы можете просматривать свой сайт в другой вкладке, используя URL в формате <generated-subdomain&gt.netlify.app. Если вы размещаете сайт с несколькими перенаправлениями, вы можете не иметь возможности перенаправлять на другие страницы. В этом случае есть способ исправить неудачный редирект на Netlify. Если хотите, вы также можете изменить свое бесплатное доменное имя.

Хостинг вашего сайта с помощью GitHub и Netlify

Надеюсь, теперь вы можете успешно разместить веб-сайт с помощью GitHub и Netlify. Вы можете настроить автоматическое развертывание в определенные ветки репозитория GitHub. Таким образом, вы можете автоматизировать и упростить процесс развертывания вашего сайта

Но Netlify – это не единственный способ развертывания приложения Angular в Интернете. Вы также можете использовать другие платформы, такие как GitHub Pages