Hugoを使用している場合、hugo server
を実行している状態で、ブラウザから以下のURLへアクセスします。Hugoのみならず、他のNetlify CMSがサポートする静的サイトジェネレータでも同様です。
http://127.0.0.1:1313/admin/
Hugo | Netlify CMS | Open-Source Content Management Systemに沿って、Netlify CMSの構築を終えた状態の場合、ログイン画面が以下のように表示されるはずです。「Netlify Identity」の認証を経由してログインすることになります。
それが、以下のようになります。
「Login」ボタンを押しても、「Netlify Identity」では認証されず、そのままダッシュボードへ移動します。そして、ログイン後の作業を全てローカルホストで完結できます。
ローカルホストでNetlify CMSをテストする
Netlify CMSは、Creating Custom Previews | Netlify CMS | Open-Source Content Management Systemに沿って、コンテンツ投稿画面やプレビューをカスタマイズすることができます。また、コレクション毎に画像ファイルやMarkdownファイルの保存先を変更することもできます。
これらの変更をNetlify CMSヘプッシュする前に確認したい時があります。というのも、Netlify CMS上でコンテンツを投稿したり、画像ファイルをアップロードすると、連携しているGitリポジトリ(例えば、GitHub)上に自動的にコンテンツがプッシュされ、リポジトリを汚してしまうためです。
そのような時は、ローカルホストでNetlify CMSをテストする機能が、最新のバージョンで追加されています。ローカルホストで全て完結するので、画像ファイルやMarkdownファイルの作成、プレビューなどを、Netlify CMSへプッシュする前にテストすることができます。
/static/admin/config.yml
に、以下を追記します。
local_backend: true
次に、Netlifyが公開しているパッケージをインストールします。ローカルホスト上で、Gitリポジトリのルートディレクトリへ移動して、netlify-cms-proxy-server
をインストールします。事前に、Node.jsのインストールが必要です。
npm install -D netlify-cms-proxy-server
そのまま、ルートディレクトリで以下のコマンドを実行します。
npx netlify-cms-proxy-server
Netlify CMSに対するプロキシサーバが起動し、ローカルホスト上でNetlify CMSをテストする場合のみ、このプロキシサーバ経由で表示されるようになり、コンテンツの作成や画像ファイルのアップロードが、ローカルホストだけで完結できます。
これらの機能は、Beta Features!として紹介されています。