furutahssのblog
(更新: 2026年8月18日) • Astro

Astroでブログとポートフォリオサイトをリメイク

Astro Blog Portfolio
Astroでブログとポートフォリオサイトをリメイク

これまでブログといえばWordPressというのが当たり前の認識で、自分も特に何も考えずにWordPressで運用していました。

WordPressは導入も簡単でテーマやプラグインの導入も簡単なので、サーバさえ用意できれば初心者にも触りやすく現在でも多くのWebサイトでWordPressが利用されています。

しかし、私の個人ブログのような小規模なブログでは、お問い合わせなんてこないしコメントもスパムコメントしかこない程度なので、それならいっそのこと静的サイト（フロント技術のみ）でよくないか？と思い、リメイクを行うことにしました。

この記事では、ブログとポートフォリオサイトをAstroでリメイクした話について紹介します。

Astroを選定した理由

実は過去にもGatsbyを使用してブログを作成したことがありましたが、色々と不都合があって（理由は忘れましたが）WordPressに戻していました。

AIに相談したところ、静的サイト（フロント技術）だけでもお問い合わせ（外部サービス）やコメント機能（Giscus）を実現できるとのことだったので、知見のあるNext.js(SSG)/GatsbyとAIがオススメするAstroの中から選ぶことにしました。

Next.jsはReactベースのWebアプリケーションフレームワーク、GatsbyはReactベースの静的サイトジェネレーター、Astroは高速な静的サイト構築を得意とするWebフレームワークです。

ブログサイトとして重要なのは「カッコよく動くギミック」「複雑な機能」ではなく「素早く表示されること」「コンテンツの中身」なので、不要なJavaScriptをクライアントに送信せず高速に動作するAstroを採用することとしました。

最終的には、お問合せやコメントも不要（どうせこないし）だと判断し、Astro/Typescript/Tailwind CSS/SCSSで構成することとしました。

ついでにポートフォリオサイトも作成することにしましたが、Astroでは部分的にReact/Vue/Svelteなどのコンポーネントを使用することも可能なので、技術的な何かを載せたくなっても部分的に作ることが可能なので、ポートフォリオサイトでもAstroを採用することとしました。

Astroでブログをリメイクしたメリット・デメリット

Astro自体は初めて触りましたが、WordPressからAstroに移行して感じたメリット・デメリットを以下にまとめます。

Astroでブログをリメイクしたメリット

  • 構成するものを全て自分で管理して理解できる
  • Markdownで記事を書ける
  • 部分的にReactコンポーネントなどを使用できる（現在は使用していないが）
  • 表示が高速
  • （しないけど）引っ越しが楽(WordPressと比較して)

Astroでブログをリメイクしたデメリット

  • オンライン（出先）で記事投稿ができない（しづらい）

Astroで作ったブログの構成

今回作成したブログの構成は以下の通りです。

├── public/
│   ├── robots.txt              # クローラー設定 & Sitemap指定
│   └── images/
├── src/
│   ├── components/             # Astroコンポーネント
│   ├── config/
│   │   └── site.ts             # サイト全体の設定（名前、サイドバー、フッター等）
│   ├── content/
│   │   └── blog/               # Markdown記事ファイル
│   ├── layouts/
│   ├── pages/                  # 静的ルーティング
│   ├── styles/                 # SCSSスタイルシート
│   ├── utils/
│   ├── content.config.ts       # Astro 5 Content Layer API スキーマ定義
│   └── env.d.ts                # TypeScript型定義
├── astro.config.mjs            # Astro設定ファイル
├── tailwind.config.mjs         # Tailwind CSS設定ファイル
├── tsconfig.json               # TypeScript設定ファイル
└── package.json

ファイル数は少し多いですが、フォルダごとに役割が決まっているので見るべき場所がわかりやすく、管理はしやすいです。

基本的には/src/content/blogの中にMarkdownファイルを追加していくだけなので、とても簡単に運用できます。

ポートフォリオサイトについて

もともと、furutahss.comでブログを運用していましたが、今回のリメイクでfurutahss.comはポートフォリオサイトとして、ブログはblog.furutahss.comに移行しました。

正直ポートフォリオサイトに表示するようなものなんてほとんどないですが、エンジニアたるもの自分を紹介するサイトや自分が作ったものを公開する場所くらいあった方が良いのではないかと思い、ポートフォリオサイトもついでに作ることにしました。

構成はブログと同じでAstro/Typescript/Tailwind CSS/SCSSとして、技術的に特異なものを扱う場合にはReactコンポーネントで対応しようと思います。

WordPressからAstroに移行して

WordPressからAstroにブログを移行しましたが、あくまでWordPressが悪いというわけではなく自分の運用方法だとAstroのほうが合っていたということです。

デザインも一新してポートフォリオサイトとデザインも共通化できたので、個人的には移行して良かったかなと思っています。

Astroについては今回初めて知りましたが、今後勉強して受託サイトなんかでも使えるようにしていこうかなと思います。