ServBay環境でのSculpinのインストールと設定
概要
Sculpinは、PHPベースでパワフルかつ柔軟な静的サイトジェネレーターです。ブログやドキュメントサイト、TwigテンプレートやMarkdownファイルなどの動的コンテンツを高速な静的HTMLページへ変換したいプロジェクトに特に最適です。Composerで依存管理し、Symfonyコンポーネントを活用しているため、開発者には馴染み深く信頼できる開発体験を提供します。
ServBayはmacOS専用に設計されたローカルWeb開発環境で、PHPやComposer、各種データベース(MySQL, PostgreSQL, MongoDB, Redis)、Webサーバー(Caddy, Nginx)などを統合し、わかりやすいGUIで管理できます。ServBayを使うことでmacOS上でのSculpin開発環境のセットアップが非常に簡単になり、PHPバージョン管理、依存解決、Webサーバーの設定もシームレスに行えます。
本ガイドでは、ServBay環境でのSculpinのインストールおよび設定、さらにローカル開発用Webサイトの立ち上げ手順について詳しく説明します。
想定ユースケース
- PHP技術スタックで高速な静的ブログを構築したい場合
- オープンソースプロジェクトや製品のための静的ドキュメントサイトを生成したい場合
- データベース不要の静的ランディングページや企業サイトを素早く立ち上げたい場合
- TwigテンプレートエンジンとMarkdownによる快適なコンテンツ執筆、静的サイトの安全性・パフォーマンスを活かしたい場合
前提条件
作業開始前に、以下の条件を満たしていることを確認してください。
- macOS上でServBayをインストール・起動済みであること。ServBayには必要なPHP環境、Composer、Webサーバー(CaddyまたはNginx)が含まれています。
- 基本的なコマンドライン操作の知識があること。
- PHP、Composer、Markdownの基本的な概念を理解していること。
Sculpin インストール手順
以下は、ServBay環境でSculpinをインストール・設定するための詳細な手順です。
手順1:プロジェクトディレクトリの作成
まず、ServBayのWebサイトルートディレクトリ(/Applications/ServBay/www
)配下に、新しいプロジェクトディレクトリを作成します。ここではサンプル名としてservbay-sculpin-app
を使用します。
ターミナルを開いて、以下のコマンドを実行します。
cd /Applications/ServBay/www
mkdir servbay-sculpin-app
cd servbay-sculpin-app
2
3
このディレクトリにSculpinプロジェクトのファイルが格納されます。
手順2:ComposerでSculpinプロジェクトを作成
ServBayには標準でComposerが付属しているので、追加インストールは不要です。composer
コマンドをそのまま端末で利用できます。
ここではSculpin公式のブログスケルトンプロジェクトを使って素早くスタートします。先ほど作成したservbay-sculpin-app
ディレクトリ内で、次のComposerコマンドを実行しましょう。
composer create-project sculpin/sculpin-blog-skeleton .
このコマンドにより、Sculpinのブログテンプレートとその全依存パッケージがComposer経由でダウンロードされ、カレントディレクトリ(.
)にインストールされます。
手順3:ServBayでWebサイトを設定
ServBayのWebサーバー(CaddyまたはNginx)越しにSculpinサイトへアクセスするには、ServBayでサイト設定が必要です。
- ServBayアプリを起動:ServBayのGUIを立ち上げます。
- 「Webサイト」タブへ移動:ウィンドウ上部の「Webサイト」タブを選択します。
- 新しいサイトを追加:左下の「+」ボタンで新規サイト設定を追加します。
- サイト情報を入力:
- 名前:サイト名(例:
My Sculpin Site
)を分かりやすく入力。 - ドメイン:ローカルでアクセスしたいドメイン(例:
servbay-sculpin.local
)。ServBayは.local
ドメイン用のローカルDNS設定やSSL証明書(ServBay User CA経由)を自動で行います。 - サイトタイプ:
PHP
を選択(SculpinはPHPアプリです)。 - PHPバージョン:利用したいPHPバージョンを選択。ServBayは複数PHPバージョンに対応しており、通常は新しめのバージョンでOKです。
- ドキュメントルート:ここがポイントです。Sculpinで生成された静的ファイルはプロジェクト内の
output_dev
またはoutput_prod
に出力されます。ローカル開発時は以下のように開発用出力ディレクトリを指定します:/Applications/ServBay/www/servbay-sculpin-app/output_dev
- 名前:サイト名(例:
- 設定を保存:入力が済んだら「保存」ボタンを押します。ServBayが自動的にWebサーバー設定へ反映し、多くの場合サービスの手動再起動は不要です。
手順4:Sculpinサイトのビルド
ServBayでWebサイトを設定できたら、次はSculpinに静的ファイルを生成させます。
ターミナル上で、引き続き/Applications/ServBay/www/servbay-sculpin-app
プロジェクトルートにいることを確認し、以下のコマンドで依存パッケージをインストールします(手順2で済んでいれば再実行しなくても構いませんが、一度実施しておけば安心です)。
composer install
次に、Sculpinのビルドコマンドを実行してサイトを生成します。
vendor/bin/sculpin generate --watch
vendor/bin/sculpin
:ComposerでインストールされるSculpin実行ファイルのパスです。generate
:generate
サブコマンドで静的サイトを生成(source
ディレクトリのコンテンツやテンプレートを参照、output_dev
などへファイルを出力)。--watch
:このオプションでsource
ディレクトリの変更を監視し、ファイル編集時に自動再生成されます。開発時に非常に便利です。
コマンド実行後、「Sculpin has generated your site!」などと表示されれば、静的ファイルがoutput_dev
ディレクトリに生成完了です。
手順5:ローカル開発サイトへアクセス
これでServBayで設定したドメイン名からSculpinサイトにアクセスできます。
ブラウザで下記アドレスにアクセスしてください:
https://servbay-sculpin.local
ドキュメントルートをoutput_dev
に設定し、sculpin generate --watch
コマンドも稼働中であれば、https://servbay-sculpin.local
を開くたびに最新のサイト内容やテンプレート変更をプレビューできます。ServBayの自動SSL証明書機能によりHTTPSアクセスも問題ありません。
Sculpin開発の基本
ここまででServBay上にSculpinを構築できましたので、本格的な静的サイト開発を始められます。代表的な基本操作をご紹介します。
Sculpinプロジェクト構成の概要
Sculpinの主なディレクトリやファイル構成を理解しておきましょう。
servbay-sculpin-app/
├── app/ # アプリ設定およびキャッシュ
├── output_dev/ # 開発環境用静的ファイル出力先(ここをServBayのドキュメントルートに指定)
├── output_prod/ # 本番用静的ファイル出力先
├── source/ # 元コンテンツ(Markdown, Twigテンプレート, 静的アセット等)
│ ├── _layouts/ # Twigレイアウトファイル
│ ├── _posts/ # ブログ投稿用Markdownファイル
│ ├── assets/ # 静的アセット(CSS、JS、画像等)
│ └── index.md # トップページ用Markdown
├── vendor/ # Composer依存パッケージ
├── sculpin.yml # Sculpin主要設定ファイル
├── composer.json # Composer依存設定ファイル
└── ...その他
2
3
4
5
6
7
8
9
10
11
12
13
作業の大半はsource
ディレクトリ配下で行います。
ブログ記事を作成する
Sculpinのブログに新しい記事を追加するには、source/_posts
ディレクトリにMarkdownファイルを新規作成するだけです。ファイル名はYYYY-MM-DD-slug.md
が一般的です。
例として、2024-06-06-my-first-post.md
を作成します。
---
title: "私の初めての記事"
date: 2024-06-06
tags: [チュートリアル, Sculpin, ServBay]
---
# 私の初めての記事
これは初めて作成したSculpinブログ記事の内容です。ServBayやSculpinの活用ノウハウをここでシェアします。
Markdown記法や書式を自由に使えます。
## 小見出し
リスト:
- 項目1
- 項目2
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ファイル保存後、sculpin generate --watch
コマンドが有効になっていれば、変更を自動検出してサイトを再生成します。https://servbay-sculpin.local
をリロードすると記事が表示されます。
新規ページを作成する
独立した新ページ(例:「私たちについて」ページ)を作る場合、source
ディレクトリ直下にMarkdownファイル(例:about.md
)を追加します。
---
title: "私たちについて"
layout: page.html.twig # 利用するレイアウトファイルを指定
---
# ServBay Sculpinガイドについて
このページは、ServBayとSculpinを使った静的サイト構築のガイドです。
2
3
4
5
6
7
8
保存後、Sculpinはoutput_dev/about/index.html
(フレンドリーURL用設定の場合)を生成します。https://servbay-sculpin.local/about/
で直接アクセスできます。
スタイル・スクリプトをカスタマイズ
CSSやJavaScriptなど静的アセットは通常source/assets
に保管します。たとえばサイトのデザインを変更したい場合はsource/assets/css/style.css
を編集します。
アセットファイル修正時も、Sculpinの--watch
オプションによって自動ビルドが行われます。
本番サイトをビルドする
開発が完了したら、本番環境用にサイトをビルドしましょう。多くの場合、本番用ビルドではアセット圧縮など最適化処理も行われます。
以下のコマンドで本番用サイトを生成します。
vendor/bin/sculpin generate --env=prod
静的ファイルがoutput_prod
ディレクトリに出力されます。そのままGitHub Pages、Netlify、Vercel、またはご自身のWebサーバーにアップロードして公開できます。
ServBayから本番ビルドの内容確認がしたい場合は、サイト設定の「ドキュメントルート」を/Applications/ServBay/www/servbay-sculpin-app/output_prod
に変更して保存するとOKです。
注意事項
- ServBayが起動し、該当Webサイトが有効化されていることを確認してください。
- ターミナルで
sculpin generate --watch
コマンドが動作しているか確認しましょう(自動リビルドのため)。 - ServBayのサイト設定にて「ドキュメントルート」がSculpin出力ディレクトリ(通常
output_dev
)になっているか再確認しましょう。 - ServBayは
.local
ドメイン用に自動でSSL証明書を発行しますが、macOS側でServBay User CAの信頼が必要な場合があります。詳細はServBay公式ドキュメントをご覧ください。
よくある質問(FAQ)
Q: ファイルを修正してもサイトが更新されません。
A: プロジェクトディレクトリでvendor/bin/sculpin generate --watch
を実行しているか確認し、エラーでコマンドが停止していないか端末出力もご覧ください。ブラウザのキャッシュクリアやプライベートモードでの再表示もお試しください。
Q: https://servbay-sculpin.local
アクセス時にSSLエラーが出ます。
A: ServBayは.local
用の自己署名証明書を発行しますので、macOS側でServBay User CAを信頼する必要があります。CAインストール方法はServBay公式ドキュメントを参照してください。
Q: PHPバージョンを切り替えたい場合は?
A: ServBayアプリの「パッケージ」タブで各種PHPバージョンのインストール・管理が可能です。「Webサイト」タブで該当SculpinサイトのPHPバージョンを好きなものに変更し、保存してください。
Q: Sculpinはどのようなテンプレートやマークアップ言語対応ですか?
A: デフォルトでTwigテンプレートエンジンを採用し、コンテンツ記述でMarkdownも広くサポートしています。
まとめ
ServBayの統合環境を利用すれば、macOS上でSculpin静的サイトジェネレーターのインストール・設定が容易になります。標準搭載のPHP・Composer、自動構成のWebサーバー・SSL環境のおかげで、ローカル開発が驚くほど効率的です。本ガイドに沿って環境構築・運用を進めれば、すぐに高品質なSculpin静的サイトを制作・プレビューできます。Sculpinの多彩な機能とServBayの便利な管理機能を組み合わせて、煩雑なローカル設定に手間取ることなく、魅力的なコンテンツ制作へ集中しましょう。