ブラウザ版のNotionを便利にするNewtion
Next.jsとTailwind CSSでオリジナルのブログを作ったの絵文字

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

2022-04-02

2022-05-08

はじめに

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

旧ブログから記事もリダイレクトさせようと思っています。

モチベーション

当たり前のことですが、情報発信・アウトプットは非常に大事だと感じています。

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

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

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

ブログサービスの例

  • Note
  • Zenn
  • Qiita
  • はてなブログ
  • Wordpress
  • Notion

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

短期的・拡散性的に見ると、上記サービスを活用するのがベストです。

しかし、デメリットも数多く存在します。


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

技術的に解説した記事は更新予定です。

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

機能

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

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

既実装

  • Markdown の読み込み・表示
  • ダークモード(色の調整)
  • NextjsTemplate Repositoryの利用(作成中)
  • 目次
  • 最新記事表示
  • コードブロック
  • OGP 自動生成(Cloudinary を用いた、詳細は別の記事で)
  • ブログカード
  • サイトマップ
  • サイトマップ送信の自動化
  • ページトップへ移動ボタン
  • プロフィールカード(SNS リンクやアイコンなどの部品)
  • サイドバー(PC の場合にのみ表示し、目次とプロフィールカードを表示)

未実装

  • カスタムスニペット
  • RSS フィード(Feedly などに追加してもらうキッカケを増やす)
  • いいね機能(Cloudflare Workers で作りたい)
  • 関連記事表示(カテゴリ分類と同時に作る)
  • 人気記事表示
  • コメント機能(一方的なやり取りを他者が見てメリットがある場合)
  • 動的な目次(本質でないため作らない)

技術構成

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

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

  • Next.js
  • TypeScript
  • Tailwind CSS

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

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

工夫

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

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

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

さいごに

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

Twitter のフォローなど良ければお願いします!

関連記事


アバター

こふ

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

このブログについて

共有する