Netlify CMSとGatsbyで作られたブログ記事が公開されるまで

2019.4.13

このブログはNetlify CMSとGatsbyJSで作られています。

導入がかなり簡単で↓こちらの記事の通りに進めるだけですぐに公開できました。

備忘録として、記事を書いてから公開されるまでのフローをまとめてみます。

0. 前提(Github連携、下書き機能)

前提として、GithubリポジトリとNetlifyを連携しているので、masterブランチにpushされる度にNetlifyでデプロイが走るようになっています。

また、Netlify CMSの下書き機能を使用しているので、Githubのプルリクエストと連動するようにしています。Githubのリポジトリを公開しているので下書きの意味は全く無いですが。。

下書き機能についても↓こちらの記事を参考にしました。

記事を書いてSaveボタンを押します。

masterブランチに向けてプルリクエストが作られます。記事のマークダウンファイルが生成されたコミットができあがります。

Publishボタンを押します。

プルリクエストがマージされて、masterブランチが更新されます。

デプロイが走り、サイトが更新されます。

デプロイで、Gatsbyのビルドが走ります。

Gatsbyのビルドによって、記事のhtmlファイルが生成されます。

この時に、マークダウンファイル→GraphQLでデータを取得→Reactで描画させてhtmlを吐き出しているのかなと思います。ここらへんはまだ把握していません。

ローカルでビルドしてみるとpublic/配下に記事のフォルダができていて、htmlファイルが生成されいてるのがわかります。

デプロイが完了して記事が公開されます。

以上が、記事作成〜公開のフローです。GithubのPRと連携しててイメージしやすくて良い感じです。もしデータを公開したくなければ、GithubのプライベートリポジトリやGitlabを使えばOKです。これだけの機能が無料でできちゃうのがすごいです。

良くない点としては、デプロイの度に走るGatsbyのビルドに時間がかかる点です。記事の数が増えれば増えるほど時間がどんどんかかっていくのでしょうか。

まだGatsbyについてそこまで把握してないので、これからやっていきたいです。