Instalacja i konfiguracja Statamic w środowisku ServBay

Statamic to nowoczesny system zarządzania treścią (CMS) oparty na frameworku Laravel, znany ze swojej elastyczności i rozbudowanych możliwości – idealny do budowy różnorodnych stron internetowych. Jedną z głównych cech Statamic jest domyślne przechowywanie treści i konfiguracji w systemie plików, z opcjonalnym wsparciem dla bazy danych.

W tym artykule krok po kroku pokażemy, jak zainstalować i skonfigurować Statamic za pomocą Composera w komplet­nym środowisku do lokalnego rozwoju ServBay. ServBay dostarcza niezbędny silnik PHP, wsparcie dla Composera oraz wygodny panel zarządzania witrynami dla Statamic.

Kroki instalacji Statamic

Proces instalacji Statamic w ServBay jest prosty i wydajny. Wykonaj poniższe kroki:

Krok 1: Utwórz katalog projektu

Najpierw należy utworzyć nowy podkatalog dla projektu Statamic w głównym katalogu stron ServBay: /Applications/ServBay/www. Otwórz Terminal i wykonaj polecenia:

cd /Applications/ServBay/www
mkdir servbay-statamic-app
cd servbay-statamic-app

Te polecenia przenoszą Cię do domyślnego katalogu stron ServBay, tworzą nowy folder servbay-statamic-app i wchodzą do niego.

Krok 2: Utwórz projekt Statamic przy użyciu Composera

ServBay jest wyposażony w Composera, czyli narzędzie do zarządzania zależnościami PHP. Nie musisz instalować go osobno – możesz od razu użyć go do stworzenia projektu Statamic.

Będąc w katalogu servbay-statamic-app, uruchom polecenie:

composer create-project statamic/statamic .

Polecenie spowoduje pobranie najnowszej wersji Statamic wraz z wszystkimi zależnościami do bieżącego katalogu (.). Poczekaj, aż proces pobierania i instalacji zostanie zakończony.

Krok 3: Konfiguracja serwera WWW (dodanie strony w ServBay)

Aby ServBay mógł obsługiwać Twój projekt Statamic, należy dodać nową konfigurację strony w aplikacji ServBay.

1. Uruchom aplikację ServBay: Otwórz aplikację desktopową ServBay.

2. Przejdź do zakładki „Strony”: Kliknij górną zakładkę „Strony” w interfejsie ServBay (w starszych wersjach może być nazwana „Hosty”).

3. Dodaj nową stronę: Naciśnij przycisk „+” w lewym dolnym rogu, aby dodać nową konfigurację strony.

4. Uzupełnij informacje o stronie: W oknie konfiguracyjnym wpisz:

   • Nazwa: Wybierz nazwę ułatwiającą identyfikację, np. My Statamic Site.
   • Domena: Lokalne domena do odwiedzin strony, najlepiej z końcówką .local, np. servbay-statamic.local. ServBay automatycznie skonfiguruje lokalne DNS.
   • Typ strony: Wybierz PHP.
   • Wersja PHP: Wskaż wersję PHP zgodną z Twoim projektem Statamic (zalecana możliwie najnowsza stabilna).
   • Katalog główny strony: To bardzo istotny krok! Plik wejściowy Statamic (index.php) znajduje się w podkatalogu public projektu. Wskaż ścieżkę: /Applications/ServBay/www/servbay-statamic-app/public.

5. Zapisz i zastosuj ustawienia: Po uzupełnieniu kliknij „Zapisz”. ServBay może poprosić o restart usług w celu zastosowania zmian – wykonaj restart, aby serwer WWW (domyślnie Caddy lub Nginx) aktywował nową konfigurację strony.

Krok 4: Konfiguracja środowiska Statamic

W katalogu głównym projektu Statamic korzysta z pliku .env do zarządzania konfiguracją środowiska (np. klucz aplikacji, połączenia do bazy danych i inne).

1. Skopiuj plik środowiska: Projekt Statamic zawiera plik przykładowy .env.example. Będąc w głównym katalogu projektu /Applications/ServBay/www/servbay-statamic-app, wykonaj:

   cp .env.example .env

2. Wygeneruj klucz aplikacji: Laravel/Statamic wymaga unikalnego klucza aplikacji do celów bezpieczeństwa, takich jak szyfrowanie sesji i wrażliwych danych. W katalogu projektu uruchom polecenie Artisan generujące klucz:

   php artisan key:generate

   Polecenie automatycznie generuje i uzupełnia wartość APP_KEY w pliku .env.

Krok 5: Uruchomienie i dostęp do Statamic

Twój serwis Statamic powinien być już poprawnie skonfigurowany i działać na ServBay.

1. Odwiedź stronę Statamic: Otwórz przeglądarkę i wpisz skonfigurowaną domenę, np. https://servbay-statamic.local. ServBay domyślnie tworzy certyfikat SSL (poprzez ServBay User CA lub ServBay Public CA), więc możesz korzystać z HTTPS. Powinieneś zobaczyć stronę powitalną Statamic.
2. Dostęp do panelu administracyjnego: Panel admina Statamic znajduje się zwykle pod ścieżką /cp. Przejdź do https://servbay-statamic.local/cp w przeglądarce. Ukaże się ekran logowania lub pierwszej konfiguracji panelu.
3. Utwórz konto administratora: Podczas pierwszej wizyty w panelu zostaniesz poprowadzony przez tworzenie konta administratora. Wpisz wymagany login, hasło oraz e-mail i kliknij „Utwórz konto”. Od tej pory możesz się logować i zarządzać swoim serwisem Statamic.

Krok 6: Instalacja dodatków i motywów (opcjonalnie)

Statamic posiada bogaty ekosystem dodatków i motywów, które rozszerzają funkcje lub zmieniają wygląd witryny.

1. Instalacja dodatków: Po zalogowaniu do panelu Statamic możesz instalować dodatki przez interfejs panelu (zwykle w lewej nawigacji) lub przy użyciu poleceń Composera. Instalacja przez panel jest intuicyjna.
2. Instalacja motywów: Motywy można dodawać podobnie, również poprzez panel lub kopiując pliki do odpowiednich katalogów projektu.

Tworzenie strony przy użyciu Statamic

Po instalacji i wstępnej konfiguracji możesz wykorzystać potencjał Statamic do budowy własnej witryny. Oto kilka podstawowych operacji:

Tworzenie treści i kolekcji

Statamic używa „kolekcji” (Collections) do organizacji treści – jest to odpowiednik typów postów lub stron w klasycznych CMS.

1. Tworzenie kolekcji: W panelu Statamic przejdź do sekcji „Treści” → „Kolekcje”, kliknij „Utwórz kolekcję”. Zdefiniuj jej nazwę (np. Posts, Pages) oraz ustawienia takie jak struktura tras i szablony pól.
2. Dodawanie treści: W utworzonej kolekcji kliknij „Nowy”, aby dodać artykuł, wpis czy stronę. Uzupełnij zawartość według wskazanych pól.

Konfiguracja menu nawigacyjnego

Możesz tworzyć i zarządzać menu nawigacyjnymi swojej strony.

1. Tworzenie nawigacji: W panelu admina przejdź „Treści” → „Nawigacja” i kliknij „Utwórz nawigację”. Nadaj nazwę, np. Główna Nawigacja.
2. Dodawanie pozycji do menu: Przeciągnij utworzone elementy treści (np. strony lub posty) do struktury nawigacji, budując hierarchię menu.

Personalizacja szablonów i stylów

Statamic pozwala używać silnika Blade do tworzenia szablonów na bazie Laravela – możesz peł­nie dostosować układ i wygląd witryny.

1. Edycja szablonów: Pliki widoków znajdują się zwykle w katalogu resources/views głównego folderu projektu. Zależnie od struktury Statamic, możesz edytować lub dodawać pliki Blade (.blade.php), personalizując strukturę HTML. Dla edycji głównego układu możesz np. zmodyfikować resources/views/layouts/default.blade.php:

   <!-- resources/views/layouts/default.blade.php -->
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>{{ $title ?? 'My Statamic Site' }}</title>
       {{-- Ładowanie skompilowanego CSS --}}
       <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   </head>
   <body>
       <header>
           {{-- Przykład: renderowanie nawigacji „main_navigation” --}}
           @inject('nav', 'Statamic\View\ViewServiceProvider')
           @if ($main_navigation = $nav->navigation('main_navigation'))
               <nav>
                   <ul>
                       @foreach ($main_navigation->tree() as $item)
                           <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                       @endforeach
                   </ul>
               </nav>
           @endif
       </header>
       <main>
           {{-- Renderowanie treści danej strony --}}
           @yield('content')
       </main>
       {{-- Ładowanie skompilowanego JavaScript --}}
       <script src="{{ mix('js/app.js') }}"></script>
   </body>
   </html>

2. Dodawanie własnych stylów i skryptów: Projekt Statamic zazwyczaj wykorzystuje narzędzia do kompilacji frontendu jak Laravel Mix lub Vite. Surowe pliki CSS i JS znajdziesz w resources/css i resources/js.

   Przykład stylów w resources/css/app.css:

   /* resources/css/app.css */
   body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       line-height: 1.6;
       color: #333;
       margin: 0;
       padding: 20px;
   }
   nav ul {
       list-style: none;
       padding: 0;
   }
   nav ul li {
       display: inline;
       margin-right: 15px;
   }

   Przykład prostego skryptu w resources/js/app.js:

   // resources/js/app.js
   console.log('Statamic frontend assets loaded!');
   
   // Przykład: prosta interakcja
   document.addEventListener('DOMContentLoaded', function() {
       const navItems = document.querySelectorAll('nav li a');
       navItems.forEach(item => {
           item.addEventListener('mouseover', () => {
               console.log(`Najechano na: ${item.textContent}`);
           });
       });
   });

3. Kompilacja zasobów frontendowych: Aby przekształcić surowe pliki na finalne CSS i JS, uruchom kompilację. Projekt Statamic posiada plik package.json, więc po zainstalowaniu zależności możesz uruchomić kompilację z użyciem npm lub yarn. ServBay obsługuje Node.js, więc możesz wydać:

   npm install
   npm run dev

   npm install zainstaluje zależności wymienione w package.json (np. Laravel Mix/Vite, Tailwind CSS, Vue/React itd.), a npm run dev wykona kompilację w trybie deweloperskim (zwykle wynikowe pliki są nieskompresowane i posiadają mapy źródłowe). Do środowiska produkcyjnego użyj npm run prod lub npm run build.

Podsumowanie

Po wykonaniu powyższych kroków masz już w pełni zainstalowany i skonfigurowany Statamic CMS w potężnym, lokalnym środowisku ServBay. ServBay, z kompletnym wsparciem PHP, Composer, serwerem WWW, wygodnym zarządzaniem stronami i obsługą Node.js, znacząco upraszcza proces lokalnej pracy z projektami opartymi o Statamic. Teraz możesz wykorzystać elastyczną strukturę plików i rozbudowane narzędzia Statamic do szybkiego tworzenia oraz rozwoju własnej strony internetowej!