BoP #12: Przenosimy blog na serwer + Git

Dziś przenosimy blog na własnym serwerze i dodatkowo wprowadzimy Gita.

 

Przenosimy blog na serwer

Jeśli ktoś nie wie jak uruchomić własny serwer (na swoim komputerze) to zapraszam do zapoznania się z ostatnim artykułem dotyczącym instalacji XAMPP’a. Jeśli pracujecie na folderze utworzonym w tym wpisie to usuńcie tylko plik „index.html” tak żebyśmy mogli pracować na pustym folderze 😉

Zaczniemy od skopiowania widoku (kodu html) naszego bloga do nowego pliku „index.php”. Czym się różni plik „index.html” (który mieliśmy usunąć) od pliku „index.php”? w plikach „.html” możemy umieszczać kod HTML, CSS i JS a w plikach „.php” możemy dodatkowo umieszczać kod PHP. Dlaczego w takim razie tworzymy plik „index.php” skoro nie mamy kodu PHP? Jeszcze nie używamy PHP ale to się wkrótce zmieni i możemy się już teraz na to przygotować.

Kod, który mamy zapisać w plik znajduje się na Codepen.io. Kopiujemy całość z panelu oznaczonego „HTML”:

 

Po zapisaniu pliki i przejściu pod adres (w przeglądarce) „blog.dev” (lub inny jeśli zmieniliście) otrzymamy:

 

Następnie tworzymy sobie katalog „css” a w nim plik „main.css”. Do tego pliku kopiujemy kod CSS z panelu oznaczonego „CSS” a następnie zapisujemy ten plik.

 

Wystarczy tylko „powiedzieć” naszej stronie skąd ma wziąć sobie CSS dodając w sekcji <head> naszej strony:

 

Jak już robimy porządki to przeniesiemy też kod JS do osobnego pliku. Tworzymy katalog „js” wraz z plikiem „main.js” i zapisujemy w nim kod JS:

 

Na koniec usuwamy kod JS z pliku „index.php” (razem z <script> i </script) i przed </body> dodajemy:

 

Zawartość folderu „blog” powinna wyglądać tak:

  • css/
    • main.css
  • js/
    • main.js
  • index.php

 

I już – blog został w pełni przeniesiony (tak, tak, nie było tego dużo 🙂 )

 

Git

Jeśli nie znacie jeszcze Gita to warto zapoznać się z serią dotycząca Gita i GitHuba.

Zanim zacznę od utworzenia nowego repozytorium to utworzę sobie plik „.gitignore” i dodam do niego linijkę „.idea”. Dlaczego? Otóż korzystam z PHPStorm, który w katalogu z projektem tworzy folder „.idea” z własnymi plikami (np. konfiguracja dla tego projektu) a nie potrzebuję aby ten folder znalazł się w repozytorium Gita. Dodając plik lub folder do pliku „.gitignore” (kązdy wpis w osobnej linijce) informujemy Gita, że ten plik lub folder ma nie być włączony do repozytorium i Git nie będzie śledził w nim zmian.

Na początek inicjujemy (tworzymy) nowe repozytorium (jak zawsze – pierwsza linijka to komenda a pozostałe to wynik działania tej komendy widoczne w konsoli/terminalu):

 

Dodajemy do repozytorium wszystkie pliki:

 

I commitujemy (zapisujemy) zmiany:

 

GitHub

Zaczniemy od utworzenia nowego repozytorium na GitHubie. Jeśli nie mieliście do czynienia z GitHubem to w 4 części serii o Gicie pokazywałem jak założyć konto i jak zacząć pracę z repozytorium, więc dzisiaj nie będzie aż tak szczegółowo.

Klikamy „plus” przy awatarze a następnie „New repository”

 

Wpisujemy nazwę (u mnie „blog”) i klikamy „Create repository”

 

Przechodzimy do konsoli/terminala i tworzymy powiązanie między naszym repozytorium na komputerze a tym na GitHubie:

[email protected]:morawcik/blog.git” – będzie inne dla każdego z Was: „morawcik” to nazwa użytkownika a „blog” to nazwa projektu.

 

Na koniec pushujemy (wrzucamy) nasz projekt na GitHuba:

 

To wszystko – nasz blog został przeniesiony na serwer a kod znajduje się na GitHubie. W następnej części zaczniemy poznawać PHP 😉


Post 12 z 13 z serii Blog od podstaw