Webサイトの投稿機能
1. NetlifyCMSでWebサイトの投稿機能追加 今回は、ヘッドレスCMSであるNetlifyCMSの公式サイトに沿ってHUGOサイトの投稿機能構築の仕方を簡単に説明します。
なぜNetlifyCMS？
NetlifyCMSの投稿機能を使うとAPIの作成など時間をかけずに投稿者自身がWEB上で記事を書けるようになります。 今回の主題であるNetlifyCMSを使えば、誰でもWeb上で投稿できるようになります。NetlifyCMSは、シンプルで視覚的に簡単に理解できます。NetlifyCMSのデモサイトがありますので体験できます。
NetlifyCMSは、OSSであり公式サイトによると以下のような特徴があります。 1).最新のフロントエンドツールを実装して、より速く、より安全で、よりスケーラブルなサイトを提供することができます。編集者は、コンテンツ管理要件を満たすわかりやすいUIと直感的なワークフローを提供します。
2).編集者に優しいユーザーインターフェース
Web ベースのアプリには、リッチ テキスト編集、リアルタイム プレビュー、ドラッグ アンド ドロップ メディア アップロードが含まれています。
3).コンテンツチームのための直感的なワークフロー
作成者と編集者は、下書きからレビューまでのコンテンツを簡単に管理して、任意の数のカスタム コンテンツ タイプにまたがって公開できます。
4).GitHub アカウントを使用しないインスタントアクセス
Git Gateway を使用すると、GitHub アカウントを持っていない場合でも、すべてのチームメンバーに CMS アクセスを追加できます。
5).JANstack上に構築
Netlify CMS は、クライアント側の JavaScript、再利用可能な API、および事前に構築されたマークアップに基づいています。WordPressのようなサーバー側のCMSと比較して、より良いパフォーマンス、より高いセキュリティ、より低いスケーリングコスト、そしてより良い開発者体験ができます。
2. NetlifyCMSのインストール 既存のサイトに追加もできますが、今回はテンプレートを使ってインストールします。 2-1. テンプレートから始める Github1とNetlify2への登録は、済んでいるとします。 NetlifyCMSサイトの以下のページに行き「Deploy to Netlify」をクリックします。
上記のボタンをクリックした後、GitHubで認証し、リポジトリ名を選択します。Netlify は、GitHubアカウントにリポジトリのクローンを自動的に作成します。次に、Netlify で新しいサイトをビルドして展開し、ビルドの完了後にサイト ダッシュボードに移動します。 リポジトリ名を「hugo-cms」にしています。「Save & Deploy」をクリックします。 Netlifyの画面が表示されdeployが始まり、完了するとサイトが表示されます。 KALDIというサイトです。 Githubのリポジトリを確認します。「hugo-cms」が新規に作成されています。 2-2. 新しいサイトでNetlifyCMS にアクセス 登録しているメールアドレスに招待メールが届きますので、Netlifyでのデプロイが完了していること確認後「招待を承諾する」をクリックします。 パスワードを入力し、サインインすると、CMS に移動します。 登録が完了しログイン状態になりますので、この状態でCMSへアクセスします。 <yoursiteaddress.com>/admin/へアクセスするとCMSを表示することができます。 投稿を追加および編集するか、[製品] ページのコンテンツを変更してみてください。保存すると、変更はすぐにGitリポジトリにプッシュされ、Netlifyでビルドがトリガーされ、サイトのコンテンツが更新されます。 編集画面です。「Pubilsh」をクリック後サイトが反映するまでに少し時間がかかります。 編集が反映された画面です。 サイトのGithubリポジトリの編集内容の確認画面です。 2-3. NetlifyCMSのアクセスアカウントの追加 Githubに登録されていたメールは登録されています。パスワードは最初に登録したものとなります。 Netlifyにログイン後、招待したいアカウントを追加します。
