Sebastian N.

present my blog programming

Hostowanie projektu na githubie

2019-03-29 SeNServer-siding

Hosting projektu jest wielce ciekawą sprawą i momentami trudną, jednakżę bardzo przydatną z wielu względów, o których trochę opowiem w dzisiejszym wpisie.

unsplash.com

Hosting? co to jest?

W kilku słowach można by powiedzieć, że jest to udostępnienie deployowanej, czyli umieszczonej paczki produkcyjnej naszej aplikacji na zewnętrznym serwerze, tak by na naszej domenie client mógł przeglądać efekty pracy. Paczka produkcyjna najczęściej będzie zawierała się w folderze public lub build.

W przypadku tytułowego github-a musimy wiedzieć, że do deployowania naszej paczki produkcyjnej będzie potrzeba:

  • pobranie npm install gh-pages —save-dev,
  • przygotowanie skryptów predeploy i deploy w package.json,
  • ustawienie source do hostingu na branch gh-pages.

Przygotowanie krok po kroku…

Zacznijmy od najprostszego, a więc pierwszego kroku czyli odnalezienia na stronie https://www.npmjs.com/package/gh-pages odpowiedniej paczki,jak już wiemy będzie to npm install gh-pages —save-dev. Następnie należy ją w cmd/gitCMD lub innej consoli w miejscu projektu lokalnego pobrać. W Visula Studio Code możecie od razu otworzyć miejsce projektu i w nim go załadować.

unsplash.com

Drugi krok to przygotowanie skryptów predeploy i deploy w package.json:

"scripts": {
  "build": "react-scripts build",
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

W zasadzie potrzebne będą trzy skrypty, ponieważ skrypt predeploy będzie trigerował skrypt build tworzący paczkę produkcyjną. Natomiast skrypt deploy będzie tą właśnie paczkę umieszczał na branchu gh-pages.

I krok numer trzy to ustawienie source do hostingu na branch gh-pages:

unsplash.com Wybieramy zakładkę settings i przechodzimy do pola source:

unsplash.com

I tam ustalamy, że źródłem naszej hostowanej strony na githubie jest branch gh-pages, na którym po użyciu skryptów powinna znaleźć się paczka produkcyjna.

Podsumowanie

W ten o to łatwy sposób możesz, jeżeli tylko chcesz umieścić swoją pracę na hoście, który póki co jest darmowy. A co za tym idzie pokazywać swoje efekty pracy rekruterom, rodzinie, czy też samemu podziwiać swoje dzieło. Miłego!