masalibの日記

システム開発、運用と猫の写真ブログです

「Gatsby JS」Netlify CMSに対応する

今まで作ってきたブログなのですが

masalib.hatenablog.com

Netlify CMSやカテゴリ作成などが対応されていないという事が 発覚したので・・・ もう1度、作り直す事にしましたwww

作り直す事になった最大の理由が「カテゴリ作成」です。 ブログとして必須の機能がなかったのです。しかも面倒くさい事がわかった。 カテゴリーに対応したテンプレートで作り直したほうが早い!!と思い作業をおこなった

Netlify CMSとは

CMSでコンテンツを編集しながら、 あなたのページのライブプレビューを見ることができる はてなブログのリアルタイムで見る機能に近いです。 プログラマーの人ならmarkdownの編集は余裕ですが、一般の人は無理ゲーなのかな

編集画面の例

f:id:masalib:20190306031018j:plain

作業手順

ざっくりいきます

仮作成

$ 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サイトにふりかえる

設定画面をひらく

https://app.netlify.com/

にいきます
対象のブログを選択する

f:id:masalib:20190306013328j:plain

Site settings」を選択する

デプロイの設定画面をひらく

f:id:masalib:20190306014259j:plain

Bulid & deploy」を選択する

f:id:masalib:20190306014810j:plain

「Continuous Deployment」に移動する(ページの下の方にある)と「Build settings」というフォームがあるので f:id:masalib:20190306015300j:plain

Edit settings」のボタンを押す

デプロイの設定を変更する

フォームが切り替わるので
Link to a different repository」のリンクを押す f:id:masalib:20190306015525j:plain

デプロイのリポジトリをサイトを選択する。今回は「GitHub」を選択する

f:id:masalib:20190306020401j:plain

GitHubの画面が表示されるので 「Configure the Netlify app on GitHub.」を選択する。これは追加したリポジトリをNetlifyから読めるようにする

f:id:masalib:20190306022050j:plain
(すでに追加されますが、そこはご愛顧)

どのリポジトリを許可するのか聞かれるので追加したリポジトリを選択する f:id:masalib:20190306022603j:plain

選択して「Save」を押すと前の画面に戻ってくるので 追加したリポジトリをクリックする。

適当に更新する

デプロイの設定を変更しただけだと、反映されないので、適当に更新してコミットしてPUSHする

f:id:masalib:20190306023225j:plain
新サイト

Netlify CMSの設定をする

本題に入りたいと思います

デフォルトの設定だともちろんCMSを使う事ができないので、設定します

ユーザーを追加する

Identity」のタブをクリックして「Enable Identity」のボタンを押す

f:id:masalib:20190306024317j:plain

追加するユーザーのemailの欄があるので 適当なメールアドレスをいれて「Send」のボタンを押す

f:id:masalib:20190306024326j:plain

入力したアドレスに下記のようなメールが届くので 「Accept the invite」のリンクを押す

f:id:masalib:20190306024724j:plain

Git Gatewayの設定をする

Site settings」を選択する
f:id:masalib:20190306030118j:plain

Identity」をクリックする
Emails」をクリックする
Git Gateway」のフォームまで下がる
Enable Git Gateway」のボタンを押す f:id:masalib:20190306030100j:plain

CMSにアクセスする

自分のサイト/adminにアクセスする
自分の場合は

https://masalib-gatsby-blog.netlify.com/admin/

になる ログイン画面が表示されるのでログインする

f:id:masalib:20190306030730j:plainf:id:masalib:20190306030726j:plain
ログイン画面

ログイン後の画面

f:id:masalib:20190306031001j:plain

編集画面、リアルタイムで変更が確認できる

f:id:masalib:20190306031018j:plain

感想

Netlify CMSに対応したが、プログラマなのでいらないかもしれない・・・
ネットカフェなどで更新する時に使うかも・・・
CodeSandboxという手もあるが手っ取り早く更新したい時に使う環境かな

CodeSandboxが知りたい人は以下を参考にしてください
masalib.hatenablog.com

サイドバーの位置など気に食わないところがあるので次回以降に修正していきたい