koke TechBlog

主にフロントエンド関係で学んだことを書いていきます。

2021/3/28

Next.js✕Firebaseで技術ブログを作成しました

作成動機

主に以下の 3 つの理由で技術ブログを作成しました。

  • SEO、アナリティクス、アドセンスなどを実際に行ってみたいと考えており、その実験台として技術ブログが適していると思ったので。
  • 学んだことを記事として記せばより記憶しやすく、モチベーションも上がる。
  • Next.js のチュートリアルで SSG のブログのサンプルを作成して、Next.js の便利さを知り、もっと使ってみたいと考えたため。

使用技術

Web フレームワーク

Next.js: Vercel 社が開発している React のフレームワーク。SSG、SSR に簡単に対応でき、ルーティングも行いやすい。

ストレージ

Firebase: 記事の本文やタイトルなどの文字列はFirebase Cloud Firestore、画像はFirebase Storageで管理しています。無料プランが充実しており、本ブログも無料プランの範疇で作成されています。詳しくは公式ドキュメントを参照。

ホスティング

Vercel: Next.js を開発している会社が提供しているホスティングサービス。Next.js との相性が非常によく、デプロイも Git Hub と連携させて、リポジトリを選択するだけで出来るので簡単。このブログは無料プランでデプロイされています。

CSS フレームワーク

Tailwind CSS: html に class を追加することで、それに対応した CSS が適応される CSS フレームワークの一つ。Bootstrap などと異なり、基本的には class とプロパティが 1 対 1 になっている。使われていない CSS をビルド時に自動で削除するため、非常に軽量。

これからについて

主にフロントエンド関連で学んだことを記事にしていきたいと思います。また、ブログ自体も改善してより記事を読みやすくしていきます。

;