tina cloud starter

ティナスターター？

このNext.jsスターターは、あなたとあなたのチームがあなたのウェブサイトの構造化されたコンテンツを視覚的にライブで編集するためのTinacmsを搭載しています。

コンテンツは、GitHubリポジトリに保存されているMarkdownとJSONファイルを介して管理され、Tina GraphQL APIを介して照会されます。

特徴

• 認証、コンテンツモデリング、視覚編集、チーム管理のためのティナヘッドレスCMS。
• /adminルートからサイトを視覚的に編集するためのvercel展開。
• ローカルGRAQHQLサーバーを使用したファイルシステムからのローカル開発ワークフロー。

要件

• git、node.js Active LTS、PNPMはローカル開発用にインストールされています。
• ライブ編集を考慮します。

ローカル開発

プロジェクトの依存関係をインストールします。

注記

node.jsの最高のパッケージマネージャーを知っていますか？適切なパッケージマネージャーを使用すると、開発ワークフローを大幅に強化できます。依存関係の速度と効率的な取り扱いにPNPMを使用することをお勧めします。 SSWからこのルールをチェックすることにより、PNPMがプロジェクトに最適な選択である理由の詳細をご覧ください。

 pnpm install

プロジェクトをローカルに実行します：

 pnpm dev

ローカルURL

• http：// localhost：3000：ウェブサイトを閲覧します
• http：// localhost：3000/admin：tina cloudに接続して編集モードに移動します
• http：// localhost：3000/exit-admin：ティナクラウドからログアウトします
• http：// localhost：4001/altair/：graphql遊び場でクエリをテストしてAPIドキュメントを閲覧する

スターターをローカルに構築する（ホストされたコンテンツAPIを使用）

.env.exampleを.envに置き換えます

 NEXT_PUBLIC_TINA_CLIENT_ID=<get this from the project you create at app.tina.io>
TINA_TOKEN=<get this from the project you create at app.tina.io>
NEXT_PUBLIC_TINA_BRANCH=<Specify the branch with Tina configured>

プロジェクトの構築：

pnpm build

助けを得る

あなたが持っているかもしれない錫の課題の助けを得るために：

• ティナについて学ぶためにドキュメントにアクセスしてください。
• フィードバックを共有するために、私たちの不一致に参加してください。
• コミュニティフォーラムにアクセスして質問してください。
• Tinacmsダッシュボードのチャットウィジェットを通じてサポートを得る
• 私たちにメールを送信して、私たちのチームとのコールをスケジュールし、あなたのコンテキストとあなたが達成しようとしていることについてもっと共有してください。
• 何かが機能していない場合は、問題を検索または開きます。
• @tina_cmsのTwitterで連絡してください。

開発のヒント

ビジュアルスタジオコードGraphQL拡張機能

Type Auto Completionの恩恵を受けるように、GraphQL拡張機能をインストールします。

タイプスクリプト

コンポーネントがデータの形状に一致するようにするための良い方法は、自動生成されたタイプスクリプトタイプを活用することです。これらは、 tina構成が変更されたときに再構築されます。

ライセンス

Apache 2.0ライセンスに基づいてライセンスされています。