<p>Next.jsとNetlify CMSを使ってブログを作ってみました。記事を書くだけならWordPressやブログサービス等を使うのがいいと思いますが、ReactやTypeScriptの勉強を兼ねるためにあえて自作することにしました。</p>
<p>この記事では、ブログを作るのに必要なライブラリやサービスについてのざっくりした説明と、ブログを自作した感想を書きます。細かい手順は書きません。</p>
<h2>構成</h2>
<p>このブログの構成は、いわゆるJAMstackと言われているものです。</p>
<p>ヘッドレスCMSでコンテンツを管理し、静的サイトジェネレータで静的ファイルを生成、ホスティングサービスでホスティングといった感じです。</p>
<p>使用したヘッドレスCMS、静的サイトジェネレータ、ホスティングサービスについて簡単に説明します。</p>
<h3>静的サイトジェネレータ</h3>
<p>静的サイトを生成する機能を持ったフレームワークはたくさんあります。Reactを少し触ったことがあるので、React系のフレームワークを探しました。</p>
<p>選んだのは、
<a href="https://nextjs.org/">Next.js</a> です。Next.jsは静的サイト生成に特化したフレームワークではありませんが、Next.js 9.3で導入された<code>getStaticProps</code>、<code>getStaticPaths</code>というAPIを用いることで、簡単に静的サイト生成を行うことができます。</p>
<h3>ヘッドレスCMS</h3>
<p>ブログのコンテンツを管理・提供するためのものです。簡単に言うと、WordPressのViewが無いバージョンです。バックエンド側だけを提供します。
RESTやGraphQL等のAPIでコンテンツを配信するタイプや、Gitのリポジトリを利用するタイプのものがあります。</p>
<p>僕が使用したのは、<a href="https://www.netlifycms.org/">Netlify CMS</a>というCMSです。これは、ホスティングサービスを提供しているNetlifyが開発しているOSSです。Gitでコンテンツを管理します。GitHubかGitLabかBitbucketでリポジトリを用意し、管理画面のhtmlファイルを1つサイトに設置するだけで使えるのでお手軽です。yamlでスキーマ等の設定を行います。Next.jsへの導入手順もドキュメントに書いてあったのでいい感じです。</p>
<p>国産のサービスだと<a href="https://microcms.io/">microCMS</a>というものがありますが、markdownに対応していなかったので、今回は断念しました。ロードマップにmarkdown対応が入っていたので、気が変わったら乗り換えるかもしれません。</p>
<h3>ホスティングサービス</h3>
<p>Next.js開発元の<a href="https://vercel.com/">Vercel</a>や<a href="https://www.netlify.com/">Netlify</a>が選択肢になると思います。個人ブログならどちらのサービスでも、無料プランで十分そうです。ここでは、Netlify CMSを使うこともあってNetlifyを選択しました。</p>
<h3>記事を投稿するまでの流れ</h3>
<p><img src="../media/post/made-blog-using-next-js-and-netlify/netlify-cms-test-post.png" alt=""></p>
<p>Netlify CMSの記事投稿画面はこのようになっています。リッチテキストかマークダウンで記事を書けます。タイトルやタグなどの項目は、yamlファイルで自由に設定することが可能です。カテゴリはいらないかなと思ったので、タグだけ設定できるようにしてみました。</p>
<p><img src="../media/post/made-blog-using-next-js-and-netlify/netlify-cms-test-workflow.png" alt=""></p>
<p>設定でワークフロー機能をオンにすると、Workflowタブができます。投稿画面のsaveボタンを押すと、Draftsに入ります。</p>
<p><img src="../media/post/made-blog-using-next-js-and-netlify/netlify-cms-test-pr.png" alt=""></p>
<p>Draftsステータスの記事は、Pull Requestが作られている状態です（Githubと連携している場合）。frontmatter付きのMarkdownファイルが生成されています。</p>
<p>記事を公開すると、このPRがマージされます。これをNetlifyがフックして、自動でブログがビルド＆デプロイされるという流れです。</p>
<h3>使ったライブラリやフレームワークなど</h3>
<p>Next.jsを使ったブログの作成方法は他の方の素晴らしい記事が既にたくさんあるので、そちらを参考にしていただければと思います。ここでは、使って便利だったライブラリなどを紹介します。</p>
<h4><a href="https://tailwindcss.com/">thailwindcss</a></h4>
<p>CSSフレームワークです。このフレームワークの特徴は、ボタンやカードといったコンポーネントを提供するのではなく、ユーティリティ系のクラス（paddingとかfont-size等）のみを提供していることです。</p>
<h4><a href="https://github.com/jonschlinkert/gray-matter">gray-matter</a></h4>
<p>frontmatterパーサです。</p>
<h4><a href="https://github.com/markdown-it/markdown-it">markdown-it</a></h4>
<p>Markdownパーサです。プラグインを用いて拡張できます。</p>
<h4><a href="https://github.com/tylingsoft/markdown-it-highlight">markdown-it-highlight</a></h4>
<p>markdown-itのプラグインで、highlight.jsを導入するために使いました。</p>
<pre><code class="hljs language-js"><span class="hljs-built_in">console</span>.log(<span class="hljs-string">'aaa'</span>)
</code></pre>
<h4><a href="https://github.com/waylonflinn/markdown-it-katex">markdown-it-katex</a></h4>
<p>markdown-itのプラグインで、Texの数式を表示できるようにするために導入しました。</p>
<p><span class="katex"><span class="katex-mathml"><math><semantics><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mi>x</mi><mo>+</mo><mn>1</mn></mrow><annotation encoding="application/x-tex">x^2 + x + 1</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="strut" style="height:0.8141079999999999em;"></span><span class="strut bottom" style="height:0.897438em;vertical-align:-0.08333em;"></span><span class="base textstyle uncramped"><span class="mord"><span class="mord mathit">x</span><span class="vlist"><span style="top:-0.363em;margin-right:0.05em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;">​</span></span><span class="reset-textstyle scriptstyle uncramped"><span class="mord mathrm">2</span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;">​</span></span>​</span></span></span><span class="mbin">+</span><span class="mord mathit">x</span><span class="mbin">+</span><span class="mord mathrm">1</span></span></span></span></p>
<p>このブログで数式が必要な記事を書くかはわかりません。（なさそう）</p>
<h2>感想とまとめ</h2>
<p>Next.js、Netlify、Netlify CMSでブログを作りました。高機能なブログサービスには負けますが、管理画面からMarkdownでさくっと記事を書いて、記事をGitで管理できるのは個人ブログにピッタリかもしれません。カスタマイズも自由なので愛着が湧きそう。</p>
<p>そしてこのブログにかかっている費用はドメイン代だけなので、費用を気にせずのんびり続けられそうです。</p>
<p>実は、まだページネーションは実装していません。記事が増えたら実装しようと思います！（ブログ続くかな...）</p>
