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

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

2022-04-02

2022-11-05

はじめに

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

モチベーション

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

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

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

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

ブログサービスの例

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

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

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

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


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

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

機能

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

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

既実装

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

未実装

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

技術構成

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

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

  • Next.js
  • TypeScript
  • Tailwind CSS

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

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

工夫

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

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

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

さいごに

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



アバター

こふ

情報通信を専攻している大学生です。大学(研究)・趣味・アルバイトでプログラムを書いています。ITツール・サービス・文章を創作することが好きです。

ぼくについて

共有する