Content Manager

前回までのセクションではGithub、Netlifyの設定を行いました。本セクションではNetlifyCMSの設定を行っていきます。 # Netlify CMSで必要なファイルを作成する Netlify CMSで必要なファイルが２つあります。 - 「index.html」 - 「config.yml」これらを`static/admin`ディレクトリに配置していきます。 ``` myblog └── static └── admin ``` コマンドでディレクトリを作成する場合は、下記のコマンドで作成できます。 ```shell mkdir ~/environment/myblog/static/admin ``` ## index.htmlの作成以下の内容で作成してください。（内容を変更する必要はありません） ``` myblog └── static └── admin └── index.html ``` ```html Content Manager ``` ## config.ymlの作成 `config.yml`ファイルを`myblog/static/admin`ディレクトリに作成してください。ファイルの内容は下記の通りです。 ``` myblog └── static └── admin └── config.yml ``` ```yaml backend: name: github repo: MisterTeacher/freelance_blog # GitHubのリポジトリ　「https://github.com/xxxx/yyyy」の「xxxx/yyyy」の部分 branch: master publish_mode: editorial_workflow media_folder: "static/img" # CMSから画像アップロードした際の保存先 public_folder: "/img" # 公開したときの画像フォルダのパス collections: - name: "post" # 管理画面のパスで使う　例：/admin/collections/post label: "Post" # 管理画面のサイドバーで使用 folder: "content/post" # Markdownの保存ディレクトリ create: true # 新しいページの作成可否 slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Markdownのファイル名　例：YYYY-MM-DD-slug.md fields: # ページ作成画面の項目 - {label: "タイトル", name: "title", widget: "string"} - {label: "サブタイトル", name: "subtitle", widget: "string"} - {label: "説明", name: "description", widget: "text", required: false} - {label: "記事概要", name: "excerpt", widget: "text", required: false} - {label: "日付", name: "date", widget: "datetime"} - {label: "作成者", name: "author", widget: "string"} - {label: "画像", name: "image", widget: "image", required: false} - {label: "カテゴリ", name: "categories", widget: "list", required: false} - {label: "タグ", name: "tags", widget: "list", required: false} - {label: "本文", name: "body", widget: "markdown"} ``` 設定の説明をします。 ```yaml backend: name: github repo: MisterTeacher/freelance_blog # GitHubのリポジトリ　「https://github.com/xxxx/yyyy」の「xxxx/yyyy」の部分 branch: master ``` |項目|説明| |---|---| |name|Githubの場合、`github`と固定で設定します。| |repo|リポジトリを書きます。`https://github.com/xxxx/yyyy`の`xxxx/yyyy`の部分です。| |branch|どのブランチを参照するかを設定する項目です。特にブランチを新しく作っていないのであれば、`master`になります。（`master`は一番大本のブランチという意味です）| ```yaml publish_mode: editorial_workflow media_folder: "static/img" # CMSから画像アップロードした際の保存先 public_folder: "/img" # ビルド生成先 ``` |項目|説明| |---|---| |publish_mode|`editorial_workflow`と設定します。これは記事を書いてから公開するまでのフローをどうするかを設定する項目です。`editorial_workflow`は第三者にレビューをしてもらうイメージの流れになっていて記事を公開するまでに「下書き」→「レビュー中」→「公開」という3段階のステップを踏みます。| |media_folder|Netlify CMSから画像をアップロードした場合はここで設定したフォルダに保存されます。| |public_folder|公開したときの画像フォルダのパスを設定します。| ```yaml collections: - name: "post" # 管理画面のパスで使う　例：/admin/collections/postのpost部分 label: "Post" # 管理画面のサイドバーで使用 folder: "content/post" # 記事を保存するフォルダ create: true # 新しいページの作成可否 slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Markdownのファイル名　例：YYYY-MM-DD-slug.md ``` |項目|説明| |---|---| |name|管理画面でのパスを設定します。例：/admin/collections/postのpost部分になります。| |label|管理画面のサイドバーで使用されます。| |folder|記事を保存するフォルダを設定します。| |create|新しい記事を作成できるかを設定します。`false`にすると新しい記事を作れないので`true`を設定します。| |slug|記事を作成したときにファイル名を設定します。| ```yaml - {label: "タイトル", name: "title", widget: "string"} - {label: "サブタイトル", name: "subtitle", widget: "string"} - {label: "説明", name: "description", widget: "text", required: false} - {label: "記事概要", name: "excerpt", widget: "text", required: false} - {label: "日付", name: "date", widget: "datetime"} - {label: "作成者", name: "author", widget: "string"} - {label: "画像", name: "image", widget: "image", required: false} - {label: "カテゴリ", name: "categories", widget: "list", required: false} - {label: "タグ", name: "tags", widget: "list", required: false} - {label: "本文", name: "body", widget: "markdown"} ``` |項目|説明| |---|---| |label|画面で表示される項目名を設定します。| |name|記事ファイル（markdownファイル）での項目名を設定します。| |required|記事を投稿するときに入力必須の項目かどうかを設定します。入力必須の場合、`true`そうでない場合、`false`を設定します。| `widget`は管理画面の記事投稿画面での入力形式を設定します。以下に各項目の説明をします。 |項目|説明| |---|---| |string|テキストフィールド。短い文字列を入力するのに適しています。| |text|テキストエリア。長い文字列を入力するのに適しています。| |datetime|日付日時。入力時にカレンダーが表示されます。| |image|画像をアップロードすることができます。| |list|複数の要素を入力することができます。| |markdown|markdownエディタで入力することができます。記事の本文を入力するのに適しています。| その他の詳細は場合は下記のページを参照してください。 [NetlifyCMSの設定説明ページ](https://www.netlifycms.org/docs/authentication-backends/) 以上、２つのファイルを作成したら以下の手順でgitにプッシュしてください。 ```shell $ cd ~/environment/myblog/ $ git add . $ git commit -m 'add files for Netlify CMS' $ git push origin master ``` Gitにプッシュしたら、URLに｢/admin｣を追加してアクセスしてください。例） https://xxxxx-yyyyy-zzzzz.netlify.com/admin すると、Githubと連携させるための下記のような画面が表示されますのでGithubとの連携を設定させるとCMS画面が表示されます。 ![image-20200122181708402](https://cdn.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:1000/https://www.filepicker.io/api/file/lPQVnpRUWptb1HRhxVrw) 「Login with GitHub」ボタンをクリックします。 ![image-20200122181727993](https://cdn.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:1000/https://www.filepicker.io/api/file/itRvD0tRnai23ZQPUBQb) 「Authorize XXXX」ボタンをクリックします。 ![image-20200122181754139](https://cdn.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:1000/https://www.filepicker.io/api/file/dV49pgEJQemUM98DfkH5) 自分のGithubのパスワードを入力して「Confirm password」ボタンをクリックします。 ![image-20200122181804131](https://cdn.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:1000/https://www.filepicker.io/api/file/eq6Iow7TSDStyKUznmKl) ついにNetlifyCMSが出来ました！早速投稿してみましょう！投稿するために「New Post」ボタンをクリックします。 ![image-20200122181813623](https://cdn.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:1000/https://www.filepicker.io/api/file/yMWtPTUAQGuHvpmwlHNj) これが投稿画面です。各項目を入力することでブログ記事を投稿することができます。 ![1580573460337](https://cdn.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:1000/https://www.filepicker.io/api/file/aNCUqkMpSqVMTs8VRiAS) 項目を入力して、記事を公開する場合は「Set status」で「Ready」をクリックして準備完了状態にします。 ![1580573470697](https://cdn.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:1000/https://www.filepicker.io/api/file/qVoTwFhcSEeUiyVudFof) 次に「Publish」ボタンをクリックして「Publish now」ボタンをクリックすると記事がGithubにコミットされ、公開状態になります。以上で、Netlify CMSで記事を作成して公開（publish）したタイミングで自動的にGithubにプッシュされるようになりました！ Cloud9側でNetlifyCMSで作成した記事を取り込みたい場合は、下記のコマンドでプル(Git用語でリモートにある最新のデータをダウンロードするという意味です)してください。（記事の追加はNetlifyCMSで出来るようになったのでCloud9で特に取り込む必要がない場合は必要のない作業です。） ```shell $ git pull origin master ``` 上記のコマンドを実行するとターミナルに下記のような実行結果が表示されます。 ``` remote: Enumerating objects: 34, done. remote: Counting objects: 100% (34/34), done. remote: Compressing objects: 100% (10/10), done. remote: Total 21 (delta 12), reused 19 (delta 10), pack-reused 0 Unpacking objects: 100% (21/21), done. From https://github.com/MisterTeacher/freelance_blog * branch master -> FETCH_HEAD f46fd18..8393615 master -> origin/master ``` これで簡単にCMS画面から記事を投稿できるようになりました！以上で本教材は終了となります。 Hugoを使ったブログの作り方が一通り把握出来たと思います。より理解を深めるために本教材をもう一度最初からやり直したり、自分なりのアレンジを加えたりすると良いでしょう。 Hugoという静的サイトジェネレータの面白さが実感できたら幸いです。他にもたくさんのHugoテンプレートが用意されているので、いろいろなサイトを作っていってHugoのパワフルさを追求していきましょう！また別の教材でもお会いできたら嬉しいです。お疲れさまでした！ Mr.T