v0.7.0

みどり部屋

blog / Next.js + Mantineで個人ブログ作ってみた2023年12月11日

はじめに

このみどり部屋でこれから技術ブログをいい感じに書いていこうかと思います。 これまでQiitaやZennでも記事を書いていましたが、 これからはこのページでも書いていこうと思います。 異なるプラットフォームで書く以上、記事の方向性は以下のように分けるようにします。

  • Qiita,Zenn: なるべくしっかりした内容を書く
  • みどり部屋: ゆるい内容で気軽に少しずつ書いていく

とりあえず上記の方向性でこのページの内容を更新していきます。 1つ目の記事としてこのサイトに関する記事を書いてみます。

開始した経緯

そんな大層な経緯とかは無いのですが、なんとなくこのみどり部屋に色々な機能を追加しているうちに、このサイトでもブログを書いてみたいなと思うようになりました。 また、色々な方のテックブログをみているうちに自分でも「実装した方がいいのでは?」と思うようになりました。

どうせやるなら

Zennなどのサイトと比較して自分でブログを作る時には以下のようなメリットとデメリットが考えられます。

  • pros: 他のサイトに比べてリッチな作りにできる
  • cons: サーバー費がかかる(ことがある)
  • cons: メンテナンスが大変
  • cons: コメントやリアクションを受け取ることが難しい(その処理も作成しないといけない)

上記のようなメリットとデメリットを考慮した上で、このサイトを作成しました。 恐らくですが、普通のサイトではMarkdown(mdx)などを保存・パースして、静的サイトとして表示するのがベターかと思います。 静的に生成したほうがウェブコンテンツの配信の仕組み的にも絶対にいいと思います。

どうせ技術ブログを作成するならこのサイトでしか表現できないようなリッチな記事を提供したいと思い、上記のようなことはしていません。 めっちゃ手間はかかりますが、普通にHTMLを記事ごとに作成するようにしています。 加えて、今までこのみどり部屋などを作成してきて「もっと色々なライブラリを使ってページを構築したいな〜」と思う時がありました。 そんな時に、「技術ブログとかだと色々使えるんじゃね?」と思ったのもあります。

構成

作成したこのサイトの構成について少し説明します。

個人で技術ブログを長く続けていく上で大事なことは、「どれだけ低コストで運営ができるか」だと思っています。 このサイトはAWSのサーバーレスサービスであるAPI GatewayとAWS Lambdaで構成しています。 そのため、利用者が急増しない限りは0円で運用できています。

フロントエンドはNext.js 14のApp Routerで、コンポーネントライブラリのMantine ^7を利用して画面を作成しています。Next.jsはAWS Lambda上でサーバーレンダリングとして動くようにしています。 ちょっとレスポンスが遅い時がありますが、まぁそんなに頻繁に参照されるサイトでも無いのでコストがかからないことを優先しています。

おわりに

とりあえずこんな感じでゆるい形で記事を不定期に更新していこうと思います。

helpEsc で閉じる
h
ナビゲーションにフォーカス
l
本文にフォーカス
j
次の項目へ(項目がない・末尾ではスクロール)
k
前の項目へ(項目がない・先頭ではスクロール)
Enter
リンクを開く / 見出しを開閉
?
このヘルプを開く / 閉じる
Esc
閉じる