Разместите свой сайт на Angular бесплатно, используя этот простой процесс.
При размещении веб-сайта Angular в Интернете вы можете выбирать между множеством доступных платформ. Одним из них, который вы можете использовать бесплатно, является Netlify.
Если вы храните копию исходного кода своего веб-сайта в репозитории GitHub, вы можете использовать Netlify для размещения этого сайта.
Netlify также автоматически повторно развертывает ваш сайт, когда вы отправляете любые новые изменения в ветку репозитория, которую вы размещаете.
Как создать базовый пример приложения Angular
Вы можете создать простое приложение Angular с помощью редактора, такого как Visual Studio Code. Затем вы можете разместить этот веб-сайт с помощью Netlify.
- Создать новое угловое приложение.
- Создайте простую домашнюю страницу. Замените код в
app.component.html файл со следующим содержимым целевой страницы:
<раздел класс ="контейнер-темный заголовок">
<h2>Наш бизнес-сайт</h2>
</div>
<раздел класс ="контейнер-белый">
<раздел класс ="содержание">
<h2>Наш бизнес-сайт</h2>
<п>Узнайте, как спроектировать, разработать и поддерживать свой профессиональный веб-сайт в кратчайшие сроки.</п>
</div>
</div>
<раздел класс ="контейнер-апельсин">
<раздел класс ="содержание">
<h2>Что мы делаем</h2>
<п>Мы даем вам инструменты для разработки веб-сайтов и уникальные решения для ваших клиентов. Мы также проводим обучение для
техническое обслуживание и другие темы, связанные с веб-сайтом.</п>
</div>
</div>
<раздел класс ="контейнер-белый">
<раздел класс ="содержание">
<h2>О нас</h2>
<п>Мы небольшой бизнес из Мельбурна, Австралия. Наши пространства уникальны, поэтому клиенты могут также
посетите нас лично.</п>
</div>
</div>
<раздел класс ="контейнер-темный нижний колонтитул">
<п>Copyright 2022</п>
</div> - Добавьте немного стиля в приложение Angular, добавив немного CSS в app.component.css файл:
* {
семейство шрифтов: "Ариал", без засечек;
}
.заголовок {
отступ: 30px 50px;
}
.нижний колонтитул {
отступ: 5px 50px;
выравнивание текста: по центру;
}
.container-темный {
фоновый цвет: № 202С39;
белый цвет;
дисплей: гибкий;
выравнивание элементов: по центру;
}
.container-оранжевый {
фоновый цвет: #FFD091;
цвет: № 202С39;
}
.контейнер-белый {
цвет фона: белый дым;
цвет: № 202С39;
}
.содержание {
отступ: 100 пикселей 25%;
дисплей: гибкий;
flex-направление: столбец;
высота строки: 2rem;
размер шрифта: 1.2эм;
выравнивание элементов: по центру;
выравнивание текста: по центру;
} - Добавьте стиль для всего приложения Angular в стили.css:
тело {
маржа: 0;
заполнение: 0;
} - Чтобы протестировать приложение, перейдите в его корневую папку с помощью терминала или командной строки. Введите нг служить команда:
нг служить - Подождите, пока ваш код скомпилируется, и посетите http://localhost: 4200/ в веб-браузере для просмотра вашего приложения.
- в .browserslistrc файл, удалите iOS Safari версии 15.2-15.3. Это предотвратит отображение ошибок совместимости в консоли при сборке проекта.
последняя 1 версия Chrome
последняя 1 версия Firefox
последние 2 основные версии Edge
последние 2 основные версии Safari
последние 2 основные версии iOS
Firefox ESR
нетios_saf 15.2-15.3
нетсафари 15.2-15.3 - Создайте свой код, используя сборка команда в терминале:
сборка - в .gitignore файл, удалите или закомментируйте /dist линия. Его удаление гарантирует расстояние папка находится в наборе файлов, которые вы отправляете в свой репозиторий GitHub.
# /расстояние
Как отправить свой код Angular на GitHub
Вам нужно будет сохранить свой код в удаленном репозитории, чтобы Netlify мог получить доступ к исходному коду.
Вы можете создать новый репозиторий на GitHub и отправить код своего веб-сайта в этот репозиторий. Если вы не знакомы с GitHub, может быть полезно понять некоторые из Основные возможности GitHub первый.
- Создайте новый репозиторий на GitHub. Вы можете сделать это, войдя в GitHub и нажав на Новый.
- Введите данные для вашего нового репозитория. Дайте ему имя, например «netlify-app», и описание. Не инициализируйте репозиторий файлом README, файлом .gitignore или лицензией.
- В терминале на вашем компьютере перейдите в каталог, в котором вы сохранили свое приложение Angular. Выполните следующие команды, чтобы инициализировать вашу папку как репозиторий git:
git инициировать
git добавить .
мерзавец совершить -м" первый совершить" - Отправьте код из этой папки в новый удаленный репозиторий, который вы создали на GitHub. Следовать git удаленно добавить оригинал, ветка git, и git push команды, предоставленные GitHub на странице вашего удаленного репозитория:
git удаленно добавить оригинал <Ссылка на ваш репозиторий GitHub>
ветка git -M главная
git push -u происхождение основной - Вы можете подтвердить, что код вашего приложения Angular теперь находится в вашем удаленном репозитории GitHub, обновив страницу репозитория GitHub.
Как использовать Netlify для размещения вашего кода
Чтобы разместить свой код с помощью Netlify, вам необходимо предоставить ему доступ к исходному коду GitHub. Затем Netlify будет использовать расстояние папку вашего проекта Angular, чтобы опубликовать встроенную версию вашего кода.
Вы можете настроить все эти параметры, выполнив действия по настройке при создании нового сайта:
- Войдите или зарегистрируйтесь Нетлайф. Вы можете сделать это, используя свои учетные данные GitHub.
- На главной панели инструментов и странице со списком сайтов разверните Добавить новый сайти выберите Импорт существующего проекта.
- Выбирать Гитхаб.
- Нажмите на Настройте Netlify на GitHub.
- Нажмите на Установить.
- Netlify отобразит список ваших репозиториев GitHub. Выберите тот, который вы хотите разместить. Например, если вы назвали свой репозиторий «netlify-app», выберите «netlify-app» из списка.
- На экране конфигурации оставьте Владелец, Филиал для развертывания, и Базовый каталог поля со значениями по умолчанию. Если вы публиковали конкретную ветку, например отдельную ветку «Производство», вы можете добавить ее в Филиал для развертывания поле. Изменить Команда сборки поле для «ng build». Для Опубликовать каталог поле, тип dist/
. Если вы не знаете, как называется проект, вы можете перейти в папку dist вашего проекта, чтобы найти его там. Например, «dist/netlify-приложение». - Нажмите на Развернуть сайт.
- Дождитесь завершения развертывания. Это может занять несколько минут, и вам может потребоваться обновить страницу. Если все пойдет хорошо, вы сможете увидеть успешное развертывание в списке развертываний. Нажмите на опубликованное развертывание, например, Производство: main@HEAD.
- Нажать на Открытое производственное развертывание кнопка.
- Теперь вы можете просматривать свой веб-сайт в другой вкладке, используя URL-адрес в формате
.netlify.приложение. Если вы размещаете веб-сайт с несколькими переадресациями, вы не сможете перенаправлять на другие страницы. В этом случае есть способ исправить неудачную переадресацию на Netlify. Если вы хотите, вы также можете изменить бесплатное доменное имя.
Хостинг вашего сайта с помощью GitHub и Netlify
Надеюсь, теперь вы можете успешно разместить веб-сайт с помощью GitHub и Netlify. Вы можете настроить автоматическое развертывание в определенные ветки репозитория GitHub. Таким образом, вы можете автоматизировать и упростить развертывание вашего веб-сайта.
Но Netlify — не единственный способ развернуть приложение Angular онлайн. Вы также можете использовать другие платформы, такие как GitHub Pages.
