nuxt netlify cms starter templateダウンロード - nuxt netlify cms starter templateソースコードのダウンロード

nuxt netlify cms starter template

その他のカテゴリー

v2.0.0

ダウンロード

Nuxt.js + Netlify CMS スターターテンプレート

Vue.js と Netlify CMS を使用して、サーバーレスの静的 Web サイトを構築します。

これは、Nuxt v1.x に基づいて、Vue.js と Netlify CMS を使用して静的 Web サイトを構築するためのスターターテンプレートです。対象となる内容:

Vue CLI 経由でセットアップしますか?
ほぼ空の Nuxt.js プロジェクトを簡単にセットアップします。
現在、Vue CLI v3.0 用に最適化されていません。
Netlify CMS によるコンテンツ編集✏️
Netlify CMS は、Git リポジトリに直接接続してマークダウンファイルを編集するクライアント側 CMS です。
他のファイル形式もサポートしていますが、このテンプレートはデフォルトのfrontmatterマークダウン形式でのみ機能します。
Nuxtent/Nuxtdown モジュール経由で Vue.js のコンテンツを表示します?️
Nuxtdown モジュール (Nuxtent からの修正フォーク) を使用すると、コンテンツをクエリして UI に表示できます。
Nuxt.js による静的サイトの生成✅
Nuxt.js は、ユニバーサル Vue.js アプリケーションを構築するための有名なフレームワークであり、静的サイトを生成します。

Nuxt.js + Netlify CMS スターターテンプレート

構成
発達
生産
FTP 経由の手動展開
Netlify へのデプロイ
他の CI ソリューションと一緒に導入する
前提条件
設定
使用法
既知の問題
貢献

前提条件

node 8.0+とnpm 5.0+以降がインストールされていることを確認してください
Netlify CMS と Nuxt.js が何であるかはご存知でしょう。

設定

vue-cli 経由でインストール: 新しいバージョンの Vue CLI を使用する場合、このテンプレートはまだ新しい Vue CLI 用に最適化されていないため、 vue initが機能するためには追加のパッケージをインストールする必要がある可能性があります。

 $ vue init renestalder/nuxt-netlify-cms-starter-template my-project
  $ cd 私のプロジェクト
                  # 依存関係をインストール$ npm install # または、yarn install

プロジェクトを git リポジトリにプッシュする: コンテンツを編集できるようにするには、プロジェクトを git リポジトリにプッシュする必要があります。 CMS は常に git リポジトリに直接接続し、 static/admin/config.ymlに設定されたブランチのコンテンツを編集します。

はい、開始するための重要な手順は完了しました。次に、インフラストラクチャに合わせてすべてのコンポーネントを正しく構成します。

使用法

構成

CMS 認証とモデルリポジトリがホストされる場所と、CMS のユーザーがコンテンツを編集するためにログインする方法を構成します。コンテンツのファイルとフィールドも定義します。
ファイル: static/admin/config.yml
ドキュメント: 公式 Netlify CMS ドキュメント -> 設定
ルーティングとクエリ
初期状態では、UI にはコンテンツがどこに保存されているか、どの動的ルートがどのコンテンツに属しているかがわかりません。 Nuxt.js はデフォルトで静的ページのみをマップできます。異なるファイル名を持つブログ投稿のような動的ルートは検出されません。この設定は Nuxtdown によって行われます。
ファイル: nuxtdown.config.js
ドキュメント: Nuxtdown Readme
ウェブサイトの一般的な情報
HTML の<head>タグやページタイトルなどの一般的な情報は、Nuxt.js によって設定されます。 Nuxt.js のルーティング設定を気にする必要はありません。これは Nuxtdown によって解決されます。
ファイル: nuxt.config.js
ドキュメント: 公式 Nuxt.js ドキュメント -> 構成

発達

開発中に、アプリケーションのクライアント側 SPA バージョンを実行します。 devまたはserveタスクのどちらか適切なものを使用してください。彼らも同じことをします。

 # localhost:3000$ npm run dev でホットリロードして提供します

http://localhost:3000 に移動します。

生産

運用環境の場合は、静的サイトを生成します。

 # 静的プロジェクトを生成$ npm run generated

FTP 経由の手動展開

運用サーバー上で動作させるには、ビルドはサイトが実行される最終的な URL/ドメインを認識している必要があります。このために、 package.json内のnpm generate:manualタスクを編集し、運用 URL を設定できます。これは、Web サイトを手動で展開する場合に便利です。

 # package.json で指定された URL でホストされる静的プロジェクトを生成します$ npm run generated:manual

Netlify へのデプロイ

生成されたプロジェクトのフォルダーにはnetlify-example.tomlファイルが含まれます。このファイルの名前をnetlify.tomlに変更して、Netlify のデプロイメントを開始できます。 Netlify 構成とデプロイメントのタイプ (実稼働デプロイメント、ブランチデプロイメント、プレビューデプロイメント) に基づいて、 BASE_URLが自動的に設定されます。したがって、 package.jsonに本番 URL を設定する必要はありません。

他の CI ソリューションと一緒に導入する

他の CI ソリューションを使用する場合は、環境変数BASE_URLが Web サイトが実行される URL に設定されていることを常に確認する必要があります。 GitLab などのツールを使用すると、プロジェクトの設定で環境変数を設定できるため、プロジェクトをどのような方法でも簡単にデプロイできます。