Jekyll Portfolio Setup Guide

このドキュメントは、Jekyllベースのポートフォリオサイトのセットアップと管理方法について説明します。

🚀 クイックスタート

1. 依存関係のインストール

Rubyがインストールされている環境で：

# Bundlerのインストール
gem install bundler

# 依存関係のインストール
bundle install

2. ローカル開発サーバーの起動

bundle exec jekyll serve

サイトは http://localhost:4000 で表示されます。

3. GitHub Pagesでの自動デプロイ

GitHubリポジトリの設定で：

Settings > Pages
Source: Deploy from a branch
Branch: main / (root)

📁 ディレクトリ構造

├── _config.yml           # Jekyll設定ファイル
├── _layouts/             # HTMLテンプレート
│   ├── default.html      #   ベースレイアウト
│   ├── project.html      #   プロジェクト詳細ページ
│   └── lt.html          #   LT詳細ページ
├── _projects/           # プロジェクトコレクション
│   ├── sample-project-1.md
│   └── portfolio-site.md
├── _lt/                 # LTコレクション
│   ├── web-development-trends-2024.md
│   └── react-hooks-practical-usage.md
├── assets/              # 静的アセット
│   ├── css/style.css    #   メインスタイル
│   └── js/main.js       #   JavaScript
├── index.html           # ホームページ
├── projects.html        # プロジェクト一覧
├── lt.html             # LT一覧
└── Gemfile             # Ruby依存関係

✏️ コンテンツ管理

サイト基本情報の変更

_config.ymlを編集：

title: "あなたの名前 - Developer Portfolio"
email: your-email@example.com
description: あなたの説明文
github_username: yourusername
twitter_username: yourusername

新しいプロジェクトの追加

_projects/ディレクトリに新しい.mdファイルを作成：

---
title: "プロジェクト名"
description: "プロジェクトの説明"
tech: ["JavaScript", "React", "Node.js"]
github: "https://github.com/username/project"
demo: "https://demo-url.com"
featured: true
order: 1
---

# プロジェクトの詳細説明

ここにMarkdownでプロジェクトの詳細を書きます。

新しいLTの追加

_lt/ディレクトリに新しい.mdファイルを作成：

---
title: "LTタイトル"
date: 2024-10-01
event: "イベント名"
description: "LTの説明"
slides: "https://slides-url.com"
video: "https://video-url.com"
tags: ["タグ1", "タグ2"]
featured: true
---

# LTの詳細内容

ここにMarkdownでLTの詳細を書きます。

🎨 デザインカスタマイズ

カラーテーマの変更

assets/css/style.cssの:rootセクションを編集：

:root {
    --primary-color: #00d4ff;    /* メインカラー */
    --secondary-color: #7c3aed;  /* サブカラー */
    --accent-color: #ff006e;     /* アクセントカラー */
}

フォントの変更

Google Fontsを使用する場合、_layouts/default.htmlのフォントリンクを変更し、CSSの--font-family変数を更新します。

🔧 高度な設定

カスタムドメインの設定

リポジトリルートにCNAMEファイルを作成
ファイル内にドメイン名を記入：
```
your-domain.com
```

SEO最適化

_config.ymlにSEO情報を追加：

plugins:
  - jekyll-seo-tag

# SEO設定
author: あなたの名前
social:
  name: あなたの名前
  links:
    - https://twitter.com/username
    - https://github.com/username

アナリティクスの追加

Google Analytics 4を追加する場合：

_config.ymlに追加：
```
google_analytics: G-XXXXXXXXXX
```
_layouts/default.htmlに追加：
```
   
```

🚀 デプロイメント

GitHub Pages（推奨）

GitHubリポジトリにプッシュ
GitHub Actionsで自動ビルド
数分後にサイトが公開

その他のホスティング

Netlify

GitHubリポジトリをNetlifyに接続
Build command: bundle exec jekyll build
Publish directory: _site

Vercel

GitHubリポジトリをVercelに接続
Framework Preset: Jekyll
自動デプロイ設定

🔍 トラブルシューティング

よくある問題

ビルドエラー
```
bundle exec jekyll build --verbose
```
プラグインの問題
```
bundle update
```
パスの問題
- 相対パス: /path/to/file
- 絶対パス: https://kta552.github.io/path/to/file

デバッグモード

bundle exec jekyll serve --verbose --trace