syamasawのブログ(仮)
開発

Astroでブログを作ってみた

#Astro #Cloudflare

なぜブログを作ったか

Qiitaだったり、Twitter(X)だったり、DiscordのTimesなど、色々な場所で情報発信をしていたが、一箇所に集約したいと考えていました。
Notionなどに書きためて公開することも考えていましたが、せっかくなので自作してみようと思い、作成しました。

使用ツール類

Astro

markdownで記事を書きたかったこと、Astro v6のニュースが最近目に飛び込んできたこと、静的コンテントの多いブログとの親和性あたりから採用。
メインはあくまでもブログなので、開発中に本番環境と同じランタイムを使えて環境での差異を確認する手間が省けそうなことも魅力に感じました。
Astroの<Image>が放り込んだpngを自動でwebpにして最適化してくれるのもよかったです。

Cloudflare Workers

Astroのドキュメントサイトに、Cloudflare recommends using Cloudflare Workers for new projects. と書かれていたこと、料金がとても寛容であること、運用負荷が低く済むことなどから採用。
主観的ですが、Cloudflareに対する漠然とした憧れもありました(笑)。

https://docs.astro.build/en/guides/deploy/cloudflare

TailwindCSS

当初はAstroテーマ(誰かの作ったデザインテンプレート)を使うことも考えましたが、Astro v6に対応していないものも多いことや、誰かのデザインで進めるならNotionと大して変わらないと感じたためTailwind使って外観を作りました。
配色とか配置とかこれでいいのか…?と自問しながら弄っていました。

ESLint, Prettier

Biomeだと依存関係が少なく済んで動作も早く設定も簡単なので採用したかったのですが、.astroファイルには---(コードフェンス)で囲まれた領域(コンポーネントスクリプト, JavaScript)と、その外側(コンポーネントテンプレート, HTML)の2種類の文法が混在しているため、Biomeは.astroファイルの検出こそ標準で行いますが、この文法の違いは現時点では非対応なので不採用。
そのため、情報も多いESLint, Prettierを採用しました。

感想

初歩も初歩だし、フレームワークやClaudflare様様というところではあるが、ビルドが通ってちゃんと見れると嬉しいものがあった。まだ多くの改善点があるので、ブログとともに育てていきたい。

ブログのビルド通りたてほやほやの画像

今後の予定

  • ブログを定期的に更新する
  • favicon(Astroデフォルト)やアイコン画像(Arknights fankit)をまともなものを探す
  • いい感じのブログ名を決める
  • スマホで見た時の表示
記事一覧に戻る