<p>当ブログのシステム構成について紹介します。構成を真似することでほぼ無料（後述）でブログを運営できます。</p>
<h2>当ブログの構成概要</h2>
<p>いわゆるJamstack構成です。構成を画像で示すと次の通りです。</p>
<p><img src="https://blog-assets.kubosho.com/blog_system_diagram.png" alt="ブログの構成を表した図"></p>
<p>microCMSまたは<a href="https://github.com/kubosho/blog.kubosho.com">ブログのリポジトリ</a>に変更がある場合、Vercelの<a href="https://vercel.com/docs/concepts/git/deploy-hooks">Deploy Hooks</a>を使ってVercel上の環境を更新するようにしています。</p>
<p>Next.js上でビルドするときに、ヘッドレスCMSのAPIを使ってブログの記事などを取得し、<a href="https://nextjs.org/">Next.js</a>の<a href="https://nextjs.org/docs/basic-features/data-fetching/get-static-props">getStaticProps</a>を使ってStatic Site Generateをできるようにしています。</p>
<p>ブログのコンテンツは<a href="https://vercel.com/docs/concepts/edge-network/overview">Vercelが提供しているCDN</a>によってキャッシュされます。</p>
<p>また画像などはAmazon S3上にアップロードしたものを、CloudFrontでキャッシュして配信するようにしています。</p>
<h2>どうしてブログをJamstack構成で作ろうと思ったか</h2>
<p>もともとこのブログは<a href="https://hatenablog.com/">はてなブログ</a>上で書かれていました。</p>
<p>はてなブログを使っていた理由としては、WordPressなどのCMSを使った場合に、本体やプラグインの更新管理が面倒だったのと、投稿画面が使いやすかったためでした。</p>
<h3>素振り環境が欲しくなった</h3>
<p>はてなブログでブログを運用するうちに、Webフロントエンドやサーバーサイドも含めた素振り環境が欲しくなりました。</p>
<p>そうした思いと、はてなブログProで提供されている機能のうち独自ドメインくらいしか恩恵を受けていないことに気づき、ブログを自前で作ろうと思い立ちました。</p>
<p>そこでブログを作り出した当初は、サーバーサイドも含めて作っていました。</p>
<p>ただ作業する中でいつまで経っても完成しない未来が見えたので、サーバーサイド側を作りこむのは諦め、Next.jsを使ってさくっと作って公開することにしました。</p>
<h2>どのような技術スタックになっているか</h2>
<p>使っているサービスやフレームワーク・ライブラリーを表にしました。</p>
<table>
<thead>
<tr>
<th>技術</th>
<th>リンク</th>
</tr>
</thead>
<tbody>
<tr>
<td>フレームワーク</td>
<td><a href="https://nextjs.org/">Next.js</a></td>
</tr>
<tr>
<td>ヘッドレスCMS</td>
<td><a href="https://microcms.io/">microCMS</a></td>
</tr>
<tr>
<td>ホスティング</td>
<td><a href="https://vercel.com/">Vercel</a></td>
</tr>
<tr>
<td>画像ストレージ</td>
<td><a href="https://aws.amazon.com/jp/s3/">Amazon S3</a></td>
</tr>
<tr>
<td>画像CDN</td>
<td><a href="https://aws.amazon.com/jp/cloudfront/">CloudFront</a></td>
</tr>
<tr>
<td>i18n</td>
<td><a href="https://github.com/lukeed/rosetta">Rosetta</a></td>
</tr>
<tr>
<td>マークダウンプロセッサー</td>
<td><a href="https://unifiedjs.com/">unified</a>, <a href="https://remark.js.org/">remark</a></td>
</tr>
<tr>
<td>HTMLコンバーター</td>
<td><a href="https://github.com/rehypejs/rehype">rehype</a></td>
</tr>
<tr>
<td>テスト</td>
<td><a href="https://vitest.dev/">Vitest</a></td>
</tr>
</tbody>
</table>
<p>この中からヘッドレスCMSの変遷について話します。</p>
<h3>最初はヘッドレスCMSにContentfulを使った</h3>
<p>はてなブログからNext.jsベースのブログに置き換えたとき、<a href="https://www.contentful.com/">Contentful</a>を使っていました。</p>
<p>しかし<a href="https://blog.kubosho.com/entry/migrating-from-contentful-to-markdown-file">自動保存のタイミングでIMEが確定されて書いた記事の文章がめちゃくちゃになる現象</a>に遭遇して、ContentfulからGitリポジトリにMarkdownファイルをコミットして、事前に記事の情報をまとめたJSONファイルを作る形式に変更しました。</p>
<h3>Markdownファイルをコミットする形式からmicroCMSへの移行</h3>
<p>なんで移行しようと思ったかは覚えていないですが、6時間くらいかけてmicroCMSに記事を移行できたようです。</p>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">だいたい 6 時間くらいでブログのシステムを Markdown を直接更新する形式から microCMS で記事を入稿する形式にできた</p>&mdash; kubosho (@kubosho_) <a href="https://twitter.com/kubosho_/status/1452620689240780802?ref_src=twsrc%5Etfw">October 25, 2021</a></blockquote>
<h2>どれほどの料金がかかるか</h2>
<p>今年実際にかかった料金を表にしました。</p>
<table>
<thead>
<tr>
<th>名前</th>
<th>プラン</th>
<th>料金</th>
</tr>
</thead>
<tbody>
<tr>
<td>microCMS</td>
<td>Hobbyプラン</td>
<td>￥0</td>
</tr>
<tr>
<td>Vercel</td>
<td>Hobbyプラン</td>
<td>￥0</td>
</tr>
<tr>
<td>Amazon S3</td>
<td>従量課金</td>
<td>￥0</td>
</tr>
<tr>
<td>CloudFront</td>
<td>従量課金</td>
<td>$0～$0.01</td>
</tr>
</tbody>
</table>
<h2>今後どうしていきたいか</h2>
<p>最後に当ブログの展望を示します。</p>
<h3>OGP imageの自動生成</h3>
<p>現在は記事がSNSなどにシェアされた場合、固定の画像が表示されます。</p>
<p>これを多くのCGMサービスで導入されているように、ブログのテーマに沿った画像を自動生成して使うようにしたいと考えています。</p>
<h3>デバフの導入</h3>
<p>今はサードパーティースクリプトなどが少ないので表示速度が早いですが、広告のスクリプトやWebフォントなどを導入してそれでもなお表示速度が早いというブログにしたいと考えています。</p>
<p>ただVercelのhobbyプランは広告を扱うと商用利用扱いになって<a href="https://vercel.com/docs/concepts/limits/fair-use-policy#commercial-usage">Proプラン以上の契約が必要</a>になります。なので広告のスクリプトを導入する場合はVercelのProプラン以上を契約するか、商用利用可のホスティングサービスに移動する必要があります。</p>
<h3>ブログのパフォーマンス指標の継続的な測定</h3>
<p>広告のスクリプトやWebフォントの導入に伴って、パフォーマンス指標の継続的な測定を何かしらでして、パフォーマンス向上施策がどのくらい効果あるのか見られるようにしたいと考えています。</p>
<h3>Googleアナリティクスの活用</h3>
<p>今はただGoogleアナリティクスを導入しているだけですが、コンバージョンの設定なども入れてPV数などを上げるための参考指標を作りたいと考えています。</p>
<h3>継続的にブログ更新できる仕組みづくり</h3>
<p>なるべくブログの記事投稿を楽にしようと思い、ブログの投稿フォームや画像アップローダーを作っています。</p>
<ul>
<li>ブログの投稿フォーム - <a href="https://github.com/kubosho/instant-blog-post-form">https://github.com/kubosho/instant-blog-post-form</a></li>
<li>画像アップローダー - <a href="https://github.com/kubosho/s3-image-uploader">https://github.com/kubosho/s3-image-uploader</a></li>
</ul>
<h2>最後に</h2>
<p>この記事が参考になったらブログのリポジトリにスターお願いします！</p>
<p><a href="https://github.com/kubosho/blog.kubosho.com">kubosho/blog.kubosho.com: My personal blog. Built with Jamstack technology stack.</a></p>

Next.js + Vercel + microCMSなどを使ってほぼ無料でブログを運用する

<p><a href="https://hatenablog.com/">はてなブログ</a>のMarkdownによる記事編集画面や<a href="https://esa.io/">esa - 自律的なチームのための情報共有サービス</a>のように、本文の編集画面とリアルタイムプレビューが横並びになるような投稿フォームが個人的に好みです。</p>
<p>ですが、ブログで使っている<a href="https://microcms.io/">microCMS</a>の投稿画面や、普段使っているマークダウンエディターの<a href="https://obsidian.md/">Obsidian</a>にはプレビューを横並びにするようなオプションが無かったため、自分で記事を投稿するためのフォームを作ってみました。</p>
<p>技術スタックとしては次の通りです。仕事では使っていないものばかりですが、いろいろ使ってみたかったものを揃えてみました。</p>
<ul>
<li><a href="https://lexical.dev/">Lexical · An extensible text editor framework that does things differently</a></li>
<li><a href="https://headlessui.com/">Headless UI - Unstyled, fully accessible UI components</a></li>
<li><a href="https://ja.vitejs.dev/">Vite | 次世代フロントエンドツール</a></li>
<li><a href="https://vitest.dev/">Vitest | A blazing fast unit test framework powered by Vite</a></li>
<li><a href="https://zustand-demo.pmnd.rs/">Zustand</a></li>
</ul>
<p>実際の記事投稿画面は次の通りです。</p>
<p><img src="https://blog-assets.kubosho.com/instant-blog-post-form.png" alt="記事の投稿フォームのスクリーンショット"></p>
<h2>備えている機能</h2>
<p>今回作った投稿フォームの特徴は次の通りです。</p>
<ul>
<li>ページの左側に本文編集フォームがある</li>
<li>ページの右側にリアルタイムプレビューがある</li>
<li>下書き状態・公開状態の切り替えが可能
<ul>
<li>ただmicroCMSはPOST APIにクエリーを付けたい場合は<a href="https://microcms.io/pricing">Teamプラン</a>以上の契約が必要になる……（作った後の動作確認で気づいた）</li>
</ul>
</li>
<li>ページを再読み込みしてもタイトル・URLのパス・本文の状態が保持される</li>
</ul>
<h2>これから作りたい機能</h2>
<p>いま考えていることとして、次に挙げる機能を作りたいと思っています。</p>
<ul>
<li>記事を投稿するときに確認画面を表示する</li>
<li>記事の投稿が完了したら完了と分かるような表示を追加する</li>
<li>記事の投稿に失敗したら失敗と分かるような表示を追加する</li>
<li>タグの追加ができる</li>
<li>カテゴリーの追加ができる</li>
<li>プレビュー画面のスタイルを<a href="https://blog.kubosho.com/">https://blog.kubosho.com/</a>と同じものを適用する</li>
<li><a href="https://github.com/fukayatsu/esarea">fukayatsu/esarea</a>やesaの本文編集フォームのように、tabキーやenterキーを押したときにマークダウンの記法が自動で挿入される</li>
<li><a href="https://textlint.github.io/">textlint · The pluggable linting tool for text and markdown</a>を導入して、記事を書いているときにエラーを出す</li>
<li>何かしらのホスティングサービスにアップロードして、いろんなデバイスからアクセスできるようにする
<ul>
<li>認証機能を作る必要がある</li>
</ul>
</li>
<li>本文編集部分とプレビュー部分のスクロール同期をする</li>
<li>Vimモード</li>
<li>画像アップロード</li>
</ul>
<h2>まとめ</h2>
<p>もしこの記事を見て良いなと思ったら、リポジトリへのstarとwatch登録お願いいたします。</p>
<p><a href="https://github.com/kubosho/instant-blog-post-form">kubosho/instant-blog-post-form: Blog post form for https://blog.kubosho.com.</a></p>

学ぶ、考える、書き出す。

タグ「microCMS」の記事一覧