ServBay環境でのStatamicのインストールと設定

Statamicとは？

Statamicは、Laravelフレームワークに基づいた現代的なコンテンツ管理システム（CMS）で、さまざまなタイプのウェブサイトを構築するのに適しています。Statamicはその柔軟性と強力な機能で知られており、ファイルシステムを使用してコンテンツを保存しますが、データベースの使用も可能です。

Statamicのインストール手順

この記事では、ServBay環境でComposerを使用してStatamicをインストールおよび設定する方法を紹介します。

ステップ1：プロジェクトディレクトリを作成

まず、ServBayのwwwディレクトリに新しいプロジェクトディレクトリを作成します：

bash

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

ステップ2：Composerを使用してStatamicプロジェクトを作成

ServBayにはすでにComposerが付属しているので、直接Composerを使用してStatamicプロジェクトを作成できます：

bash

composer create-project statamic/statamic .

ステップ3：Webサーバーの設定

新しいウェブサイトを追加
ServBayを開き、「ホスト」タブをクリックして新しいウェブサイトを追加します：
- 名前：My Statamic Site
- ドメイン：servbay-statamic.local
- ウェブサイトの種類：PHP
- PHPバージョン：対応するPHPバージョンを選択
- ウェブサイトのルートディレクトリ：/Applications/ServBay/www/servbay-statamic-app/public
設定を保存
設定を保存してServBayを再起動します。

ステップ4：Statamicの設定

環境設定ファイルの編集
プロジェクトのルートディレクトリで、.env.exampleファイルをコピーして.envにリネームします：
bash
```
cp .env.example .env
```
1
アプリケーションキーを生成
次のコマンドを実行して新しいアプリケーションキーを生成します：
bash
```
php artisan key:generate
```
1

ステップ5：Statamicの起動

Statamicにアクセス
ブラウザを開いてhttps://servbay-statamic.localにアクセスすると、Statamicのウェルカムページが表示されます。
コントロールパネルにアクセス
ブラウザを開いてhttps://servbay-statamic.local/cpにアクセスすると、Statamicコントロールパネルのログインページが表示されます。
管理者アカウントを作成
ページの指示に従って管理者アカウントを作成し、ユーザー名、パスワード、メールアドレスを入力し、「アカウントを作成」をクリックします。

ステップ6：プラグインとテーマのインストール

プラグインのインストール
Statamicコントロールパネルにログインし、「プラス」アイコンをクリックして「プラグイン」を選択し、必要なプラグインを検索してインストールします。
テーマのインストール
「プラス」アイコンをクリックして「テーマ」を選択し、好きなテーマを選んでインストールします。

Statamicを使ってウェブサイトを構築する

これで、ServBay環境でStatamicをインストールおよび設定し、ウェブサイトの構築を開始できます。以下はいくつかの一般的な操作です：

コンテンツとコレクションの作成

コレクションの作成
Statamicコントロールパネルで「コンテンツ」->「コレクション」をクリックし、新しいコレクションを作成します。コレクション名とその他の設定を入力し、「保存」をクリックします。
コンテンツの作成
「コンテンツ」->「コレクション」をクリックし、先ほど作成したコレクションを選択し、「新規作成」をクリックして、コンテンツタイトルと内容を入力し、「保存」をクリックします。

ナビゲーションメニューの設定

ナビゲーションの作成
Statamicコントロールパネルで「コンテンツ」->「ナビゲーション」をクリックし、新しいナビゲーションを作成します。ナビゲーション名とその他の設定を入力し、「保存」をクリックします。
ナビゲーション項目の追加
コレクションとコンテンツをナビゲーションに追加して「保存」をクリックします。

テンプレートとスタイルのカスタマイズ

テンプレートの編集

resources/viewsディレクトリでBladeテンプレートファイルを編集し、ウェブサイトのレイアウトとコンテンツ表示をカスタマイズします。例えば、default.blade.phpファイルを編集します：

html

<!-- resources/views/layouts/default.blade.php -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'My Statamic Site' }}</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <header>
        <nav>
            <ul>
                @foreach ($navigation as $item)
                    <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                @endforeach
            </ul>
        </nav>
    </header>
    <main>
        @yield('content')
    </main>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

スタイルの追加
resources/cssディレクトリでCSSファイルを作成し、テンプレートファイルにリンクします。例えば、app.cssファイルを作成します：
css
```
/* resources/css/app.css */
body {
    font-family: Arial, sans-serif;
}
```
1
2
3
4
テンプレートファイルにCSSファイルをリンクします：
html
```

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
```
1
2
スクリプトの追加
resources/jsディレクトリでJavaScriptファイルを作成し、テンプレートファイルにリンクします。例えば、app.jsファイルを作成します：
javascript
```
// resources/js/app.js
document.addEventListener('DOMContentLoaded', function() {
    console.log('Hello, Statamic!');
});
```
1
2
3
4
テンプレートファイルにJavaScriptファイルをリンクします：
html
```

<script src="{{ mix('js/app.js') }}"></script>
```
1
2
リソースのコンパイル
次のコマンドを実行してCSSとJavaScriptファイルをコンパイルします：
bash
```
npm install
npm run dev
```
1
2

以上の手順を実行することで、ServBay環境でStatamicをインストールおよび設定し、ウェブサイトの構築を開始することができます。Statamicの柔軟性と強力な機能は、さまざまなタイプのウェブサイトを構築するのに最適です。

ServBay環境でのStatamicのインストールと設定 ​

Statamicとは？ ​

Statamicのインストール手順 ​

ステップ1：プロジェクトディレクトリを作成 ​

ステップ2：Composerを使用してStatamicプロジェクトを作成 ​

ステップ3：Webサーバーの設定 ​

ステップ4：Statamicの設定 ​

ステップ5：Statamicの起動 ​

ステップ6：プラグインとテーマのインストール ​

Statamicを使ってウェブサイトを構築する ​

コンテンツとコレクションの作成 ​

ナビゲーションメニューの設定 ​

テンプレートとスタイルのカスタマイズ ​