{"id":29256,"date":"2021-06-10T20:12:00","date_gmt":"2021-06-10T17:12:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29256"},"modified":"2021-10-18T03:33:35","modified_gmt":"2021-10-18T00:33:35","slug":"wdroz-witryne-statyczna-w-hostingu-firebase-za-darmo","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/wdroz-witryne-statyczna-w-hostingu-firebase-za-darmo\/","title":{"rendered":"Wdr\u00f3\u017c witryn\u0119 statyczn\u0105 w Hostingu Firebase za darmo"},"content":{"rendered":"

Hosting Firebase to us\u0142uga oferowana przez Google, kt\u00f3ra w bezpieczny spos\u00f3b obs\u0142uguje statyczne i dynamiczne strony internetowe. Jest to najlepsza darmowa us\u0142uga dla programist\u00f3w. Mo\u017cesz pokaza\u0107 klientowi projekt witryny, przedprodukcyjn\u0105 wersj\u0119 witryny, wdra\u017caj\u0105c j\u0105 na hostingu Firebase.<\/p>\n

U\u017cytkownik mo\u017ce korzysta\u0107 z darmowego planu Firebase do hostingu strony internetowej. Bezp\u0142atny plan obejmuje obs\u0142ug\u0119 niestandardowej domeny i SSL, 1 GB pami\u0119ci. Pami\u0119\u0107 1 GB wystarcza na mniejsze strony internetowe. Aby uzyska\u0107 list\u0119 wszystkich funkcji zawartych w planach darmowych i premium, sprawd\u017a ich stron\u0119 cenow\u0105<\/a>.<\/p>\n

Chocia\u017c hosting Firebase zapewnia obs\u0142ug\u0119 uruchamiania kodu Node.js\/JavaScript, w tym artykule skupimy si\u0119 tylko na wdro\u017ceniu statycznej witryny internetowej. O wdro\u017ceniu dynamicznej strony internetowej w Firebase napisz\u0119 w przysz\u0142o\u015bci kolejny artyku\u0142.<\/p>\n

Pierwsze kroki<\/h3>\n

Aby rozpocz\u0105\u0107, musisz mie\u0107 zainstalowany Node.js w swoim systemie. Mo\u017cesz pobra\u0107 pakiet Node.js do instalacji na ich oficjalnej stronie internetowej<\/a>.<\/p>\n

Po zainstalowaniu Node.js w systemie przejd\u017a do konsoli Firebase<\/a> i utw\u00f3rz projekt, klikaj\u0105c pole \u201eDodaj projekt". Podaj wszystkie informacje zgodnie z monitem.<\/p>\n

Po utworzeniu projektu Firebase nast\u0105pi przekierowanie do panelu projektu. Kliknij \u201eHosting” na lewym pasku bocznym, a nast\u0119pnie \u201eRozpocznij”. Otworzy si\u0119 strona, na kt\u00f3rej znajdziesz instrukcje dotycz\u0105ce wdro\u017cenia. Przejdziemy przez to w nast\u0119pnej cz\u0119\u015bci samouczka.<\/p>\n

Wdr\u00f3\u017c witryn\u0119 statyczn\u0105 w Hostingu Firebase<\/h3>\n

Po stworzeniu projektu na Firebase, za pomoc\u0105 kilku polece\u0144, mo\u017cemy wdro\u017cy\u0107 statyczn\u0105 stron\u0119 internetow\u0105 na hostingu Firebase. Wymaga najpierw zainstalowania Firebase CLI, a nast\u0119pnie skonfigurowania go lokalnie.<\/p>\n

Zainstaluj Firebase CLI<\/h4>\n

W celu wdro\u017cenia pierwsz\u0105 rzecz\u0105, kt\u00f3r\u0105 musisz zrobi\u0107, jest instalacja Firebase CLI. Zainstalowa\u0142e\u015b Node.js, wi\u0119c u\u017cyj npm do zainstalowania CLI. Otw\u00f3rz terminal i zainstaluj Firebase CLI za pomoc\u0105 npm w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n

npm install -g firebase-tools<\/code><\/pre>\n
Zauwa\u017c, \u017ce globalnie instalujemy narz\u0119dzia Firebase przy u\u017cyciu -g<\/code>. W ten spos\u00f3b mo\u017cesz uruchamia\u0107 polecenia Firebase z dowolnego katalogu na swoim komputerze. Teraz z terminala uruchom nast\u0119pne polecenie:<\/p>\n
firebase login<\/code><\/pre>\n
Mo\u017ce przekierowa\u0107 Ci\u0119 do strony logowania do konta Google. Wystarczy post\u0119powa\u0107 zgodnie z sugestiami. To tylko proces autoryzacji w Firebase, wi\u0119c projekt zostanie wdro\u017cony tylko na Twoim koncie.<\/p>\n
Inicjowanie i wdra\u017canie<\/h4>\n
Po autoryzacji konta Google za pomoc\u0105 interfejsu Firebase CLI musisz zainicjowa\u0107 Firebase w katalogu g\u0142\u00f3wnym projektu. W tym celu uruchom poni\u017csze polecenie w katalogu g\u0142\u00f3wnym projektu.<\/p>\n
firebase init<\/code><\/pre>\n
Po uruchomieniu powy\u017cszego polecenia CLI prosi o inn\u0105 opcj\u0119 do wyboru. Powiniene\u015b wybra\u0107 opcj\u0119 \u201eHosting”, poruszaj\u0105c si\u0119 po strza\u0142ce, a nast\u0119pnie naciskaj\u0105c klawisz spacji. Naci\u015bnij Enter po wybraniu opcji \u201eHosting”.<\/p>\n
\"Wdr\u00f3\u017c<\/a><\/p>\n
Nast\u0119pnie wybierz projekt, kt\u00f3ry utworzy\u0142e\u015b w konsoli Firebase. Naci\u015bnij klawisz Enter. Nast\u0119pne pytanie brzmi: Czego chcesz u\u017cy\u0107 jako katalogu publicznego? (publiczny). Nie musisz tutaj nic robi\u0107. Po prostu naci\u015bnij klawisz Enter.<\/p>\n
W przypadku nast\u0119pnego pytania Skonfigurowa\u0107 jako aplikacj\u0119 jednostronicow\u0105 (przepisa\u0107 wszystkie adresy URL do \/index.html)? (t\/N), naci\u015bnij N i naci\u015bnij Enter, poniewa\u017c nie jeste\u015bmy wdra\u017can\u0105 aplikacj\u0105 jednostronicow\u0105.<\/p>\n
Po tym poleceniu zobaczysz kilka plik\u00f3w utworzonych w katalogu g\u0142\u00f3wnym wraz z public<\/code>folderem. Ten public<\/code>katalog b\u0119dzie s\u0142u\u017cy\u0142 jako katalog g\u0142\u00f3wny do wdro\u017cenia. W tym public<\/code>katalogu musisz przechowywa\u0107 pliki projektu.<\/p>\n
Teraz utw\u00f3rzmy statyczne strony HTML. Poniewa\u017c ten samouczek jest przeznaczony tylko do cel\u00f3w demonstracyjnych, tworz\u0119 podstawowe strony HTML.<\/p>\n
public\/index.html<\/strong><\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Document<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<h1>This is Index Page<\/h1>\n\u00a0\u00a0\u00a0\u00a0<a href=\"index.html\">Home<\/a> | <a href=\"about.html\">About<\/a>\n<\/body>\n<\/html><\/code><\/pre>\n
public\/o.html<\/strong><\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Document<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<h1>This is About Page<\/h1>\n\u00a0\u00a0\u00a0\u00a0<a href=\"index.html\">Home<\/a> | <a href=\"about.html\">About<\/a>\n<\/body>\n<\/html><\/code><\/pre>\n
public\/styl.css<\/strong><\/p>\n
h1 {\n\u00a0\u00a0\u00a0\u00a0color: blueviolet;\n}<\/code><\/pre>\n
To s\u0105 nasze statyczne strony, kt\u00f3re zamierzamy wdro\u017cy\u0107 na hostingu Firebase.<\/p>\n
Je\u015bli chcesz przetestowa\u0107 projekt lokalnie przed wdro\u017ceniem, uruchom polecenie serve w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n
firebase serve<\/code><\/pre>\n
Uruchomi tw\u00f3j lokalny serwer pod adresem http:\/\/localhost:5000<\/a>. Przetestuj sw\u00f3j projekt i je\u015bli wszystko jest w porz\u0105dku, wdr\u00f3\u017c go za pomoc\u0105 polecenia:<\/p>\n
firebase deploy<\/code><\/pre>\n
Po zako\u0144czeniu wdra\u017cania w konsoli powinien by\u0107 widoczny adres URL hostingu.<\/p>\n
\"Wdr\u00f3\u017c<\/a><\/p>\n
Uruchom adres URL hostingu w przegl\u0105darce i powiniene\u015b zobaczy\u0107, \u017ce Twoja witryna zosta\u0142a pomy\u015blnie wdro\u017cona. Pami\u0119taj, \u017ce mo\u017cesz wdra\u017ca\u0107 sw\u00f3j projekt tyle razy. Po wprowadzeniu zmian uruchom polecenie deploy, a Twoja witryna zostanie wdro\u017cona z now\u0105 wersj\u0105.<\/p>\n
Przywr\u00f3\u0107 swoj\u0105 wersj\u0119<\/h3>\n
Firebase przechowuje histori\u0119 wszystkich wersji wdro\u017ce\u0144. Mo\u017cesz nawet wr\u00f3ci\u0107 do starszej wersji. Przejd\u017a do strony Hosting Firebase, gdzie znajdziesz opcj\u0119 wycofania (zak\u0142adaj\u0105c, \u017ce wdro\u017cy\u0142e\u015b wi\u0119cej ni\u017c jedn\u0105 wersj\u0119).<\/p>\n
\"Wdr\u00f3\u017c<\/a><\/p>\n
Wykonuj\u0105c cofanie do wersji, mo\u017cesz bezpo\u015brednio prze\u0142\u0105cza\u0107 si\u0119 mi\u0119dzy ka\u017cd\u0105 wersj\u0105 swojej witryny. Jest prosty i pomocny na etapie projektowania i rozwoju.<\/p>\n
Mam nadziej\u0119, \u017ce znasz ju\u017c podstawy procesu wdra\u017cania hostingu Firebase. Podziel si\u0119 swoimi przemy\u015bleniami i sugestiami w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n