
Next.jsとTailwind CSSでオリジナルのブログを作った
2022-04-02
2022-11-05
はじめに
タイトルの通り、自分のオリジナルブログを作りました。
モチベーション
情報発信・アウトプットは非常に大事だと感じています。
例えば、以下のような記事をまとめます。
- プログラムを書く身として技術記事を書く
- 特定のバグの解決方法を残す
- 自分の労力をかけ結果を出した勉強法をまとめる
その際に、ブログ(文字)で発信する場合、どのような方法があるでしょうか?
ブログサービスの例
- 全般
- 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 でのバックアップ体制
おわりに
最後までお読みいただきありがとうございました。