@MikihiroSaito
Edited at

Netlify CMSとGatsbyのTypescript Starterを使ってブログを構築

JavaScriptTypeScriptReactNetlifygatsby


はじめに

Netlify CMS と Gatsby の Typescript Starter を使って Netlify にブログを構築したのでその記録を残していきます。

今回は Wordpress を使わずに Netlify CMS と Gatsby を利用して静的サイトを生成していきたいと思います。

今でも圧倒的に CMS のシェアを誇るのが Wordpress です。

ただ今回はフロントエンジニアとして技術の向上として Wordpress を利用しません。Wordpress はテンプレートやプラグインのカスタマイズがしにくく、SPA（シングルページアプリケーション）として構築することが困難なので Netlify CMS を使用することにしました。

SPA でサイトを構築するとページの読み込みなしの爆速でページ切り替えを行うことができるようになり、UX が向上します。

またデータに関しては Wordpress を使ったメディアやブログでは PHP がサーバー上のデータベースからタイトルだったりタグだったり、キーワードや記事の本文を保存し、データベースに命令を出してデータを引き出し View に表示させるといった仕組みになっています。

しかし今回はそういったバックエンド技術を一切使用しません。今回は開発環境に静的なマークダウンファイルを生成して、その情報を呼び出して表示させるといった仕組みになっています。それらのコンテンツのデータは Github 等で管理することになります。


Netlify

Netlify は非常に高性能な静的ホスティングサービスになります。

Netlify はサイトのビルド、テスト、デプロイをメインに様々なサイトのカスタマイズする機能を持ち合わせたサービスです。

通常の目的であれば無料の範囲で満足に使うことができます。そして react で書いたコードを自動的にビルドしてテストを行い、デプロイまで自動してくれます。

netlify CMS の管理者のユーザー認証も提供してくれているのでバックエンドの実装を自分でする必要は一切ありません。

実際にデプロイから独自ドメインの設定や SSL の設定等も含めて 15 分以内で完了したので非常に簡単でした。


Netlify CMS と Gatsby

Netlify CMSとは Netlify の提供する Headless CMS です。

CMS として最も有名であろう Wordpress はバックエンドとフロントエンドが PHP で書かれており一体型になっています。

ですが Netlify CMS は Headless、つまりユーザーがブログだったり何かしらのコンテンツとして表示するための View 部分を取っ払ってしまった CMS です。

それでは View がないからといってフロント部分を一から構築しなければならないのかというとそんなことはないです。そこで役に立つのが今回のGatsby Starterになります。用途別に React のベースや SEO の対策が施されたものがあるおかげで最低限の作業でコンテンツ自体の作成に集中することができます。

また Gatsby の恩恵としては SSR(サーバーサイドレンダリング)を利用できるという点です。これは一言で言うと実際にはページが存在しないが、ページが存在してあるように見せかけるための技術です。

サーバー側で静的にコードを作成しておくことで描画の時間を短縮して高速で指定したページの構築を行うことがきます。

react はほとんど何もない html に対して動的に Dom を描画します。これは仮想 DOM と呼ばれています。Google のクローラーはこれを読み込めないため、そこには何も存在していないページのように見えてしまいます。これではサイトの評価が落ちてしまいますね。

そこでサーバーサイドで DOM を描画するようにすることでクロームに対してページの存在を認識させ SEO の対策を行うことができるようになるのです。

もちろんこれらの技術を使うのにはデメリットもあります。

それはエンジニアでないとメンテや改良が困難ということです。初心者の方が React、Graphql 等まで習得しようとするとそれなりに時間がかかってしまい学習コストが非常に高いといったことがあります。

既に習得済みの方であればすんなり導入はできるように感じます。

今回はタイトル通りに Typescript で実装していますが、それは必須ではないので安心してください。

さらに向かないアプリケーション、サイトというのも存在します。例えば大規模なデータを扱い、頻繁にデータが登録されたり、変更されるサイトでしょうか。例えば膨大な商品を扱う Amazon のようなサイトだったり、Facebook のような SNS を作る場合には向いていないです。

今回のような個人ブログ程度であれば特に問題はないかと思います。


Netlify へ Gatsby Starter のデプロイ

ここから実際にサイトをデプロイする方法を紹介します。

今回利用するのは「gatsby-starter-typescript-power-blog」です。私が一通り Typescript と Blog の機能がベースの Starter を見てみた中でこれが最もいいかと思います。

ただし Netlify CMS が初めからついてはいませんでした。しょうがないので、他の Starter を参照しながらここだけは自分でカスタマイズしました。このカスタマイズ方法は後ほど紹介します。

既にレスポンシブ対応のデザインになっていたり、コミット時の自動テストが設定済みだったりページングが既に実装されているのは非常にありがたいです。

これを元に自由にデザインを変えていったり、機能の追加をしていくことにしましょう。

まず前提としては github や gitlab 等を利用できますのでアカウントを用意しておきましょう。それと netlify のアカウントも事前に取得しておきましょう。

こちらのリンクから starter のページへ遷移します。

gatsby-starter-typescript-power-blog

以下の画像のように右下に netlify へデプロイボタンがあります。このボタンから各種リポジトリ名等を設定すると一瞬でデプロイされます。

gatsby-starter-typescript-power-blog.png

あとは github にリポジトリが作成されているのでクローンしてローカル開発環境を整えましょう。

後は package をインストールをした後に念の為 upgrade でバージョンを上げておきましょう。これでセットアップは完了です。最後に start で開発環境を起動させてみましょう。http://localhost:8000にアクセスしてサイトが表示されれば大丈夫です。

shellyarn installyarn upgradeyarn start


Netlify CMS の導入

ブログを更新する際にはローカル環境のエディターで直接書くことも可能ですが、使う画像を設定したりリンクを設定したりするのはマークダウンよりも CMS のエディタから操作したほうが圧倒的に便利です。

またファイル名等の設定も一度決めてしまえば後は全て自動でやってくれるので、CMS を利用することをオススメします。

それでは導入をしていきましょう。まずは gatsby のプラグインと Netlify CMS 自体をそれぞれ導入します。

yarn add gatsby-plugin-netlify-cms netlify-cms

次にプラグインの設定を gatsby-config.js に設定しましょう

    {

      resolve: 'gatsby-plugin-netlify-cms',

      options: {

        modulePath: `${__dirname}/src/cms/cms.js`,

      },

    },

以下は私の好みですが src の page 内にファイルを生成したかったので source-system のプラグインの設定を変えました。

    {

      resolve: 'gatsby-source-filesystem',

      options: {

        name: 'post',

        path: `${__dirname}/src/pages/blog`,

      },

    },

上記２点で設定したディレクトリとファイルを作成しておきましょう。


  • src/cms/cms.js

  • src/pages/blog

cms.js の内容は以下のようになります。これで記事を作成する際のエディター、プレビュー画面を生成することができます。

import CMS from 'netlify-cms';

import BlogPostPreview from './preview-templates/BlogPostPreview';

CMS.registerPreviewTemplate('index', BlogPostPreview);

上記の通りに./preview-templates/BlogPostPreview.tsx のファイルを作成しましょう。

これで preview に反映させるコンポーネントを作成します。

import React from 'react';

const BlogPostPreview: React.FC = ({ widgetFor }: any) => <p>{widgetFor('body')}</p>;

export default BlogPostPreview;

次にエディターの入力フォームを作成していきます。これは yaml で書いていくことができます。

static ディレクトリ内に admin/config.yml を作成します。

私は以下のように設定ファイルを作成しました。

backend は github 以外を使用されているかたは変える必要があります。

publish-mode がないと下書き機能をつけることができずにいきなり公開されてしまうので基本はつけるようにしましょう。

ちなみに下書きしたものに関しては github 上だと別ブランチに作成されて保存され、公開をすると master ブランチにマージされるような作りになっています。

私は最初に下書きをして保存されているか確認しようとしたのですが、下書きしたデータが master ブランチになかったのでどこいったと結構焦りました笑

backend:

  name: git-gateway

  branch: master



publish_mode: editorial_workflow



media_folder: static/img

public_folder: /img



collections:

  - name: 'blog'

    identifier_field: 'permalink'

    label: 'Blog'

    folder: 'src/pages/blog'

    create: true

    slug: '{{permalink}}'

    fields:

      - { label: 'Template Key', name: 'templateKey', widget: 'hidden', default: 'blog-post' }

      - { label: 'Title', name: 'title', widget: 'string' }

      - { label: 'Publish Date', name: 'date', widget: 'datetime' }

      - { label: 'Permalink', name: 'permalink', widget: 'string' }

      - { label: 'Category', name: 'category', widget: 'string' }

      - { label: 'Description', name: 'description', widget: 'text' }

      - { label: 'Featured Image', name: 'thumbnail', widget: image, required: false }

      - { label: 'Body', name: 'body', widget: 'markdown' }

      - { label: 'Tags', name: 'tags', widget: 'list' }

      - { label: 'banner', name: 'banner', widget: image, required: false }

それと上記の config ファイルでアップロードした画像を保存するためのディレクトリも作成したので static/img のディレクトリを作成しておきましょう。

これで netlify の導入は完了です。


まとめ

これでフロントエンドのみで簡単にブログを構築することができました。フロントエンジニアで React を利用されている方にはぜひ gatsby でブログや自分のポートフォリオを構築してみましょう。

Edit request
7