<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>

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

タグ「Vercel」の記事一覧