投稿:

更新:

poem

Next.jsとTailwind CSSでオリジナルのブログを作った

2024-11-29 追記

現在、過去に開発したブログシステムは廃止しています。
しかしながら、画像や本文のコンテンツを手元のmarkdownファイルで管理することで容易に移行が可能でした。

はじめに

タイトルの通り、自分のオリジナルブログを作りました。

モチベーション

情報発信・アウトプットは非常に大事だと感じています。

例えば、以下のような記事をまとめます。

  • プログラムを書く身として技術記事を書く
  • 特定のバグの解決方法を残す
  • 自分の労力をかけ結果を出した勉強法をまとめる

その際に、ブログ（文字）で発信する場合、どのような方法があるでしょうか？

ブログサービスの例

  • 全般: Note / はてなブログ / Wordpress / Notion
  • 技術記事: Zenn

以上のようなサービス・ツールが挙げられます。 短期的・拡散性的・プラットフォームとしての機能性を考えると、上記サービスを活用するのがベストです。 しかし、デメリット、というより、個人でブログを作って書くことの利点も数多く存在します。

それらを解消するための自分のオリジナルの個人ブログを作った、ということです。 自分でせっかく作ったのだから、記事を書かなきゃ、と自分を追い込む戦略でもあります。

機能

開発中なので、随時更新です。ロードマップの意味も含んでいます。 実装したことに関しては、解説用の記事を更新するつもりです。

既実装

技術構成

モダンな技術かつ、開発元も安定していて中期的に保守・運用できるものを採用しました。 Web バックエンドは構築する必要がないので、Web フロントエンドのみです。

  • Next.js
  • TypeScript
  • Tailwind CSS

正直に言うと、このブログは静的なファイルを配信するだけなので、ライブラリの開発が終了しても動き続けることは可能です。 ですが、何かしらのセキュリティホールを生むわけにはいきませんので、きちんと管理します。

工夫

すべて静的な Markdown ファイルで管理しています。 たくさんのメリットを感じています。たとえば以下のように。

  • 移行が簡単
    • 他のメディア・サイトの切り替え時のコストが 0 になる
    • .mdxファイルは移行がしづらい（他でそのまま利用できない）
  • バックアップが取りやすい
    • コンテンツが命
    • 単なる.mdファイル
    • Github・ローカル・クラウドストレージ・SSD でのバックアップ体制

おわりに

最後までお読みいただきありがとうございました。