最初の記事として、このlomaru.netを作った話をします。
なぜ作ったか
以前までmarunium.comというブログがあったのですが、1年経ってドメインが切れてしまったことと名前がダサく感じていたことがあったので、この機会にドメインから変えてみました。
デプロイ
このブログはシンフリーサーバーというフリーサーバーにデプロイしています。シンフリーサーバーとは、以前Xserverによって運営されていたフリーサーバー"Xfree"の後継です。容量は10GBと少なめですが、
- ストレージがSSDであること
- PHP・MySQLが使えること
- 広告表示がないこと
など、かなりハイスペックな仕様になっています。10GBといっても画像や動画を配置しなければ足りなくなることなんて絶対ないのであまり気にしていません。
技術スタック
このサイトを作るにあたって使用したソフトウェア等を紹介します。
- microCMS(ヘッドレスCMS)
- Astro(フレームワーク)
- Tailwind CSS
microCMS
microCMSは国内製のヘッドレスCMSです。
ヘッドレスCMSとはコンテンツのデータのみを格納し、APIを用いて配信します。WordPressやDrupalとは違い、表示部分(HTMLなど)を出力しません。表示部分は別途自分で作成する必要があります。
ヘッドレスCMSといっても色々なサービスがあります。例えば、ContentfulやPrismic.io、Newtなどです。色々試してみたのですが、結局microCMSが1番使いやすいと思いました。
Astro
「ブログ作りたいんだけど、どのフレームワークが良いかな?」といったら1番最初に挙がるだろうフレームワークです。Astroでは、ページの読み込み時に実行されるJavaScriptを無くし、超軽量なWebサイトを作ることができます。
このサイトではコードブロックにハイライト処理を行っています。
printf("こんな感じです!");
このような処理をビルド時にすべて行い、サーバーに配置されるHTMLにはJavaScriptが一切残っていません。
Astroはブログのような静的サイトに物凄く向いています。しかし、Webアプリケーションのような動的なサイトには向いていません。Webアプリケーションが作りたければ、Next.jsやViteなどを使うと良いと思います。
Tailwind CSS
最強です。
とにかく楽。今まで散々CSSファイルにmargin: 16px;
なんて書いていたものがHTMLのクラス名にm-4
と書くだけ済みます。
marginくらいだったらあまり差は感じないかもしれませんが、レスポンシブデザインやアニメーションを使うときにはTailwindが神に見えます。別途でCSSファイルを用意する必要が無いのも良いですね。
さいごに
今のところ良い感じに作れているような気がするので、このまま改善改良をしながら、そして面白いブログ記事が書けるように努めていきたいなと思っています。