はじめに
「コーディングが苦手でも、かっこいいサイトが作れないかな…」
「foriioやNotionでポートフォリオを作っているけど、もっと差別化したい」
「せっかくのポートフォリオ、SEO対策もしっかりしたいけど何から手をつければいいか分からない…」
こんな悩みを持っている方は多いのではないでしょうか。
今回は、そんな悩みを解決できるAstroというフレームワークでポートフォリオを簡単に作成する方法をご紹介します。
Astroは静的サイトジェネレーターとして高速で軽量、そしてSEO対策も万全。特にコンテンツ重視のポートフォリオサイト作成には最高のツールです。
この記事では、コーディング初心者の方でも簡単にAstroのテンプレートを活用して、見栄えの良いポートフォリオサイトを作る方法を解説します。
環境構築から公開までの手順、テンプレート選びのコツ、そしてSEO対策まで全てカバーしているので、ぜひ参考にポートフォリオサイトを作って見てください。
Astroとは？
Astroは、高速で軽量なウェブサイトを作れる静的サイトジェネレーターです。
HTMLの基本知識があれば使えて、特にポートフォリオサイトの作成に最適です。
Astroの詳しい特徴や基本的な使用方法については、以下の記事で詳しく解説していますので、ぜひチェックしてみてください。
Astroでポートフォリオサイトを作る準備
Astroを使うには、Node.jsというソフトウェアが必要です。
手順はとても簡単で以下の3ステップで進めてください。
- Node.jsの公式サイトにアクセス
- 「LTS」と書かれたボタンをクリック（安定版がおすすめです）
- ダウンロードしたファイルを実行してインストール
インストールが完了したら、コマンドプロンプト（Windowsの場合）やターミナル（Macの場合）を開いて、以下のコマンドを入力してみましょう：
node -vバージョン番号が表示されれば、インストール成功です
テンプレートのインストール
テンプレート選定
Astroには様々なテンプレートがあり、それを使用して作成していきます。
Astro公式サイトにアクセスして、「Resources」→「Themes」を選択してください。
次に少し下にスクロールして、「Discover more themesボタン」を押してください。
すると様々なテンプレートが準備されています。
今回は無料で、ポートフォリオに向いているテーマを使用します。
右のサイドバーから「Categories」を「Portfolio」にします。
次に「Pricing」を「Free」しして「View resultsボタン」を押して絞り込みをしてください。
ここから好きなテンプレートを選択してください。
テーマを選択し、「Live demoボタン」を押すと、テーマのデモを見ることが出来ます。
「Get startedボタン」を押すとテーマのGithubを確認することができるので、使用されている技術や必要環境など確認してみてください。
テーマによってはGSAPの有料プランが必要だったりしますので、翻訳等を使って確認してみてください。
自分の環境にインストール
テンプレートを選んだら、GitHubからクローンして自分の環境にインストールしていきましょう。
選んだテンプレートのGitHubページにアクセスし、「Code」ボタンをクリックし、リポジトリのURLをコピーします。
ターミナル（コマンドプロンプト）やエディタのターミナルを開いてください。
今回はわかりやすいようにデスクトップに作成していきたいので、以下のコマンドを実行しデスクトップに移動してください。
cd Desktop次に以下のコマンドでリポジトリをクローンしてください。
git clone [コピーしたURL] my-portfolio[コピーしたURL]の部分は、実際にコピーしたURLに置き換えてください。
するとデスクトップにプロジェクトが作成されますので、お使いのエディタで開いてください。
次に必要な依存関係をインストールします。
エディタでターミナルを開き、以下のコマンドを実行してください。
npm installインストールが終わったら、開発サーバーを起動して、テンプレートが正常に動作するか確認します。
npm run devターミナルに表示されたURLにアクセスすると、テンプレートが表示されます。
これで基本的なテンプレートのインストールは完了です。
カスタマイズの方法
テンプレートをインストールしたら、次に自分のポートフォリオサイトにカスタマイズしていきましょう。
基本的なディレクトリ構成
Astroプロジェクトの標準的なディレクトリ構成は以下のようになっています：
my-portfolio/
├── public/ # 静的ファイル（画像、フォントなど）
├── src/ # ソースコード
│ ├── components/ # 再利用可能なコンポーネント
│ ├── layouts/ # ページレイアウト
│ ├── pages/ # 各ページのファイル
│ ├── content/ # ブログ記事やプロジェクト情報などのコンテンツ
│ └── styles/ # CSSファイル
├── astro.config.mjs # Astroの設定ファイル
└── package.json # プロジェクトの依存関係
主なカスタマイズ対象のファイル・フォルダ
public/ フォルダ
ここには画像やフォント、faviconなどの静的ファイルを配置します。
- 画像の追加: 自分のプロフィール写真やプロジェクトのスクリーンショットをここに配置します
- favicon: サイトのファビコンを
public/favicon.icoまたはpublic/favicon.svgとして配置します
src/pages/ フォルダ
Webサイトの各ページを定義するファイルが入っています。
- index.astro: トップページの内容
- about.astro: 自己紹介ページ
- projects.astro: プロジェクト一覧ページ
- contact.astro: お問い合わせページ
これらのファイルを編集して、自分の情報や希望するレイアウトに変更します。
src/components/ フォルダ
再利用可能なUIパーツが入っています。
- Header.astro: サイトのヘッダー
- Footer.astro: サイトのフッター
- ProjectCard.astro: プロジェクト一覧でのカードコンポーネント
- ContactForm.astro: お問い合わせフォーム
これらのコンポーネントを編集して、デザインや機能をカスタマイズします。
src/content/ または src/data/ フォルダ
多くのテンプレートでは、コンテンツやデータを管理するためのフォルダがあります。
テンプレートによって名前や構造が異なる場合があります。
- projects/: プロジェクト情報を含むMarkdownファイル
- blog/: ブログ記事を含むMarkdownファイル
- data.jsまたはsite.js: サイト全体の設定（タイトル、説明、SNSリンクなど）
src/styles/ フォルダ
CSSファイルが入っています。グローバルスタイルや特定のコンポーネント用のスタイルを編集できます。
これらのファイルを編集し、オリジナルのポートフォリオを作成してみてください。
以下の記事ではAstroの具体的な使用方法を解説していますので、あわせて参考にしてみてください。
Astroの学習は以下の教材がおすすめです！
短時間で濃密な内容を学べるうえ、解説が丁寧で、理解しやすいと高評価のベストセラー講座です。
カスタマイズの具体例
基本情報の変更
多くのテンプレートでは、サイト全体の情報を一つのファイルにまとめています。
例えば src/data/site.js や src/content/config.js などの名前です。
// src/data/site.js の例
export const siteConfig = {
name: "あなたの名前",
title: "Web開発者 & デザイナー",
description: "ポートフォリオサイトの説明文",
url: "https://yourwebsite.com",
ogImage: "/images/og-image.jpg",
links: {
twitter: "https://twitter.com/yourusername",
github: "https://github.com/yourusername",
linkedin: "https://linkedin.com/in/yourusername"
}
};
このファイルを探して編集することで、サイト全体の基本情報を変更できます。
少しJavaScriptの知識が必要になるので、JavaScriptの学習には以下の記事も参考にしてみてください。
デザインのカスタマイズ
多くのテンプレートはTailwind CSSを使用していますので、関係ファイルを修正することでカラーやフォントを変更することができます。
Tailwind CSSについては以下の記事で解説しています。
デプロイ方法
ポートフォリオサイトが完成したら、次はインターネット上に公開（デプロイ）してみましょう。
Astroで作成したサイトは、様々なホスティングサービスでデプロイすることができます。ここでは初心者の方にも使いやすいNetlifyでのデプロイをご紹介します。
Netlifyでのデプロイ
Netlifyは無料で利用でき、GitHubと連携することで簡単にデプロイできる人気のサービスです。
- ビルドの実行
デプロイ前に、ローカル環境でプロジェクトをビルドして問題がないか確認しましょう
npm run buildビルドが成功すると、distディレクトリにサイトのファイルが生成されます。
ローカルで確認したい場合は以下のコマンドを実行して、ビルド結果をプレビューできます
npm run preview- GitHubにプロジェクトをアップロード
- GitHubアカウントをお持ちでない場合は、まずGitHubの公式サイトでアカウントを作成してください
- 新しいリポジトリを作成し、ポートフォリオのコードをアップロードします
- 以下のコマンドを順に実行してください：
# 既存のリモート設定を自分のリポジトリに変更
git remote set-url origin [あなたのGitHubリポジトリURL]
# コードをコミットして自分のリポジトリにプッシュ
git add .
git commit -m "ポートフォリオサイトのカスタマイズ"
git push -u origin main
- Netlifyでサイトを設定
Netlifyの公式サイトにアクセスし、GitHubアカウントでログインしてください。
各種必要項目の入力画面になるので、入力し「Continue to deployボタン」を押してください。
Deploy your first project画面でGitHubを選択してください。
GitHubの認証ができたら、先ほど作成したリポジトリを選んでください。
次に下部のボタンを押してください。
すべての項目が「Complete」になればデプロイ完了です。
画面上部の「Open production deployボタン」からサイトを確認することができます。
さいごに
この記事でご紹介したように、Astroはコンテンツ重視のポートフォリオサイト作成に最適なフレームワークです。高速で軽量な特性に加え、SEO対策もバッチリなので、作品やスキルを効果的にアピールできますので、ぜひ参考にしてみてください。
何か分からないことがあれば、コメント欄やお問い合わせフォームからご質問ください。皆さんのポートフォリオ作成を応援しています。