Astro Portfolio & Blog Template

クリエイター・エンジニア・デザイナー向けの、モダンで高速なポートフォリオ＆ブログのテンプレートです。
Astro v6 をベースに構築されており、洗練されたアニメーションと高いカスタマイズ性を備えています。

• ⚡ 超高速＆軽量: Astroのアイランドアーキテクチャによる高パフォーマンスな静的HTML出力
• 🛠 一元管理の設定ファイル: src/site.config.ts を編集するだけで、名前・SNS・自己紹介・GA4・SEO情報を一括設定
• 📜 Markdown & KaTeX数式: ブログ記事でMarkdown記法とKaTeXによる美しい数式レンダリングに対応
• 🌊 心地よいスクロール体験: Lenis による慣性スクロール
• 📱 完全レスポンシブ: スマートフォン、タブレット、デスクトップの全画面サイズに最適化
• 🔒 プライバシー配慮: GA4利用時のオプトイン対応Cookie同意バナー付き（GA4 ID未設定時は完全非表示）
• 📡 SEO & RSS対応: OGP・Twitter Cards、動的RSSフィード（rss.xml）、サイトマップ（sitemap.xml）自動生成

npm install

npm run dev

ローカル環境（デフォルト: http://localhost:4321）でプレビューが開きます。

npm run build

ビルド成果物が dist/ ディレクトリに生成されます。

npm run preview

生成された静的ファイルをローカルで確認できます。

サイトのタイトル、著者名、自己紹介、メールアドレス、Google Analytics などを一元管理しています。まずはこのファイルを編集してください。

// src/site.config.ts
export const siteConfig = {
  siteUrl: "https://example.com", // デプロイ先URL
  siteName: "My Portfolio",
  title: "My Portfolio | Official Website",
  description: "ポートフォリオサイトの説明文...",
  author: "Your Name",
  handle: "@username",
  avatar: "https://api.dicebear.com/7.x/bottts/svg?seed=portfolio",

  // Google Analytics (不要な場合は空文字のままでOK)
  googleAnalyticsId: "", // "G-XXXXXXXXXX"

  // ヒーローセクション / About / 連絡先 / フッター設定...
};

Twitter (X)、GitHub、YouTube、note などのリンクを追加・編集できます。Simple Icons のSVGアイコンやカスタムアクセントカラーが設定可能です。

トップページの「REPOSITORY」セクションに掲載するリポジトリを指定できます。

YouTubeの動画IDを指定するだけで、「MUSIC」セクションにカード形式で表示されます。

src/content/blog/ ディレクトリに .md ファイルを追加するだけで、自動的に記事一覧と詳細ページが生成されます。

---
title: "記事のタイトル"
date: "2026-06-01"
description: "記事の概要文..."
thumbnail: "https://example.com/image.jpg" # 省略可
---

ここから本文を記述します。KaTeX数式（$E = mc^2$）も利用可能です。

├── src/
│   ├── components/         # Astroコンポーネント（Header, Footer, Hero, Sectionsなど）
│   ├── content/
│   │   └── blog/           # ブログ記事Markdownファイル
│   ├── data/               # リンク、リポジトリ、トラック等のデータ
│   ├── pages/              # ルーティング（/, /blog, /privacy-policy, /404, /rss.xml）
│   ├── scripts/            # クライアントスクリプト（Lenis, Cookie, スムーズスクロール）
│   ├── styles/             # CSSスタイルシート
│   ├── utils/              # パス解決ユーティリティ
│   ├── site.config.ts      # サイト全体の設定ファイル ★
│   └── content.config.ts   # Astro Content Collections定義
├── astro.config.mjs        # Astro設定ファイル
└── package.json

1. GitHubリポジトリを作成し、コードをプッシュします。
2. .github/workflows/deploy.yml 等でAstroのGitHub Pages用ワークフローを設定するか、リポジトリ設定の「Pages」からビルドソースを選択します。
3. astro.config.mjs の site と base（リポジトリ名）を必要に応じて調整してください。

各ホスティングサービスにリポジトリを連携するだけで、自動で Astro プロジェクトとして認識されデプロイが完了します。

本テンプレートは MIT License のもとで公開されています。
Copyright (c) 2026 yunfie

サイト制作・公開にあたってクレジット（フッターの Template designed by yunfie）を保持していただくようお願いいたします。