Cài đặt và Cấu hình Statamic trong Môi trường ServBay

Statamic là một hệ quản trị nội dung (CMS) hiện đại dựa trên khung Laravel, nổi tiếng với tính linh hoạt và sức mạnh, rất phù hợp cho việc xây dựng mọi loại trang web. Một điểm nổi bật của Statamic là mặc định sử dụng hệ thống file để lưu trữ nội dung và cấu hình, nhưng cũng hỗ trợ sử dụng cơ sở dữ liệu nếu cần.

Bài viết này sẽ hướng dẫn chi tiết cách bạn có thể cài đặt và thiết lập Statamic thông qua Composer trong môi trường phát triển web nội bộ ServBay. ServBay cung cấp đầy đủ môi trường PHP, hỗ trợ Composer và quản lý website thuận tiện cho Statamic.

Các bước cài đặt Statamic

Việc cài đặt Statamic trong môi trường ServBay rất nhanh chóng và hiệu quả. Vui lòng thực hiện theo các bước sau:

Bước 1: Tạo thư mục dự án

Đầu tiên, bạn cần tạo một thư mục con dành riêng cho dự án Statamic trong thư mục gốc website của ServBay: /Applications/ServBay/www. Mở Terminal và chạy các lệnh sau:

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

Các lệnh trên sẽ chuyển đến thư mục gốc mặc định của ServBay, tạo mới thư mục servbay-statamic-app và di chuyển vào thư mục này.

Bước 2: Sử dụng Composer để tạo dự án Statamic

ServBay đã cài đặt sẵn Composer, công cụ quản lý phụ thuộc cho PHP, nên bạn có thể sử dụng trực tiếp để tạo dự án Statamic mà không cần cài thêm gì.

Trong thư mục servbay-statamic-app vừa tạo, chạy lệnh Composer sau:

composer create-project statamic/statamic .

Lệnh trên sẽ yêu cầu Composer tải phiên bản mới nhất của Statamic cùng tất cả phụ thuộc, sau đó cài vào thư mục hiện tại (.). Hãy kiên nhẫn chờ quá trình tải và cài đặt hoàn tất.

Bước 3: Cấu hình máy chủ web (Thêm website trong ServBay)

Để ServBay có thể chạy dự án Statamic, bạn cần thêm một website mới trong ứng dụng ServBay.

1. Mở ứng dụng ServBay: Khởi động ứng dụng ServBay trên desktop.

2. Đi đến tab “Website”: Trong giao diện ServBay, nhấn vào tab “Website” ở thanh trên cùng (lưu ý: có thể là “Host” ở bản cũ).

3. Thêm website mới: Nhấn nút dấu cộng (+) ở góc dưới bên trái để thêm cấu hình website mới.

4. Nhập thông tin website: Trong cửa sổ cấu hình, điền các thông tin sau:

   • Tên: Nhập tên dễ nhớ, ví dụ My Statamic Site.
   • Tên miền: Nhập tên miền phát triển nội bộ, nên sử dụng đuôi .local, ví dụ servbay-statamic.local. ServBay sẽ tự động cấu hình DNS nội bộ.
   • Loại website: Chọn PHP.
   • Phiên bản PHP: Chọn phiên bản PHP phù hợp với Statamic (thường nên dùng phiên bản mới ổn định).
   • Thư mục gốc website: Rất quan trọng! File chạy chính của Statamic là index.php nằm trong thư mục con public của dự án. Vì vậy, bạn cần đặt thư mục gốc website thành: /Applications/ServBay/www/servbay-statamic-app/public.

5. Lưu và áp dụng cấu hình: Sau khi điền xong, nhấn “Lưu”. ServBay có thể sẽ yêu cầu bạn khởi động lại dịch vụ để áp dụng thay đổi – hãy làm theo hướng dẫn để đảm bảo máy chủ web (mặc định là Caddy hoặc Nginx) nạp cấu hình mới.

Bước 4: Cấu hình môi trường Statamic

Trong thư mục gốc dự án, Statamic sử dụng file .env để quản lý cấu hình môi trường (như khóa bảo mật, kết nối database, v.v.).

1. Sao chép file môi trường: Trong thư mục dự án Statamic sẽ có sẵn file mẫu .env.example. Hãy đảm bảo bạn đang ở thư mục gốc /Applications/ServBay/www/servbay-statamic-app và chạy lệnh sau:

   cp .env.example .env

2. Tạo khóa bảo mật: Laravel/Statamic cần một khóa bí mật giúp mã hóa session và những dữ liệu nhạy cảm. Hãy chạy lệnh Artisan sau trong thư mục dự án để tạo khóa này:

   php artisan key:generate

   Lệnh trên sẽ tự động sinh và điền giá trị cho biến APP_KEY trong file .env.

Bước 5: Chạy và truy cập Statamic

Lúc này website Statamic của bạn đã được cấu hình và sẵn sàng chạy trên ServBay.

1. Truy cập website Statamic: Mở trình duyệt web, nhập tên miền bạn đặt ở Bước 3, ví dụ https://servbay-statamic.local. ServBay mặc định gán sẵn chứng chỉ SSL (qua ServBay User CA hoặc ServBay Public CA), bạn có thể truy cập bằng HTTPS. Bạn sẽ thấy trang chào mừng của Statamic.
2. Truy cập Control Panel: Bảng quản trị của Statamic thường có tại đường dẫn /cp. Hãy truy cập https://servbay-statamic.local/cp trên trình duyệt, bạn sẽ thấy màn hình đăng nhập hoặc thiết lập Control Panel.
3. Tạo tài khoản quản trị viên: Khi truy cập lần đầu Control Panel, hệ thống sẽ hướng dẫn bạn tạo tài khoản admin. Làm theo hướng dẫn trên màn hình: nhập tên người dùng, mật khẩu và email. Sau khi hoàn tất, bạn đã có thể đăng nhập và bắt đầu quản lý website Statamic.

Bước 6: Cài đặt Plugin và Giao diện (Tùy chọn)

Statamic có hệ sinh thái phong phú về plugin và theme giúp mở rộng tính năng cũng như thay đổi giao diện.

1. Cài Plugin: Đăng nhập Control Panel và cài plugin trực tiếp từ giao diện (thường có ở thanh bên trái) hoặc sử dụng Composer. Việc cài qua Control Panel sẽ trực quan hơn.
2. Cài Theme: Tương tự, bạn có thể cài theme qua Control Panel hoặc chép thư mục theme vào vị trí chỉ định.

Xây dựng Website với Statamic

Sau khi cài đặt và cấu hình Statamic thành công, bạn có thể bắt đầu xây dựng website bằng các tính năng mạnh mẽ mà Statamic cung cấp. Sau đây là một số hướng dẫn cơ bản:

Tạo nội dung và Collection

Statamic sử dụng khái niệm “Collection” để tổ chức nội dung, tương tự như loại bài viết (“Post Type”) hay trang (“Page”) trong các CMS truyền thống.

1. Tạo Collection: Trong Control Panel, đi đến “Nội dung” -> “Collection”, nhấn “Tạo Collection mới”. Đặt tên collection (ví dụ: Posts, Pages) và các thiết lập khác như cấu trúc route, blueprint trường dữ liệu,...
2. Thêm nội dung: Bên trong mỗi collection vừa tạo, nhấn “Tạo mới” để thêm bài viết hoặc trang. Sử dụng các trường thông tin theo blueprint đã định nghĩa cho collection này.

Cấu hình Menu điều hướng

Bạn có thể thiết lập và quản lý menu điều hướng cho website của mình.

1. Tạo Menu: Trong Control Panel, đi đến “Nội dung” -> “Điều hướng”, nhấn “Tạo menu mới”. Đặt tên cho menu, ví dụ “Main Navigation”.
2. Thêm mục menu: Kéo thả các nội dung đã tạo (từ collection hoặc page độc lập) vào cấu trúc menu, tổ chức theo cấp bậc tùy ý.

Tùy chỉnh Giao diện và Kiểu dáng

Statamic dựa trên Laravel nên bạn có thể sử dụng Blade để kiểm soát bố cục và hiển thị nội dung website.

1. Chỉnh sửa Template (Giao diện): Các file view thường nằm ở resources/views. Bạn có thể chỉnh sửa hoặc tạo các file Blade (.blade.php) tùy theo cấu trúc mẫu của Statamic (thường gồm các thư mục layouts, partials, collections, v.v.). Ví dụ, chỉnh sửa file layout tại resources/views/layouts/default.blade.php để thay đổi khung chung của website.

   <!-- 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>
       {{-- Nhúng CSS đã biên dịch --}}
       <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   </head>
   <body>
       <header>
           {{-- Ví dụ: hiển thị navigation có tên '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>
           {{-- Hiển thị nội dung trang hiện tại --}}
           @yield('content')
       </main>
       {{-- Nhúng JavaScript đã biên dịch --}}
       <script src="{{ mix('js/app.js') }}"></script>
   </body>
   </html>

2. Thêm Style và Script: Statamic thường sử dụng Laravel Mix hoặc Vite để biên dịch resource front-end. File CSS và JavaScript gốc thường nằm trong resources/css và resources/js.

   Ví dụ, viết CSS riêng trong 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;
   }

   Viết JavaScript trong resources/js/app.js:

   // resources/js/app.js
   console.log('Statamic frontend assets loaded!');
   
   // Ví dụ: Tương tác đơn giản
   document.addEventListener('DOMContentLoaded', function() {
       const navItems = document.querySelectorAll('nav li a');
       navItems.forEach(item => {
           item.addEventListener('mouseover', () => {
               console.log(`Hovering over: ${item.textContent}`);
           });
       });
   });

3. Biên dịch tài nguyên front-end: Để chuyển các file nguồn thành CSS/JS có thể dùng trên trình duyệt, hãy chạy lệnh biên dịch. Dự án Statamic thường có file package.json, bạn có thể cài dependency và chạy biên dịch bằng npm hoặc yarn. ServBay hỗ trợ Node.js nên có thể chạy trực tiếp:

   npm install
   npm run dev

   npm install giúp cài đặt tất cả dependency front-end (Laravel Mix/Vite, Tailwind CSS, Vue/React,...). npm run dev sẽ biên dịch ở chế độ phát triển (thường chưa nén và có sourcemap để debug). Với môi trường production, dùng npm run prod hoặc npm run build.

Tổng kết

Qua các bước trên, bạn đã hoàn toàn cài đặt, cấu hình và làm quen với cách sử dụng Statamic CMS trong môi trường phát triển mạnh mẽ của ServBay. ServBay cung cấp môi trường tích hợp (PHP, Composer, máy chủ web, quản lý website tiện lợi, và hỗ trợ Node.js), giúp đơn giản hóa quy trình phát triển Statamic local. Giờ đây bạn có thể tận dụng tối đa cấu trúc file linh hoạt và các tính năng mạnh mẽ của Statamic để xây dựng và phát triển website một cách nhanh chóng, hiệu quả.