Хоствайте вашия Angular сайт безплатно, като използвате този лесен процес.
Когато хоствате уебсайт на Angular онлайн, можете да избирате между много налични платформи. Един от тях, който можете да използвате безплатно, е Netlify.
Ако съхранявате копие от изходния код на уебсайта си в хранилище на GitHub, можете да използвате Netlify за хостване на този сайт.
Netlify също автоматично преразпределя вашия сайт, когато натискате нови промени в клона на хранилището, който хоствате.
Как да създадете основно примерно приложение Angular
Можете да създадете просто приложение Angular с помощта на редактор като Visual Studio Code. След това можете да хоствате този уебсайт с помощта на Netlify.
- Създавам ново приложение Angular.
- Създайте проста начална страница. Заменете кода в app.component.html файл със следното съдържание на целевата страница:
<div клас="контейнер-тъмен хедър">
<h2>Нашият бизнес уебсайт</h2>
</div>
<div клас="контейнер-бял">
<div клас="съдържание">
<h2>Нашият бизнес уебсайт</h2>
<стр>Научете как да проектирате, разработите и поддържате своя професионален уебсайт за нула време.</стр>
</div>
</div>
<div клас="контейнер-оранжев">
<div клас="съдържание">
<h2>Какво правим</h2>
<стр>Ние ви даваме инструментите за разработване на уебсайтове и уникални решения за вашите клиенти. Предлагаме и обучение за
поддръжка и други теми, свързани с уебсайтове.</стр>
</div>
</div>
<div клас="контейнер-бял">
<div клас="съдържание">
<h2>За нас</h2>
<стр>Ние сме малък бизнес, опериращ от Мелбърн, Австралия. Нашите пространства са уникално изработени, така че и клиентите да могат
посетете ни лично.</стр>
</div>
</div>
<div клас="контейнер-тъмен долен колонтитул">
<стр>Авторско право 2022 г</стр>
</div> - Добавете малко стил към приложението Angular, като добавите малко CSS към app.component.css файл:
* {
шрифтово семейство: "Arial", sans-serif;
}
.заглавие {
подложка: 30px 50px;
}
.долен колонтитул {
подложка: 5px 50px;
подравняване на текст: център;
}
.контейнер-тъмен {
Цвят на фона: #202C39;
цвят: бял;
дисплей: гъвкав;
подравняване на елементи: център;
}
.контейнер-оранжев {
Цвят на фона: #FFD091;
цвят: #202C39;
}
.контейнер-бял {
цвят на фона: whitesmoke;
цвят: #202C39;
}
.съдържание {
подложка: 100px 25%;
дисплей: гъвкав;
flex-direction: колона;
височина на реда: 2 rem;
размер на шрифта: 1.2em;
подравняване на елементи: център;
подравняване на текст: център;
} - Добавете малко стил за цялостното приложение Angular styles.css:
тяло {
марж: 0;
подплата: 0;
} - За да тествате приложението, отворете основната му папка с помощта на терминал или команден ред. Въведете ng служи команда:
ng служи - Изчакайте кодът ви да се компилира и посетете 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 - Създайте своя код, като използвате ng изграждане команда в терминала:
ng изграждане - В .gitignore файл, премахнете или коментирайте /dist линия. Премахването му ще гарантира разст е в набора от файлове, които изпращате към вашето GitHub хранилище.
# /дистр
Как да изпратите вашия Angular код към GitHub
Ще трябва да съхраните кода си в отдалечено хранилище, за да може Netlify да има достъп до изходния код.
Можете да създадете ново хранилище в GitHub и да изпратите кода на уебсайта си в това хранилище. Ако не сте запознати с GitHub, може да е полезно да разберете някои от тях Основните характеристики на GitHub първи.
- Създайте ново хранилище в GitHub. Можете да направите това, като влезете в GitHub и щракнете върху Нов.
- Въведете подробностите за вашето ново хранилище. Дайте му име като „netlify-app“ и описание. Не инициализирайте хранилището с файл README, .gitignore файл или лиценз.
- В терминал на вашия компютър отидете до директорията, където сте съхранили вашето Angular приложение. Изпълнете следните команди, за да инициализирате вашата папка като git хранилище:
git init
git add.
git ангажирам -m "първо ангажирам" - Преместете кода в тази папка в новото отдалечено хранилище, което сте направили в GitHub. Следвай git дистанционно добавяне на оригинал, git клон, и git натискане команди, предоставени от GitHub на страницата на вашето отдалечено хранилище:
git дистанционно добавяне на оригинал <Вашата GitHub репо връзка>
git клон -M основен
git push -u произход основен - Можете да потвърдите, че вашият код на приложение Angular вече е във вашето отдалечено хранилище на GitHub, като опресните страницата на хранилището на GitHub.
Как да използвате Netlify за хостване на вашия код
За да хоствате вашия код с помощта на Netlify, ще трябва да му дадете достъп до вашия изходен код на GitHub. След това Netlify ще използва разст папка на вашия Angular проект, за да публикувате изградената версия на вашия код.
Можете да конфигурирате всички тези настройки, като следвате стъпките за конфигуриране, когато създавате нов сайт:
- Влезте или се регистрирайте в Netlify. Можете да го направите, като използвате идентификационните си данни за GitHub.
- Разгънете от главното табло и страницата със списък със сайтове Добавете нов сайти изберете Импортирайте съществуващ проект.
- Изберете GitHub.
- Кликнете върху Конфигурирайте Netlify в GitHub.
- Кликнете върху Инсталирай.
- Netlify ще покаже списък с вашите GitHub хранилища. Изберете тази, която искате да хоствате. Например, ако сте нарекли вашето хранилище „netlify-app“, изберете „netlify-app“ от списъка.
- В екрана за конфигурация оставете собственик, Клон за внедряване, и Базов указател полета на техните стойности по подразбиране. Ако публикувате конкретен клон, като например отделен клон „Производство“, можете да го добавите в Клон за внедряване поле. Променете Команда за изграждане поле за "ng build". За Публикуване на директория поле, тип dist/
. Ако не знаете какво е името на проекта, можете да отидете до папката dist на вашия проект, за да го намерите там. Например „dist/netlify-app“. - Кликнете върху Разположете сайт.
- Изчакайте внедряването да завърши. Това може да отнеме няколко минути и може да се наложи да опресните страницата. Ако всичко върви добре, ще можете да видите успешното внедряване в списъка с внедрявания. Кликнете върху вашето публикувано внедряване, например, Продукция: main@HEAD.
- Кликнете върху Отворено производствено внедряване бутон.
- Сега можете да видите уебсайта си в друг раздел, като използвате URL във формат на
.netlify.app. Ако хоствате уебсайт с множество пренасочвания, може да не можете да пренасочвате към други страници. В този случай има начин да поправете неуспешно пренасочване на Netlify. Ако искате, можете също променете вашето безплатно име на домейн.
Хостинг на вашия уебсайт с помощта на GitHub и Netlify
Надяваме се, че вече можете успешно да хоствате уебсайт с помощта на GitHub и Netlify. Можете да настроите автоматично внедряване в определени клонове на хранилище на GitHub. По този начин можете да автоматизирате и рационализирате внедряването на вашия уебсайт.
Но Netlify не е единственият начин, по който можете да внедрите Angular приложение онлайн. Можете също да използвате други платформи като GitHub Pages.
