在 ServBay 環境中安裝與設定 Statamic

Statamic 是一款現代化的內容管理系統（CMS），以 Laravel 框架為基礎，因其靈活性與強大功能而著稱，非常適合打造各類型網站。Statamic 的顯著特色是預設以檔案系統儲存內容與設定，同時也提供數據庫作為選項。

本文將詳盡引導您，如何在功能強大的本地 Web 開發環境 ServBay 中，利用 Composer 安裝與設定 Statamic。ServBay 為 Statamic 提供所需的 PHP 執行環境、Composer 支援，並具備方便的網站管理工具。

安裝 Statamic 的步驟

在 ServBay 環境下安裝 Statamic 直觀又高效，請依照下列步驟操作：

步驟 1：建立專案目錄

首先，請在 ServBay 的網站根目錄 /Applications/ServBay/www 下，為您的 Statamic 專案建立新子目錄。開啟終端機，執行以下命令：

bash

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

這將切換至 ServBay 的預設網站根目錄，建立一個名為 servbay-statamic-app 的新資料夾，並進入該資料夾。

步驟 2：使用 Composer 建立 Statamic 專案

ServBay 已預先安裝好 Composer，這是 PHP 最常用的套件管理工具。無需另行安裝，您可直接用它來建立 Statamic 專案。

在剛剛建立的 servbay-statamic-app 目錄下，執行以下 Composer 指令：

bash

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 專案根目錄，執行下列指令複製檔案：
bash
```
cp .env.example .env
```
1
產生應用金鑰：Laravel/Statamic 需要一組獨一無二的應用金鑰，以便加密 Session 與其他敏感資訊。於專案根目錄執行 Artisan 指令產生金鑰：
bash
```
php 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>

加入樣式與腳本：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;
}

並於 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}`);
        });
    });
});

編譯前端資源：若要將這些原始檔轉為瀏覽器可用的 CSS 與 JS，可使用 npm 或 yarn 安裝前端相依套件並執行編譯腳本。ServBay 亦內建 Node.js ，可直接輸入：
bash
```
npm install
npm run dev
```
1
2
npm 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 靈活的檔案架構與強大功能，快速打造及迭代您的網站專案吧！

在 ServBay 環境中安裝與設定 Statamic ​

安裝 Statamic 的步驟 ​

步驟 1：建立專案目錄 ​

步驟 2：使用 Composer 建立 Statamic 專案 ​

步驟 3：設定 Web 伺服器（於 ServBay 新增網站） ​

步驟 4：設定 Statamic 執行環境 ​

步驟 5：執行並存取 Statamic ​

步驟 6：安裝擴充套件與佈景主題（選用） ​

使用 Statamic 建構網站 ​

建立內容與集合 ​

設定導覽選單 ​

客製化模板與樣式 ​

總結 ​