2026-04-19

Notion x Astro x Cloudflare Pagesを用いて個人サイトを作った

技術


概要

今回新たに個人サイト masafumi330.com を公開したので、こちらを作るに至った動機とその目的、技術スタックとその選定理由について紹介する。


はじめに

今回このポートフォリオを作成したいと思ったのは、私の情報を一つに集約し外部に公開できる自己紹介サイトを作りたかったからだ。

私はこれまで、技術記事やブログを、Qiita, Zenn, noteの複数媒体で発信してきた。

これらのプラットフォームに投稿するメリットは、SEOやプラットフォームのアルゴリズム次第で記事が読者の目に留まりやすいことだと思う。また、記事のいいね数やブックマーク数を可視化してくれていたりもするので、率直にいいねをたくさんもらえるのは嬉しい。

ただ、記事数が多くなってくると、プラットフォームに依存して記事が分散してしまっていることが課題に感じていた。

個人サイトに記事を集約すれば、「私はこういう人間です」と、サイトURLを送りさえすればそれだけで自己紹介になる。

今後のキャリアのためにも、早めに個人サイトを作っておきたいと考えたのが今回の動機だ。


目的

  • 記事を集約する
  • 自己紹介にもなる個人サイトを作る

要件

  • シンプルなアーキテクチャ
  • お金がかからない
  • 学習コストが低い
  • 記事を書くハードルを低く

技術スタックサマリー

graph TD
    Writer(["✍️ Writer<br>(PC / Mobile)"])
    Notion[("📓 Notion")]
    NotionAPI["🔌 Notion API"]
    GHA["⚙️ GitHub Actions<br>毎週月曜 定期実行"]
    Astro["🚀 Astro<br>静的サイト生成 SSG"]
    CF[["🌐 Cloudflare Pages<br>Hosting"]]

    Writer -->|"記事執筆・ステータス管理"| Notion
    Notion -->|"記事データ取得"| NotionAPI
    GHA -->|"Deploy Hook トリガー"| Astro
    NotionAPI -->|"公開記事を取得"| Astro
    Astro -->|"自動デプロイ"| CF

選定ポイント

[フレームワーク] Astro vs Next.js

結果：Astro

比較表としてまとめると以下。

現職でNext.jsを使って開発も行っているため、使い慣れているNext.jsを使う手もあったが、個人サイトとして使うには、Next.jsはあまりにも機能過多すぎると考えた。

また、学習コストについても、Astroの新規構文はそこまで複雑ではないこと、現在はAIもあるので学習コストもそこまで高くないだろうと判断した。

さらに、Astroではビルド生成物として純粋なHTML+CSS+α必要なJSのみ吐き出すという設計思想が、「シンプルなアーキテクチャ」という今回の要件にマッチしていることも高評価だった。


[ホスティング] Cloudflare Pages vs Vercel

結果：Cloudflare Pages

「お金がかからない」という要件はどちらも満たしていたが、Next.jsを使わないのであればVercelを使う意味は無いと感じた。

Cloudflare pageでも、月当たりの無料ビルド枠は十分あるし、世界中のCDNによる高速配信は、個人サイトを閲覧するユーザーにとって高いユーザー体験をもたらしてくれると考えた。

従って、今回はCloudflare Pagesを選択した。


[CMS] Notion vs Keystatic

結果：Notion

いつでも・どこでも記事を執筆できるという点で、Keystaticの

  • Web UIでMarkdownを編集できる
  • 管理画面あり

という点は魅力的だったが、モバイルで記事を書くとき、現在個人的にも仕事でも使い慣れていて、非常に使いやすいUI/UXを備えているNotionでそのまま書く方が、新たな学習コストも無く便利だろうと考えた。

また、記事の準備が出来次第、公開をワンアクションで行いたかったので、Notion DBの「ステータス変更」だけで公開することができれば、執筆→公開のワークフローも手軽にできると思った。

以上より、「記事を書くハードルを低く」という要件にマッチするNotionをCMSとして利用することにした。

[CI/CD] Zapier vs Github Actions

結果：Github Actions

コストに関して、無料枠はそれぞれ、

  • Github Actions: 月2,000分まで
  • Zapier: 月100タスクまで

とどちらも十分要件を満たしている。


しかし今回は、Githubを使っている現状から学習コストも少なく、「シンプルな構成にする」方針にマッチするため、Github Actionsを選択した。

実際の投稿ワークフロー

実際に記事を執筆し始め、公開するまでのワークフローは以下のようになる。

  1. PC or モバイルからNotion上で記事を執筆。ステータスは「下書き」
  2. ステータスを「公開」に変更
  3. 毎週月曜日にGitHub Actions がDeploy Hookをトリガー
  4. AstroがNotion APIから公開ステータスになっている記事を取得してビルド
  5. Cloudflare Pagesに自動デプロイ → サイト更新完了 🎉

今後やりたいこと

  • N+1問題解消
  • 「今まで読んだ本リスト」も同様にNotionをCMSとして管理し公開する
  • 「App」ページを作り、「複利計算ツール」など、自分専用のツールをまとめる場所を作る

参考にしたポートフォリオサイト

ポートフォリオサイトを作るにあたり、UIは以下のサイトを参考にさせていただいた。

  1. leerob.com
  2. catnose.me/notes
  3. sumirehibiya.com
  4. sakatasz.com
  5. brianlovin.com

上記のサイトを選んだ基準としては以下。

  • 単色（白や黒など）を基調としたシンプルなサイトであること
  • エンジニア系のポートフォリオサイトであること
  • タグフィルタで記事一覧を絞るUIの参考になること