ずっと始めたいと思っていたブログをやっと始めることができた。

今回、ブログを始めるにあたって、長く続けられることとできるだけ手間がかからないことを優先して作成した。
特に意識したのは、次の2点である。

  • 記事を書くまでの手数を減らす
  • 無料枠で長く運用できる

Astroは静的サイトとの相性がよく、個人ブログとしてかなり扱いやすい。
そのうえで、今回は実際に以下のような技術スタックで構成した。

今回使った技術スタック

  • フレームワーク: Astro
  • ホスティング: Cloudflare Pages
  • 記事管理: Markdown / MDX
  • コンテンツ管理: Astro Content Collections
  • RSS: @astrojs/rss
  • sitemap: @astrojs/sitemap
  • 確認: astro check, astro build

まず Astro を選んだ理由は、静的サイトとして十分に軽く、記事中心のサイトをシンプルに作りやすいからである。
業務で使用しているReactやVueのようにアプリケーション前提で考えなくてよいので、「ただ記事を書いて公開したい」という用途に過不足ないという判断。

ホスティングは Cloudflare Pagesを採用。
GitHub連携でそのままデプロイまでつなげるようにした。

最初から入れた機能

最小構成といいつつ、後から足すと面倒なものは最初から入れるようにした。

  • タグ一覧
  • 年別アーカイブ
  • RSS 配信
  • sitemap 自動生成
  • 記事ごとの OGP 画像
  • 関連記事表示
  • シリーズ記事導線

後から付けると frontmatter や URL 設計を触りたくなることがあるので、入れれるものは早めに入れておいた。

長続きするように入れた工夫

今回いちばん大事にしたのは、記事を書くたびの面倒を減らすことだった。

そのために追加したのが、npm run new で新規記事を作るスクリプトである。
slug を渡すだけで、記事ファイルと frontmatter のひな形を自動生成できるようにした。zenn cliを参考にした。

例えばこんな感じで作れる。

npm run new -- my-new-post
npm run new -- my-new-post --title "記事タイトル"
npm run new -- my-new-post --category "書籍の感想" --tags "書籍感想,SQL,データベース"

このスクリプトでは、次のような項目を最初から入れるようにしている。

  • title
  • description
  • publishedAt
  • tags
  • category
  • draft

さらに、本文側も空ファイルではなく、

  • はじめに
  • きっかけ
  • 本題
  • まとめ

という最低限の見出しを置くようにした。
これだけでも、「新しい記事を書く」ことへの面倒くささがかなり減る。

管理画面付き CMS を入れるほどではないが、毎回 frontmatter を手打ちするのは確実に面倒なので、その間を埋めるための小さな自動化を入れてみた。

デザイン面でも毎日見ることと続けやすさを優先

デザインはシンプルかつ「もちむぎ日記」という名前に合う麦色ベースの落ち着いた方向にした。

毎日のように見るものなので目に優しいデザインにした。

モダンなイメージにしようかと悩んだが、タイトルとのギャップが大きくておかしな感じになってしまうので、素朴なデザインにした。

結構気にいっている。

ダークモードも最初は入れようと思ったが、結局入れないことにした。

素朴なイメージが崩れてしまう上に、管理する内容も増えると感じたからである。

また、トップページも情報を盛りすぎず、今は最新記事とタグへの導線だけに絞っている。

外部リンクも文字列ではなくアイコンにして、できる限り視線が散らばりすぎないようにした。

まとめ

とりあえず面倒くさがりな自分でも続けることが出来そうだと思うものになったと思う。

今のところは、このくらいの感じがちょうど良さそうである。

まずは2,3年ゆるく続けていきたい。

関連記事