今まで作ってきたブログなのですが
Netlify CMSやカテゴリ作成などが対応されていないという事が 発覚したので・・・ もう1度、作り直す事にしましたwww
作り直す事になった最大の理由が「カテゴリ作成」です。 ブログとして必須の機能がなかったのです。しかも面倒くさい事がわかった。 カテゴリーに対応したテンプレートで作り直したほうが早い!!と思い作業をおこなった
Netlify CMSとは
CMSでコンテンツを編集しながら、 あなたのページのライブプレビューを見ることができる はてなブログのリアルタイムで見る機能に近いです。 プログラマーの人ならmarkdownの編集は余裕ですが、一般の人は無理ゲーなのかな
編集画面の例
作業手順
ざっくりいきます
仮作成
$ gatsby new blog https://github.com/alxshelepenok/gatsby-starter-lumen $ cd blog
カスタマイズ
/config.js
修正後
'use strict'; module.exports = { url: 'https://masalib-gatsby-blog.netlify.com', title: 'masalib-gatsby-blog by Masalib', subtitle: '初心者がgatsbyを導入するためのブログ', copyright: '© All rights reserved.', disqusShortname: '', postsPerPage: 4, googleAnalyticsId: 'UA-16973603-12', menu: [ { label: 'Articles', path: '/' }, { label: 'About me', path: '/pages/about' }, { label: 'Contact me', path: '/pages/contacts' } ], author: { name: 'masalib', photo: '/photo.jpg', bio: 'よかったフォローしてください.', contacts: { email: 'masalib@gmail.com', telegram: '#', twitter: '#', github: '#', rss: '#', vkontakte: '#' } } };
あとトップの/static/photo.jpgを変える
リポジトリをつくる
GITHUBのページにいって適当なリポジトリをつくる。 今回は
https://github.com/masalib/masalib-gatsby-blog2.git にしています
コミットとPUSHをする
$ git init $ git add . $ git commit -m "first commit" $ git remote add origin https://github.com/masalib/masalib-gatsby-blog2.git $ git push -u origin master
再連携する
netlifyのサイトの設定が旧サイトをさしている状態なので、新BLOGサイトにふりかえる
設定画面をひらく
にいきます
対象のブログを選択する
「Site settings」を選択する
デプロイの設定画面をひらく
「Bulid & deploy」を選択する
「Continuous Deployment」に移動する(ページの下の方にある)と「Build settings」というフォームがあるので
「Edit settings」のボタンを押す
デプロイの設定を変更する
フォームが切り替わるので
「Link to a different repository」のリンクを押す
デプロイのリポジトリをサイトを選択する。今回は「GitHub」を選択する
GitHubの画面が表示されるので 「Configure the Netlify app on GitHub.」を選択する。これは追加したリポジトリをNetlifyから読めるようにする
(すでに追加されますが、そこはご愛顧)
どのリポジトリを許可するのか聞かれるので追加したリポジトリを選択する
選択して「Save」を押すと前の画面に戻ってくるので 追加したリポジトリをクリックする。
適当に更新する
デプロイの設定を変更しただけだと、反映されないので、適当に更新してコミットしてPUSHする
Netlify CMSの設定をする
本題に入りたいと思います
デフォルトの設定だともちろんCMSを使う事ができないので、設定します
ユーザーを追加する
「Identity」のタブをクリックして「Enable Identity」のボタンを押す
追加するユーザーのemailの欄があるので 適当なメールアドレスをいれて「Send」のボタンを押す
入力したアドレスに下記のようなメールが届くので 「Accept the invite」のリンクを押す
Git Gatewayの設定をする
「Site settings」を選択する
「Identity」をクリックする
「Emails」をクリックする
「Git Gateway」のフォームまで下がる
「Enable Git Gateway」のボタンを押す
CMSにアクセスする
自分のサイト/adminにアクセスする
自分の場合は
https://masalib-gatsby-blog.netlify.com/admin/
になる ログイン画面が表示されるのでログインする
ログイン後の画面
編集画面、リアルタイムで変更が確認できる
感想
Netlify CMSに対応したが、プログラマなのでいらないかもしれない・・・
ネットカフェなどで更新する時に使うかも・・・
CodeSandboxという手もあるが手っ取り早く更新したい時に使う環境かな
CodeSandboxが知りたい人は以下を参考にしてください
masalib.hatenablog.com
サイドバーの位置など気に食わないところがあるので次回以降に修正していきたい