ServBay 環境で Jigsaw をインストールおよび設定する

Jigsaw とは？

Jigsaw は Laravel ベースの静的サイトジェネレータで、ドキュメント、ブログ、シンプルな静的サイトを構築するためのものです。柔軟なテンプレートシステムと強力な開発ツールを提供しており、静的サイトの構築と管理が非常に簡単になります。

Jigsaw のインストール手順

この記事では、ServBay 環境で Jigsaw をインストールして設定する方法を紹介します。

手順 1：プロジェクトディレクトリを作成する

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

bash

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

手順 2：Composer を使用して Jigsaw プロジェクトを作成する

ServBay にはComposer がプリインストールされているため、直接 Composer を使用して Jigsaw プロジェクトを作成します：

bash

composer create-project tightenco/jigsaw

手順 3：Web サーバーを設定する

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

手順 4：Jigsaw サイトをビルドする

依存関係をインストールする
プロジェクトディレクトリで以下のコマンドを実行して npm 依存関係をインストールします：
bash
```
npm install
```
1
サイトをビルドする
以下のコマンドを実行して Jigsaw サイトをビルドします：
bash
```
./vendor/bin/jigsaw build
```
1

手順 5：ローカル開発サーバーを実行する

開発サーバーにアクセスする
ブラウザを開き、https://servbay-jigsaw.local にアクセスすると、Jigsaw サイトのローカル開発版が表示されます。

手順 6：Jigsaw サイトをカスタマイズする

コンテンツを編集する
source ディレクトリ内の Markdown ファイルと Blade テンプレートファイルを編集して、サイトのコンテンツとレイアウトをカスタマイズします。
新しいページを追加する
source ディレクトリに新しい Markdown ファイルを作成して新しいページを追加します。例えば、about.md ファイルを作成します：
markdown
```
---
title: "About Us"
---

# About Us

This is the about page.
```
1
2
3
4
5
6
7
ナビゲーションメニューを設定する
source/_layouts ディレクトリ内の Blade テンプレートファイルを編集して、新しいナビゲーションリンクを追加します。
サイトを再ビルドする
コンテンツまたはテンプレートを変更するたびに、以下のコマンドを再度実行して Jigsaw サイトをビルドします：
bash
```
./vendor/bin/jigsaw build
```
1

Jigsaw を使用してサイトを構築する

これで、ServBay 環境で Jigsaw を正常にインストールおよび構成できました。以下は一般的な操作例です：

ブログ記事を作成する

記事を作成する
source/_posts ディレクトリに新しい Markdown ファイルを作成してブログ記事を追加します。例えば、2024-06-05-my-first-post.md ファイルを作成します：
markdown
```
---
title: "My First Post"
date: 2024-06-05
---

# My First Post

This is the content of my first post.
```
1
2
3
4
5
6
7
8
サイトを再ビルドする
以下のコマンドを実行して Jigsaw サイトをビルドします：
bash
```
./vendor/bin/jigsaw build
```
1

スタイルとスクリプトをカスタマイズする

スタイルを編集する
source/_assets/sass ディレクトリ内の SCSS ファイルを編集して、サイトのスタイルをカスタマイズします。
スクリプトを編集する
source/_assets/js ディレクトリ内の JavaScript ファイルを編集して、サイトのインタラクションをカスタマイズします。
リソースをコンパイルする
以下のコマンドを実行して SCSS と JavaScript ファイルをコンパイルします：
bash
```
npm run dev
```
1

以上の手順で、ServBay 環境で Jigsaw をインストール、設定し、サイトの構築を開始することができます。Jigsaw のシンプルさと柔軟性のおかげで、静的サイトの構築に最適です。

ServBay 環境で Jigsaw をインストールおよび設定する ​

Jigsaw とは？ ​

Jigsaw のインストール手順 ​

手順 1：プロジェクトディレクトリを作成する ​

手順 2：Composer を使用して Jigsaw プロジェクトを作成する ​

手順 3：Web サーバーを設定する ​

手順 4：Jigsaw サイトをビルドする ​

手順 5：ローカル開発サーバーを実行する ​

手順 6：Jigsaw サイトをカスタマイズする ​

Jigsaw を使用してサイトを構築する ​

ブログ記事を作成する ​

スタイルとスクリプトをカスタマイズする ​