stablo
v3.0.0
Stabloは、next.js、Tailwind CSS、およびSanity CMSでWeb3Templatesで構築されたJamstackブログテンプレートです。無料版とプロバージョンが付属しています。
無料版デモ→
プロバージョンデモ→
| 特徴 | 無料版 | プロバージョン |
|---|---|---|
| next.js v13 | ✅ | ✅ |
| /アプリディレクトリ | ✅ | ✅ |
| Tailwind CSS | ✅ | ✅ |
| SanityCMS（V3） | ✅ | ✅ |
| オンデマンドの再検証 | ✅ | |
| 新しい投稿 | 時間ベース | ✅ |
| モバイルレスポンシブ | ✅ | ✅ |
| ダーク＆ライトモード | ✅ | ✅ |
| 連絡先の作業ページ | ✅ | ✅ |
| アーカイブ（ページネーション） | ✅ | ✅ |
| カテゴリページ | ✅ | |
| 著者ページ | ✅ | |
| 検索ページ | ✅ | |
| ホームページ - デフォルト | ✅ | ✅ |
| ホームページ - 代替 | ✅ | |
| ホームページ - 最小限 | ✅ | |
| ホームページ-Lifestlye | ✅ | |
| ホームページ - 2列 | ✅ | |
| ブログ投稿 - デフォルト | ✅ | ✅ |
| ブログ投稿 - 最小限 | ✅ | |
| ブログ投稿-Lifestlye | ✅ | |
| ブログ投稿 - サイドバー付き | ✅ | |
| 6か月のサポート | ✅ | |
| 無料アップデート | ✅ | ✅ |
| ライセンス | GPL-2.0 | コマーシャル |
| 価格設定 | 無料 | 49ドル |
| 無料で展開します | Purchase Pro |
下の展開ボタンを使用してください。 Sanity Vercel Integrationを使用して、Vercelを使用してスターターを展開し、Sanity Studioに接続できます。
上記の展開は、次のものを自動的に構成します。
または、NetLifyまたはCloudFlareページやAWS増幅など、他のサービスに展開できます。
Webサイトを展開すると、空のように見えたり、適切に構成されていません。これが予想されます。デモで見られるように、もう少し手順を実行する必要があります。
まず、ローカルマシンに作成されたgithubリポジトリvercelをクローンします。次のコマンド構造を使用します。このコマンドを実行する前に、端子が正しいフォルダーにあることを確認してください。
git clone https://github.com/ < usename > / < repo > .git your-project-nameクローン化したら、プロジェクトのルートディレクトリから次のコマンドを実行します。これにより、Vercelプロジェクトがリンクされます。
npx vercel link次に、次のコマンドを実行して、 .env変数をローカルシステムにプルします。
npx vercel env pullこれで、新しい.env.localファイルが作成されていることがわかります。これがうまくいかない場合は、 .env.local.exampleに.env.localに名前を変更し、Sanity Project IDを手動で追加することもできます。
これで、コードエディターを開くことができます（まだそうでない場合は）vscodeをお勧めします。コードエディター内の統合端末のコマンドを実行します。
npm install
# or
yarn install
# or
pnpm installディスクスペースを保存するには、 pnpmを好みます。
すべてのコンテンツと画像を使用して、デモで見たもののように見えるには、以下の手順に従ってください。
@sanity/cliをインストールしていない場合は、最初にグローバルにインストールしてください。 npm install -g @sanity/cli
# or
pnpm install -g @sanity/cli次に、 sanity loginコマンドを使用してSanityにログインします
sanity login
これで、 sanity-importコマンドを実行してデモコンテンツをインポートできるようになります。ファイルは/lib/sanity/data/production.tar.gzにあり、以下のコマンドを実行することで自動的にロードされます。
npm run sanity-import
# or
pnpm sanity-import次に、以下のコマンドを使用してプロジェクトを実行します。
npm run dev
# or
pnpm devこれで、プロジェクトがアップするはずで、next.js Frontendはhttp：// localhost：3000で実行されます。
Sanity Studioはhttp：// localhost：3000/studioを使用してアクセスできます。また、次のコマンドを使用して別のhttps：// localhost：3333サーバーで実行できます。
npm run sanity
# or
pnpm sanity上記のすべての変更が行われたら、生産のすべての変更を確認するために、もう一度再びverceして再verceしてください。
git pushでき、新しい展開を自動的にトリガーする必要があります。そうでない場合は、次のコマンドを使用してvercelに展開することもできます。
npx vercel --prod
上記のワンクリック展開オプションを使用することをお勧めします。何らかの理由で、できない場合は、次の手順を使用して手動でインストールします。
Github Repoをクローンするか、ローカルマシンでダウンロードしたファイルを使用します。
.env変数。プロジェクトフォルダーを開き、 .env.local.exampleルートフォルダーに.env.localに変更し、Sanity Project IDを追加します。このリンクにアクセスして、新しいプロジェクトを作成できます：https：//www.sanity.io/get-started/create-project
すでにプロジェクトがある場合は、https：//sanity.io/manageからプロジェクトIDをコピーします
NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz
スタジオを適切に機能させるには、Cors起源を正気に追加する必要があります。これは通常、Vercel Deployを使用している場合に自動的にセットアップされます。 https://www.sanity.io/manage/personal/project/<project-id>/api project-id>/apiにアクセスして、cors起源を追加してください。
Add CORS originボタンをクリックし、 http://localhost:3000としてURLを入力し、[資格情報]チェックボックスをチェックします。
これで、上記の指示から継続してデモデータをインポートし、プロジェクトをローカルで実行できるようになります。
何かが期待どおりに機能していませんか？ githubの問題を提起します。パーソナライズされたサポートまたはヘルプが必要な場合は、Proバージョンの購入を検討してください。メールでお役に立てます。
