在 ServBay 環境中安裝與設定 Statamic
Statamic 是一款現代化的內容管理系統(CMS),以 Laravel 框架為基礎,因其靈活性與強大功能而著稱,非常適合打造各類型網站。Statamic 的顯著特色是預設以檔案系統儲存內容與設定,同時也提供數據庫作為選項。
本文將詳盡引導您,如何在功能強大的本地 Web 開發環境 ServBay 中,利用 Composer 安裝與設定 Statamic。ServBay 為 Statamic 提供所需的 PHP 執行環境、Composer 支援,並具備方便的網站管理工具。
安裝 Statamic 的步驟
在 ServBay 環境下安裝 Statamic 直觀又高效,請依照下列步驟操作:
步驟 1:建立專案目錄
首先,請在 ServBay 的網站根目錄 /Applications/ServBay/www
下,為您的 Statamic 專案建立新子目錄。開啟終端機,執行以下命令:
cd /Applications/ServBay/www
mkdir servbay-statamic-app
cd servbay-statamic-app
2
3
這將切換至 ServBay 的預設網站根目錄,建立一個名為 servbay-statamic-app
的新資料夾,並進入該資料夾。
步驟 2:使用 Composer 建立 Statamic 專案
ServBay 已預先安裝好 Composer,這是 PHP 最常用的套件管理工具。無需另行安裝,您可直接用它來建立 Statamic 專案。
在剛剛建立的 servbay-statamic-app
目錄下,執行以下 Composer 指令:
composer create-project statamic/statamic .
這條指令會下載 Statamic 的最新版,以及所有相依套件,並將專案安裝至目前的目錄(.
)。請耐心等候下載與安裝完成。
步驟 3:設定 Web 伺服器(於 ServBay 新增網站)
為了讓 ServBay 可以代管您的 Statamic 專案,需要在 ServBay 應用內新增一個網站設定。
打開 ServBay 應用程式:啟動 ServBay 桌面應用。
切換至「網站」分頁:於 ServBay 介面上方點選「網站」分頁(註:舊版可能稱為「主機」)。
新增網站:點擊左下角「加號 (+)」按鈕以新增新網站設定。
填寫網站資訊:在跳出的設定視窗,請填寫下述資訊:
- 名稱:方便識別,例如
My Statamic Site
。 - 網域名稱:供本地開發訪問,建議使用
.local
作為結尾,例如servbay-statamic.local
。ServBay 會自動完成本地 DNS 解析。 - 網站類型:選擇
PHP
。 - PHP 版本:選擇與 Statamic 專案相容的 PHP 版本(通常建議用較新且穩定的版本)。
- 網站根目錄:此設定非常關鍵。Statamic 的進入檔案
index.php
位於public
子目錄,因此需將根目錄指到/Applications/ServBay/www/servbay-statamic-app/public
。
- 名稱:方便識別,例如
儲存並套用設定:填寫完畢後,請點擊「儲存」按鈕。ServBay 可能提示您重啟服務以套用變更。請依指示操作,確保 ServBay 的 Web 伺服器(預設為 Caddy 或 Nginx)能載入新的網站設定。
步驟 4:設定 Statamic 執行環境
Statamic 會於專案根目錄下透過 .env
檔案管理環境參數(如應用金鑰、資料庫連線等)。
複製環境檔:Statamic 專案內包含
.env.example
範本檔案。在終端中,確保仍位於/Applications/ServBay/www/servbay-statamic-app
專案根目錄,執行下列指令複製檔案:bashcp .env.example .env
1產生應用金鑰:Laravel/Statamic 需要一組獨一無二的應用金鑰,以便加密 Session 與其他敏感資訊。於專案根目錄執行 Artisan 指令產生金鑰:
bashphp artisan key:generate
1指令會自動於
.env
檔填入APP_KEY
的值。
步驟 5:執行並存取 Statamic
現在,您的 Statamic 網站已於 ServBay 中設定完成,可以開始使用。
訪問 Statamic 網站:開啟瀏覽器,在網址列輸入您於步驟 3 設定的網域名稱,例如
https://servbay-statamic.local
。ServBay 預設會自動配置 SSL 憑證(透過 ServBay User CA 或 ServBay Public CA),讓您可直接以 HTTPS 存取。您應該會看到 Statamic 的歡迎頁面。進入控制後台:Statamic 後台管理面板通常位於
/cp
路徑。於瀏覽器前往https://servbay-statamic.local/cp
,即可看到 Statamic 控制後台的登入或初始化設定頁。建立管理員帳號:首次訪問後台時,系統會引導您建立管理員。依頁面指示輸入用戶名、密碼及信箱,點擊「建立帳號」即可。完成後,您便能登入並開始管理網站。
步驟 6:安裝擴充套件與佈景主題(選用)
Statamic 具備精彩的擴充套件與主題生態,可大幅拓展功能與外觀。
- 安裝插件:登入 Statamic 控制後台後,可經由左側導覽欄的相關選項,或透過 Composer 指令安裝插件。大多數情況使用後台操作會較直覺。
- 安裝主題:同樣地,您可透過控制後台,或直接將主題檔案置於指定目錄來安裝主題。
使用 Statamic 建構網站
完成安裝與設定後,就能發揮 Statamic 的各項強大功能來建構自己的網站。這裡提供幾個基礎操作參考:
建立內容與集合
Statamic 主要以「集合」(Collections)來組織內容,類似傳統 CMS 的文章型別或頁面型別。
- 建立集合:於 Statamic 控制後台,「內容」->「集合」中按下「建立集合」。請定義集合名稱(如
Posts
,Pages
)及其他設定(如路由結構、欄位藍圖等)。 - 建立內容項目:進入剛創建的集合下,點擊「新增」以稿撰具體內容(如一篇部落格或一個頁面),並依藍圖填寫所需欄位。
設定導覽選單
您可建立、管理網站的導航選單:
- 建立導覽:進入 Statamic 控制後台,「內容」->「導航」,點擊「建立導覽」,並為其命名(如
Main Navigation
)。 - 新增導覽項目:將您建立的內容項目(集合內容或獨立頁面)拖曳進導覽結構中,調整排列層級。
客製化模板與樣式
Statamic 基於 Laravel,可直接利用 Blade 模板引擎來控制網站版型與內容呈現。
編輯模板:網站視圖檔案一般位於專案根目錄的
resources/views
。可依 Statamic 的模板結構(常見子目錄如layouts
,partials
,collections
等)編輯或新增 Blade (.blade.php
) 檔案自訂 HTML 架構。例如,修改布局檔resources/views/layouts/default.blade.php
來更動整體頁面框架。html<!-- 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> {{-- 引用已編譯 CSS --}} <link rel="stylesheet" href="{{ mix('css/app.css') }}"> </head> <body> <header> {{-- 範例:渲染名為 '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> {{-- 渲染目前頁面內容 --}} @yield('content') </main> {{-- 引用已編譯 JavaScript --}} <script src="{{ mix('js/app.js') }}"></script> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32加入樣式與腳本:Statamic 專案通常整合了 Laravel Mix 或 Vite 等前端資源編譯工具。原始 CSS、JS 檔一般位於
resources/css
及resources/js
目錄中。例如,在
resources/css/app.css
撰寫 CSS 樣式: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; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16並於
resources/js/app.js
撰寫 JavaScript:javascript// resources/js/app.js console.log('Statamic frontend assets loaded!'); // 範例:簡單的互動 document.addEventListener('DOMContentLoaded', function() { const navItems = document.querySelectorAll('nav li a'); navItems.forEach(item => { item.addEventListener('mouseover', () => { console.log(`Hovering over: ${item.textContent}`); }); }); });
1
2
3
4
5
6
7
8
9
10
11
12編譯前端資源:若要將這些原始檔轉為瀏覽器可用的 CSS 與 JS,可使用 npm 或 yarn 安裝前端相依套件並執行編譯腳本。ServBay 亦內建 Node.js ,可直接輸入:
bashnpm install npm run dev
1
2npm install
會根據package.json
安裝前端相依(如 Laravel Mix/Vite, Tailwind CSS, Vue/React 等),npm run dev
在開發模式下編譯資源,產生未壓縮檔案與 Source Map,方便除錯。如進行正式部署,可執行npm run prod
或npm run build
。
總結
按上述步驟操作後,您已成功於強大的本地開發環境 ServBay 內安裝、設定並初步掌握 Statamic CMS 的運用。ServBay 提供一體化的 PHP/Composer/Web 伺服器、便捷的網站管理以及 Node.js 支援,大幅簡化了 Statamic 的本機開發流程。現在,就開始盡情利用 Statamic 靈活的檔案架構與強大功能,快速打造及迭代您的網站專案吧!