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

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

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

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

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

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

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

以上のようなサービス・ツールが挙げられます。

短期的・拡散性的・プラットフォームとしての機能性を考えると、上記サービスを活用するのがベストです。

しかし、デメリット、というより、個人でブログを作って書くことの利点も数多く存在します。

それらを解消するための自分のオリジナルの個人ブログを作った、ということです。

自分でせっかく作ったのだから、記事を書かなきゃ、と自分を追い込む戦略でもあります。

開発中なので、随時更新です。ロードマップの意味も含んでいます。

実装したことに関しては、解説用の記事を更新するつもりです。

• Markdown の読み込み・表示
• ダークモード（色の調整）
• Nextjs の Template Repositoryの利用
• 目次
• 最新記事表示
• コードブロック
• OGP 自動生成（Cloudinary を用いた。詳細は別の記事で）
• ブログカード
• サイトマップ
• サイトマップ送信の自動化
• ページトップへ移動ボタン
  • 必要かどうか分からないが、あって邪魔より無くて困るを重視
• プロフィールカード（SNS リンクやアイコンなどの部品）
  • 自己主張ではなく、初めてサイトを見た方へ向けて、知っていただくという目的
• サイドバー（PC の場合にのみ表示し、目次とプロフィールカードを表示）
• 関連記事表示（カテゴリ分類と同時に作る）

• トップページのカスタマイズ
• RSS フィード（Feedly などに追加してもらうキッカケを増やす）
• 人気記事表示
  • Google Analitics の データ を利用
• カスタムスニペット
  • まとめ部分、注意部分などをわかりやすく

モダンな技術かつ、開発元も安定していて中期的に保守・運用できるものを採用しました。

Web バックエンドは構築する必要がないので、Web フロントエンドのみです。

• Next.js
• TypeScript
• Tailwind CSS

正直に言うと、このブログは静的なファイルを配信するだけなので、ライブラリの開発が終了しても動き続けることは可能です。

ですが、何かしらのセキュリティホールを生むわけにはいきませんので、きちんと管理します。

すべて静的な Markdown ファイルで管理しています。

たくさんのメリットを感じています。たとえば以下のように。

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

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