Darmowy hosting stron z Netlify

Darmowy hosting stron z Netlify

Istnieje wiele sposobów na darmowy hosting stron. Można skorzystać z heroku, github-pages czy aws s3. Można, ale według mnie istnieje lepsze rozwiązanie. Netlify pozwala na hostowanie zarówno stron statycznych jak i rozbudowanych aplikacji opartych o Reacta, Vue czy Angulara. Najlepsze jest to, że proces deploymentu jest banalnie prosty.

W tym wpisie pokażę ci jak stworzyć prosty projekt (HTML, SCSS, Javascript, parcel) i udostępnić go w internecie korzystając z Netlify.

Stworzenie repozytorium na GitHub

Pierwszy krok to stworzenie repozytorium na GitHub. Zakładam, że umiesz korzystać z gita i GitHuba. Jeśli nie, to postępuj zgodnie z samouczkiem z GitHuba.

Stworzenie projektu

Czas stworzyć projekt. Po pierwsze trzeba stworzyć strukturę katalogów. Będzie wyglądać ona następująco:

  • package.json
  • src/
    • content/
      • Pliki HTML
    • styles/
      • W tym przypadku scss
    • js/
      • Tutaj umieszczony zostanie cały Javascript

Aby stworzyć taką strukturę możesz skorzystać ze skryptu poniżej.

mkdir example-app && cd example-app
npm init -y
mkdir src
mkdir src/content
touch src/content/index.html
mkdir src/styles
touch src/styles/main.scss
mkdir src/js
touch src/js/index.js

Narzędziem niezbędnym w każdym projekcie (który będzie zawierał więcej niż 100 linii Javascriptu) jest bundler. Według mnie opcje są dwie: webpack i parcel. Nie zagłębiając się w szczegóły, parcel nie wymaga żadnej konfiguracji, wspiera scss i to na niego pada wybór za każdym razem gdy zaczynam jakiś pet project. Głębsze porównanie tych rozwiązań możesz znaleźć tutaj: webpack vs parcel.

Zainstalujmy więc nasz bundler

npm install parcel-bundler

Aby ułatwić sobie pracę, dodam skrypty do package.json

"scripts": {
  "dev": "parcel src/content/index.html",
  "build": "parcel build src/content/index.html"
},

Ostatnim przystankiem będzie uzupełnienie plików, które zostały stworzone na początku.

<!--/src/content/index.html-->

<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <link rel="stylesheet" href="../styles/main.scss" />
     <title>Title</title>
   </head>
   <body>
     Super cool site
   </body>
   <script src="../js/index.js"></script>
 </html>
// /src/styles/main.scss

body {
  background-color: red;
}
// /src/js/index.js

console.log("Hello, world!");

Wszystko gotowe. Wystarczy odpalić npm run dev i na localhost:1234 uruchomi się aplikacja.

Pierwszy deployment

Aby dokonać deploymentu, kod musi być w repozytorium. Pamiętaj, aby dodać node_modules, .cache i dist do .gitignore. Teraz wystarczy tylko wejść na stronę Netlify i postępować zgodnie ze screenami poniżej.

Na początek rejestracja. Najłatwiej jest zrobić to po przez GitHub, ponieważ większość z nas i tak ma tam konto.

Następnie klikamy przycisk stworzenia nowej strony po przez Gita.

Wybieramy GitHub, ponieważ tam jest przechowywany kod.

Kolejnym krokiem jest skonfigurowanie aplikacji Netlify na GitHubie.

Wyskoczy nam okienko informujące o instalacji Netlify. Możemy wybrać czy chcemy dać dostęp do wszystkich repozytoriów czy tylko do wybranych.

Po zainstalowaniu Netlify, wyświetlą nam się dostępne repozytoria. Należy wybrać repozytorium z aplikacją.

Przechodzimy do najważniejszego kroku. Musimy wpisać tutaj dwie rzeczy:

  • Build command – czyli komendę, której Netlify użyje do zbudowania aplikacji. W tym przypadku jest to wcześniej stworzony skrypt build.
  • Publish directory – jest to folder w którym będzie znajdować się zbudowana aplikacja. parcel domyślnie umieszcza zbudowaną aplikację w folderze dist.

Po kliknięciu Deploy site zostaniemy przeniesieni do głównego ekranu gdzie pojawi się informacja o tym, że strona jest deployowana.

Po chwili strona zostanie wdrożona. Pojawi się jej podgląd i link do niej.

Nazwa została losowo wygenerowana, ale można ją zmienić na jakąkolwiek się chce. Aby to zrobić należy przejść do zakładki Settings > Site Details > Change site name.

To był zarazem pierwszy jak i ostatni deployment. Od teraz, po każdej zmianie wypchniętej na GitHuba, Netlify pobierze nowy kod, wykona komendę budowania i udostępni stronę w sieci. To oznacza, że od git push do nowej wersji strony w internecie nie minie nawet 5 minut.

Podsumowanie

Dzięki Netlify hosting stron jest darmowy, prosty i przyjemny. Wystarczy kilka minut, aby udostępnić projekt w internecie, a funkcjonalności takie jak netlify forms albo netlify functions pozwolą na wzbogacenie frontendowych aplikacji o odrobinę logiki po stronie serwera. Repozytorium z kodem użytym w tym wpisie znajdziecie tutaj.

Pobierz darmowy ebook zawierający 20 pytań, które możesz usłyszeć na rozmowie kwalifikacyjnej