あなたのコードを世界に！GitHub Pagesでポートフォリオやブログを公開する方法

By /

あなたのコードを世界に！GitHub Pagesでポートフォリオやブログを公開する方法

はじめに：GitHub Pagesとは？ なぜ使うべきか？

現代において、開発者やクリエイターが自身のスキルや作品を世に問うためのオンライン上のプレゼンスは不可欠です。ポートフォリオサイト、技術ブログ、プロジェクトのドキュメント、あるいは単なる個人的なホームページ。これらを簡単に、そして無料で公開できる強力なツールとして、「GitHub Pages」があります。

GitHub Pagesは、コードホスティングサービスであるGitHubが提供する静的サイトホスティングサービスです。GitHubリポジトリにHTML、CSS、JavaScript、画像などの静的ファイルをプッシュするだけで、それらのファイルがウェブサイトとしてインターネット上に公開されます。しかも、GitHubアカウントを持っていれば、追加の料金はかかりません。

なぜGitHub Pagesを使うべきなのでしょうか？

  1. 無料であること: ほとんどの用途において、完全に無料で利用できます。個人プロジェクトや小規模なサイトには最適です。
  2. GitHubとの連携: コードを管理しているリポジトリから直接デプロイできます。開発ワークフローにスムーズに組み込めます。
  3. 静的サイトのメリット: 静的サイトは高速で、セキュリティリスクが少なく、スケーラビリティに優れています。サーバー側の処理がないため、シンプルかつ堅牢です。
  4. Gitによるバージョン管理: サイトの全ての変更がGitによって管理されます。いつでも過去の状態に戻したり、変更履歴を確認したりできます。
  5. カスタムドメイン対応: 独自のドメイン名（例: yourname.com）を設定できます。プロフェッショナルな印象を与えられます。
  6. Jekyllサポート: 静的サイトジェネレータであるJekyllが組み込みでサポートされています。ブログやドキュメントサイトの構築が容易になります。他の静的サイトジェネレータもGitHub Actionsを使えば利用可能です。

この網羅的な記事では、GitHub Pagesを使ってあなたのコードやコンテンツを世界に公開するための全てを、初心者でも理解できるように詳細に解説します。基本的なサイト作成から、Jekyllを使ったブログ構築、カスタムドメインの設定、そしてより発展的な使い方まで、順を追って説明していきます。さあ、あなたのオンラインプレゼンスを構築しましょう！

第1章：GitHub Pagesを始める前の準備

GitHub Pagesを使うには、いくつかの準備が必要です。これらは非常に基本的なものですが、確実に進めるために確認しておきましょう。

  1. GitHubアカウント:

    • GitHub PagesはGitHubの機能なので、当然ながらGitHubアカウントが必要です。
    • まだ持っていない場合は、GitHubのウェブサイトにアクセスして無料で作成しましょう。ユーザー名、メールアドレス、パスワードを設定するだけで簡単に登録できます。

  2. Gitのインストールと基本的な操作知識:

    • GitHub PagesはGitを使ってファイル管理とデプロイを行います。
    • お使いのコンピュータにGitがインストールされているか確認してください。多くのOS（macOS、Linux）にはプリインストールされていますが、Windowsの場合は別途インストールが必要です。
    • 基本的なGitコマンド（git clone, git add, git commit, git pushなど）の使い方が分かると、GitHub Pagesをスムーズに利用できます。Gitの学習リソースは豊富にありますので、必要に応じて学習しておきましょう。

  3. テキストエディタ:

    • ウェブサイトのHTML、CSS、JavaScriptファイルなどを作成・編集するためのテキストエディタが必要です。Visual Studio Code (VS Code)、Sublime Text、Atomなど、使い慣れたエディタを用意しましょう。

  4. （オプション）ターミナルまたはコマンドプロンプトの操作知識:

    • Gitコマンドを実行したり、後述するJekyllをローカルでビルドしたりする際にターミナル（macOS/Linux）またはコマンドプロンプト（Windows）を使います。基本的なファイル操作（cd, ls/dir, mkdirなど）やコマンド実行方法を知っていると便利です。

これらの準備が整えば、GitHub Pagesを使い始める準備は完了です。

第2章：GitHub Pagesのサイトの種類を理解する – ユーザーサイト vs. プロジェクトサイト

GitHub Pagesには、大きく分けて2種類のサイトがあります。この違いを理解することは、どのリポジトリをどのように設定すればよいかを判断する上で非常に重要です。

  1. ユーザーサイト (User Site) または 組織サイト (Organization Site):

    • 特徴: あなたのGitHubユーザー名（または組織名）に関連付けられる、特別なサイトです。
    • URL: https://username.github.io/ または https://organizationname.github.io/ となります。
    • リポジトリ名: リポジトリの名前は、必ずあなたのGitHubユーザー名（または組織名）に.github.ioを付けたものにする必要があります。例: your-username.github.io
    • 設置場所: このサイトのコンテンツは、その特定のリポジトリのmain（またはmaster）ブランチのルートに配置されます。
    • 用途: 個人のポートフォリオサイト、ブログ、履歴書サイトなど、ユーザーや組織自体に関する情報発信に適しています。ユーザーまたは組織ごとに1つだけ作成できます。

  2. プロジェクトサイト (Project Site):

    • 特徴: あなたがGitHubでホスティングしている任意のプロジェクト（リポジトリ）に関連付けられるサイトです。
    • URL: https://username.github.io/repository-name/ または https://organizationname.github.io/repository-name/ となります。
    • リポジトリ名: 任意のリポジトリ名で構いません。
    • 設置場所: サイトのコンテンツは、リポジトリの設定で指定されたブランチ（通常はgh-pagesブランチ）のルート、または指定されたブランチ（通常はmain/master）の/docsフォルダに配置されます。
    • 用途: 特定のソフトウェアプロジェクトのドキュメント、ライブラリのデモページ、技術的なチュートリアル、イベントページなど、プロジェクト固有の情報発信に適しています。1つのユーザーまたは組織が複数のプロジェクトサイトを持つことができます。

どちらを選べばよいか？

  • あなたの個人サイトやブログ、ポートフォリオを作成したい場合: ユーザーサイト (username.github.io) を選びましょう。
  • 特定のプロジェクトのドキュメントやデモを作成したい場合: プロジェクトサイトを選びましょう。

この違いを理解しておけば、次にどのリポジトリを作成し、どこにファイルを配置すべきかが明確になります。

第3章：最初のGitHub Pagesサイトを作成する – 静的HTMLを公開

まずは最もシンプルな方法で、静的なHTMLファイルのみのサイトをGitHub Pagesで公開してみましょう。ここでは、個人のユーザーサイトを作成する例で説明します。プロジェクトサイトもほぼ同様の手順ですが、リポジトリ名と設定場所が異なります。

ステップ1：新しいGitHubリポジトリを作成する

  1. GitHubにログインします。
  2. 画面右上にある+アイコンをクリックし、「New repository」（または「新規リポジトリ」）を選択します。

  3. リポジトリ作成ページで、以下の設定を行います。

    • Repository name: ここが最も重要です！ユーザーサイトの場合は、あなたのGitHubユーザー名に.github.ioを付けた名前にします。例: your-username.github.io
    • Description (Optional): リポジトリの説明を任意で入力します。（例: My personal website）
    • Public or Private: 公開したいウェブサイトのコードなので、「Public」（公開）を選択します。PrivateリポジトリでもGitHub Pagesは利用可能ですが、無料アカウントの場合はPublicリポジトリのみ無料です。（プランによってはPrivateも無料）
    • Initialize this repository with:
      • 「Add a README file」（READMEファイルの追加）にチェックを入れることをお勧めします。後でサイトの内容を説明するのに使えます。
      • .gitignore や Choose a license は必須ではありませんが、プロジェクトによっては設定しても良いでしょう。

  4. 「Create repository」（リポジトリを作成）ボタンをクリックします。

これで、あなたのユーザーサイト用の特別なリポジトリが作成されました。

ステップ2：サイトのコンテンツを作成する

次に、あなたのウェブサイトのコンテンツとなるファイルを作成します。最も基本的なのは、ウェブサイトのトップページとなるindex.htmlファイルです。

  1. 作成したリポジトリをあなたのローカル環境にクローンします。ターミナル（またはGit Bashなど）を開き、以下のコマンドを実行します。
    bash
    git clone https://github.com/your-username/your-username.github.io.git
    your-usernameはあなたのGitHubユーザー名に置き換えてください。
  2. クローンしたリポジトリのディレクトリに移動します。
    bash
    cd your-username.github.io
  3. index.htmlファイルを作成します。テキストエディタを開き、以下の内容を記述したindex.htmlファイルをリポジトリのルートディレクトリに保存します。
    “`html
    <!DOCTYPE html>




    私のGitHub Pagesサイト


    GitHub Pagesへようこそ！

    <main>
    <p>これはGitHub Pagesで公開した最初のサイトです。</p>
    <p>これからコンテンツを追加していきます。</p>
</main>

<footer>
    <p>&copy; 2023 Your Name</p>
</footer>



    ``
    これは非常にシンプルなHTMLページです。必要に応じてCSSファイル(    style.cssなど)を作成し、HTMLからリンクすることも可能です。その場合も、index.htmlと同じディレクトリやサブディレクトリ（例:assets/css/style.css`）に配置します。

ステップ3：変更をコミットしてプッシュする

作成したindex.htmlファイルをGitHubリポジトリにアップロードします。

  1. ターミナルでリポジトリのディレクトリにいることを確認し、変更をステージングします。
    bash
    git add .
    （.は現在のディレクトリ内の全ての変更を意味します）
  2. 変更をコミットします。
    bash
    git commit -m "Add initial index.html"
    （"Add initial index.html"はコミットメッセージです。分かりやすい内容にしましょう。）
  3. 変更をGitHubリポジトリにプッシュします。
    bash
    git push origin main
    （ユーザーサイトのリポジトリは通常mainブランチがデフォルトです。以前はmasterブランチが使われていました。あなたのリポジトリのデフォルトブランチを確認してください。）

ステップ4：GitHub Pagesの設定を確認する

ユーザーサイトの場合、リポジトリ名が正しければ、自動的にGitHub Pagesが有効化されることが多いですが、設定を確認しましょう。

  1. GitHub上であなたのユーザーサイトリポジトリ（例: your-username.github.io）にアクセスします。
  2. リポジトリのページ上部にある「Settings」（設定）タブをクリックします。
  3. 左側のサイドバーで「Pages」を選択します。
  4. Pages設定画面が表示されます。
    • Source: 通常、ユーザーサイトの場合は「Deploy from a branch」が選択され、Branchがmain（またはmaster）ブランチの/ (root)になっているはずです。もしそうなっていなければ、適切なブランチとフォルダを選択して保存してください。
    • 設定が正しければ、「Your site is published at https://your-username.github.io/」のようなメッセージとURLが表示されます。

ステップ5：サイトにアクセスする

設定が完了し、GitHub側でのビルドプロセスが完了すると、あなたのウェブサイトが公開されます。これには数分かかる場合があります。

  • ブラウザを開き、あなたのユーザーサイトのURL (https://your-username.github.io/) にアクセスしてみてください。
  • ステップ3で作成したindex.htmlの内容が表示されていれば成功です！

プロジェクトサイトの場合:

プロジェクトサイトを作成する手順もほぼ同じですが、以下の点が異なります。

  • リポジトリ名: 任意のリポジトリ名で構いません。例: my-project
  • URL: https://your-username.github.io/my-project/ となります。
  • Pages設定:
    • リポジトリ作成後、Settings > Pagesに移動します。
    • Source: 「Deploy from a branch」を選択します。
    • Branch: デプロイ元のブランチを選択します。
      • 伝統的にはgh-pagesという名前のブランチを作成し、そのブランチのルート (/) をソースとして選択します。
      • または、main（またはmaster）ブランチの/docsフォルダをソースとして選択することもできます。この場合、サイトコンテンツはリポジトリの/docsサブディレクトリに配置します。
    • Folder: 選択したブランチのルート (/) または /docs を選択します。
    • 設定を保存します。

いずれのサイトタイプでも、HTML、CSS、JavaScript、画像などの静的ファイルをリポジトリの適切な場所に配置し、Gitでプッシュすれば、GitHub Pagesが自動的にそれらをウェブサイトとして公開してくれます。

第4章：Jekyllを使ってみよう – ブログや静的サイトを効率的に構築

静的なHTMLファイルを手書きするだけでは、ブログのように記事を頻繁に追加したり、共通のヘッダー/フッターを持つページを複数作成したりするのが非効率です。そこで役立つのが静的サイトジェネレータです。

GitHub Pagesは、特に「Jekyll」という静的サイトジェネレータを公式にサポートしており、特別な設定なしに利用できます。Jekyllを使うと、Markdown形式で記事を書いたり、テンプレートを使って共通部分を管理したり、 Sass/SCSSをCSSにコンパイルしたりといったことが簡単に行えます。

Jekyllとは？

JekyllはRubyで書かれた静的サイトジェネレータです。テンプレートファイル、Markdownファイル、データファイルなどを処理して、完全に静的なHTML、CSS、JavaScriptファイル群を出力します。GitHub Pagesは、あなたがJekyllサイトをプッシュすると、自動的にビルドプロセスを実行し、生成された静的ファイルを公開してくれます。

なぜGitHub PagesでJekyllを使うのか？

  • 公式サポート: GitHub Pagesに組み込みでJekyllのビルド環境があります。
  • シンプルさ: ブログのような構造のサイトを作るのに適しています。
  • Markdown対応: 記事の執筆がMarkdownで楽に行えます。
  • テンプレート機能: レイアウトや共通パーツ（ヘッダー、フッターなど）を効率的に管理できます。
  • テーマシステム: 公開されているテーマを簡単に適用できます。

Jekyllサイトの作成手順

JekyllサイトをGitHub Pagesで公開する最も簡単な方法は、Jekyllテーマを利用することです。GitHub Pagesは、デフォルトでいくつかのテーマを提供しています。

方法1：テーマを選ぶ (推奨)

  1. あなたのGitHub Pagesリポジトリ（例: your-username.github.io または プロジェクトリポジトリ）にアクセスします。
  2. 「Settings」（設定）タブをクリックし、「Pages」を選択します。
  3. Pages設定画面で、「Choose a theme」ボタンを探してクリックします。
  4. 表示されるテーマギャラリーから好きなテーマを選び、「Select theme」をクリックします。
  5. GitHubによって、選択したテーマに必要なファイル（_config.yml, index.htmlなど）があなたのリポジトリのmainブランチ（または設定されたブランチ）に自動的に追加されます。
  6. 数分待つと、あなたのサイトが新しいテーマで公開されます。

これで、テーマに基づいた基本的なJekyllサイトが作成されました。あとはリポジトリをクローンし、ファイルを編集してコンテンツを追加していけば良いだけです。

方法2：既存のJekyllサイトをプッシュする

すでにローカルでJekyllサイトを開発している場合や、GitHub Pagesでサポートされているテーマ以外のテーマを使いたい場合は、そのサイトファイルをそのままリポジトリにプッシュします。

  1. ローカルにJekyllサイトプロジェクトがあることを確認します。まだJekyllを使ったことがない場合は、後述の「Jekyllをローカル環境にセットアップする」を参照してください。
  2. あなたのGitHub Pagesリポジトリ（例: your-username.github.io）に、そのJekyllサイトの全ファイルをコピーします。ユーザーサイトの場合はリポジトリのルート、プロジェクトサイトで/docsを使う場合は/docsフォルダにコピーします。
  3. .gitignoreファイルに_site/と.jekyll-cache/が記述されていることを確認します。これらはビルド生成物なので、リポジトリに含める必要はありません。
  4. 変更をコミットしてプッシュします (git add ., git commit -m "Add Jekyll site", git push origin main)。
  5. GitHub Pagesの設定（Settings > Pages）で、ソースブランチとフォルダが正しく設定されていることを確認します。

GitHubがプッシュを検知すると、自動的にJekyllビルドプロセスが実行されます。ビルドが成功すれば、サイトが公開されます。

Jekyllサイトの基本的な構造とファイルの役割

Jekyllサイトは特定のディレクトリ構造を持っています。主要なファイルとフォルダの役割を理解しましょう。

your-username.github.io/
├── _config.yml # サイト全体の設定ファイル
├── _posts/ # ブログ記事を格納 (YYYY-MM-DD-title.md 形式)
├── _layouts/ # ページのテンプレート (default.html, post.html など)
├── _includes/ # 共通パーツ (header.html, footer.html など)
├── _sass/ # Sass/SCSSファイル (CSSにコンパイルされる)
├── assets/ # 画像、CSS、JSなどの静的アセット
│ ├── css/
│ ├── images/
│ └── js/
├── about.md # /about/ になるページ
├── index.html # トップページ (または index.md)
└── CNAME # カスタムドメイン設定ファイル (カスタムドメインを使う場合)

  • _config.yml: サイトのタイトル、説明、URL、テーマ設定、permalink形式など、グローバルな設定を記述します。YAML形式で記述します。
  • _posts/: ブログ記事をMarkdownファイル（.md）で配置します。ファイル名はYYYY-MM-DD-記事タイトル.mdの形式にする必要があります。各記事ファイルの先頭にはFront MatterというYAML形式のメタデータを記述します（後述）。
  • _layouts/: ページの骨格となるHTMLテンプレートを配置します。例えば、ブログ記事用のpost.html、一般的なページ用のpage.html、サイト全体のベースとなるdefault.htmlなどを作成できます。Liquidテンプレート言語を使って、Front Matterのデータや記事本文を埋め込みます。
  • _includes/: 複数のテンプレートやページで使い回したい小さなHTMLコード片（ヘッダー、フッター、ナビゲーションメニューなど）を配置します。_layoutsやMarkdownファイルの中から{% include filename.html %}のように読み込んで使います。
  • _sass/: SassまたはSCSS形式でスタイルを記述できます。main.scssのようなファイルを作成し、_sassディレクトリ内にファイルを分割して配置すると、GitHub PagesがCSSにコンパイルしてくれます。
  • assets/: CSS、JavaScript、画像ファイルなどの静的なアセットを配置するのに一般的な場所です。
  • ルートディレクトリの.htmlや.mdファイル: /about.html や /contact/ のような静的なページを作成したい場合に配置します。Markdownファイル (.md) もHTMLに変換されます。
  • CNAME: カスタムドメインを設定する際に、ドメイン名を記述するファイルです（後述）。

記事（ポスト）の作成

ブログ記事を作成するには、_posts/ディレクトリに以下の形式でファイルを作成します。

YYYY-MM-DD-記事タイトル.md

  • YYYY-MM-DDは投稿日です。
  • 記事タイトルはURLの一部になります。日本語は避け、英数字とハイフン (-) を使いましょう。
  • 拡張子は.md (Markdown) または .html にできますが、Markdownが一般的です。

ファイルの先頭には、Front Matterと呼ばれるYAML形式のメタデータを---で囲んで記述します。ここにタイトル、日付、レイアウト、カテゴリ、タグなどを指定します。

“`markdown

layout: post
title: “Jekyllでブログ記事を書く方法”
date: 2023-10-27 10:00:00 +0900
categories: Jekyll ブログ
tags: gh-pages markdown

はじめに

これは私のブログの最初の記事です。Jekyllを使ってMarkdownで書いています。

Markdown記法

Markdownはシンプルな記法で文章を書くのに便利です。

見出し

# 見出し1, ## 見出し2, …

リスト

  • 項目1
  • 項目2

コードブロック

python
print("Hello, Jekyll!")

Jekyllの導入は思ったより簡単でした。
“`

上記のファイルを_posts/2023-10-27-how-to-write-jekyll-post.mdとして保存し、プッシュすれば、ブログに新しい記事が追加されます（レイアウトが適切に設定されていれば）。

Jekyllをローカル環境にセットアップする

サイトをGitHubにプッシュするたびに公開されるのは便利ですが、変更をローカルで確認できないのは非効率です。Jekyllをローカル環境にセットアップすれば、サイトをビルドしてブラウザで確認しながら開発を進められます。

前提条件:

JekyllはRubyGemsとして提供されているため、RubyとそのパッケージマネージャであるBundlerが必要です。

  • macOSにはRubyがプリインストールされていることが多いです。
  • Windowsの場合は、RubyInstallerを使ってRubyをインストールします。インストール時に「Add Ruby executables to your PATH」と「Install MSYS2 development toolchain」にチェックを入れることをお勧めします。

インストール手順:

  1. RubyとBundlerの確認:
    ターミナルを開き、以下のコマンドを実行してバージョンが表示されるか確認します。
    bash
    ruby -v
    gem -v
    bundle -v
    もしインストールされていない場合は、上記前提条件を参照してインストールしてください。

  2. Jekyllと依存関係のインストール:
    GitHubからクローンしたJekyllサイトのリポジトリディレクトリに移動します。
    bash
    cd your-jekyll-site-repo
    もしGemfileファイルがない場合は、以下のコマンドでJekyllの最小構成をインストールします。
    bash
    gem install jekyll bundler
    jekyll new . --force
    （jekyll new . --forceは既存ディレクトリにJekyllサイト構造を作成します。ファイルが上書きされる可能性があるので注意してください。通常は空のディレクトリに対して行うコマンドです。）

    もしGemfileファイルがすでに存在する場合（GitHub Pagesのテーマを使った場合など）、以下のコマンドで依存関係をインストールします。
    bash
    bundle install
    3. ローカルでのサイトビルドとプレビュー:
    リポジトリのルートディレクトリで以下のコマンドを実行します。
    bash
    bundle exec jekyll serve
    または、ポートを指定して実行することもできます。
    bash
    bundle exec jekyll serve --port 4000
    このコマンドは、Jekyllサイトをビルドし、ローカルウェブサーバーを起動します。ターミナルに表示されるURL（通常はhttp://localhost:4000またはhttp://127.0.0.1:4000）にブラウザでアクセスすると、ローカルでサイトを確認できます。

    ファイルに変更を加えると、Jekyllは自動的にサイトを再ビルドし、ブラウザをリロードしてくれます（ライブリロード機能）。これにより、開発効率が大幅に向上します。開発を終了するには、ターミナルでCtrl + Cを押します。

注意点: GitHub Pagesのビルド環境は、利用できるJekyllプラグインに制限があります。ローカルで開発する際には、GemfileにGitHub Pagesでサポートされているプラグインのみを含めるか、GitHub Actionsを使って自分でビルドプロセスを制御することを検討しましょう（後述の発展的な使い方を参照）。GitHub PagesがサポートしているJekyllプラグインのリストは、GitHub公式ドキュメントで確認できます。

第5章：カスタムドメインを設定する

username.github.ioやusername.github.io/repository-nameといったデフォルトのURLではなく、独自のドメイン名（例: yourname.com, blog.yourname.com）でサイトを公開したい場合は、カスタムドメインを設定できます。

ステップ1：ドメイン名を取得する

まだカスタムドメインを持っていない場合は、まずドメイン登録サービス（お名前.com, ムームードメイン, Google Domainsなど）で好きなドメイン名を取得する必要があります。希望するドメイン名が利用可能か検索し、購入手続きを行います。

ステップ2：DNSレコードを設定する

ドメイン登録サービス（または利用しているDNSホスティングサービス）の設定画面で、あなたのドメイン名とGitHub Pagesサーバーを結びつけるDNSレコードを設定します。

設定方法は、Apexドメイン（例: yourname.com）を使うか、www.などのサブドメイン（例: www.yourname.com, blog.yourname.com）を使うかで異なります。

Apexドメイン (yourname.com) を使う場合:

  • Aレコードを設定します。GitHub PagesのサーバーIPアドレスをいくつか指定する必要があります。GitHub PagesのIPアドレスは変更される可能性があるため、GitHubの公式ドキュメントで最新のIPアドレスリストを確認してください。通常、以下の4つのIPアドレスを設定します。
    • 185.199.108.153
    • 185.199.109.153
    • 185.199.110.153
    • 185.199.111.153
  • 設定画面で、ホスト名（または名前、ネーム）のフィールドに @ または空欄を入力し、レコードタイプを A とし、それぞれのIPアドレスを値として追加します。

サブドメイン (www.yourname.com, blog.yourname.com) を使う場合:

  • CNAMEレコードを設定します。サブドメイン名をあなたのGitHub PagesのデフォルトURL (username.github.io) に向けます。
  • 設定画面で、ホスト名（または名前、ネーム）のフィールドにサブドメイン名（例: www または blog）を入力し、レコードタイプを CNAME とし、値として your-username.github.io を入力します。

注意点: DNSの変更がインターネット全体に反映されるまでには時間がかかる場合があります（数分から最大48時間程度）。これをDNS伝播（DNS Propagation）と呼びます。

ステップ3：GitHubリポジトリの設定を変更する

あなたのGitHub Pagesリポジトリ側でもカスタムドメインを設定します。

  1. GitHub上であなたのGitHub Pagesリポジトリにアクセスします。
  2. 「Settings」（設定）タブをクリックし、「Pages」を選択します。
  3. 「Custom domain」（カスタムドメイン）セクションを見つけます。
  4. 入力フィールドに、あなたが使いたいカスタムドメイン名（例: yourname.com または www.yourname.com）を入力します。
  5. 「Save」（保存）ボタンをクリックします。

GitHubがこの設定を保存すると、リポジトリのルートにCNAMEという名前のファイルが自動的に作成（または更新）されます。このファイルには、設定したカスタムドメイン名が1行で記述されています。例:

yourname.com

重要: もし手動でCNAMEファイルを作成・編集する場合は、ファイル名が大文字小文字を区別してCNAMEであること、ファイル内容が正確なドメイン名のみであること（前後にスペースや改行を含めない）、そしてこのファイルをリポジトリのルートディレクトリに配置していることを確認してください。また、GitHubのPages設定でカスタムドメインを保存すると自動でファイルが作成されるため、手動で編集する際はコンフリクトに注意が必要です。通常はGitHubの設定画面から行うのが最も安全です。

ステップ4：HTTPSを有効にする

カスタムドメインを設定すると、GitHub Pagesは無料でSSL証明書（Let’s Encryptによるもの）を発行し、サイトをHTTPSで提供できるようになります。HTTPSはセキュリティと信頼性を高めるだけでなく、SEOの観点からも重要です。

  1. GitHubリポジトリのSettings > Pages設定画面を開きます。
  2. カスタムドメインが正しく設定されていれば、「Enforce HTTPS」（HTTPSを強制する）というチェックボックスが表示されます。
  3. このチェックボックスにチェックを入れます。

SSL証明書の発行には少し時間がかかる場合があります。発行されると、サイトへのアクセスは自動的にHTTPSにリダイレクトされるようになります。チェックボックスがすぐには表示されない場合やチェックを入れてもHTTPSにならない場合は、DNS設定が完全に反映されていない可能性があります。しばらく時間をおいて再度確認してみてください。

これで、あなたのGitHub Pagesサイトがカスタムドメインで、かつHTTPSで公開されました！

第6章：サイトを公開・更新するワークフロー

GitHub Pagesの素晴らしい点は、Gitを使った変更管理と公開が密接に連携していることです。サイトのコンテンツを更新する際の一般的なワークフローは以下のようになります。

  1. ローカルでファイルを変更する:
    • テキストエディタやJekyllを使って、HTML、CSS、JavaScript、Markdownファイルなどを編集します。
    • 新しいブログ記事を書いたり、ポートフォリオに新しいプロジェクトを追加したりします。
    • Jekyllを使っている場合は、bundle exec jekyll serveでローカルプレビューを確認します。
  2. 変更をステージングする:
    ターミナルでリポジトリのディレクトリに移動し、変更したファイルをGitのステージングエリアに追加します。
    bash
    git add .
    # 特定のファイルのみを追加する場合は
    # git add path/to/changed/file.html path/to/another/file.md
  3. 変更をコミットする:
    ステージングした変更をコミットします。
    bash
    git commit -m "feat: add new blog post about GitHub Pages"
    # 分かりやすいコミットメッセージをつけましょう
    コミットメッセージの先頭に規約（例: feat, fix, docs, style, refactorなど）をつけることで、変更の種類を明確にするのが一般的です。
  4. 変更をGitHubにプッシュする:
    ローカルのコミットをGitHubリポジトリにアップロードします。
    bash
    git push origin main
    # またはプロジェクトサイトの場合は設定したブランチ (e.g., gh-pages)

プッシュが完了すると、GitHubはそれを検知し、自動的にGitHub Pagesのビルドプロセスを開始します。

  • 静的HTMLサイトの場合は、ファイルがそのまま配置されます。
  • Jekyllサイトの場合は、Jekyllビルドが実行されて静的ファイルが生成されます。

ビルドが成功すると、数分以内にあなたのGitHub Pagesサイトが更新されます。ビルドの進行状況や結果は、リポジトリの「Actions」タブやPages設定画面で確認できます。

この「変更 -> コミット -> プッシュ」というシンプルなGitワークフローで、サイトの更新やブログ記事の追加を効率的に行うことができます。

第7章：トラブルシューティング – よくある問題と解決策

GitHub Pagesのセットアップや更新中に遭遇する可能性がある、いくつかの一般的な問題とその解決策を解説します。

  1. サイトが表示されない、または古い内容が表示される:

    • DNS伝播: カスタムドメインを設定した場合、DNSの変更がインターネット全体に反映されるまで時間がかかることがあります。しばらく待ってみてください。
    • キャッシュ: ブラウザのキャッシュに古いサイト情報が残っている可能性があります。スーパーリロード（Ctrl+Shift+R または Cmd+Shift+R）を試したり、ブラウザのキャッシュをクリアしたりしてください。
    • ビルドエラー: 特にJekyllサイトの場合、ビルドプロセスでエラーが発生している可能性があります。
      • GitHubリポジトリの「Actions」タブを確認してください。Pagesのビルドワークフロー（通常はpages build and deployment）が実行されているはずです。もしビルドが失敗している場合は、そのログを確認してエラーの原因（Jekyll設定の誤り、テンプレートのエラー、Markdownの書式ミスなど）を特定し、修正して再度プッシュしてください。
      • Pages設定画面（Settings > Pages）でもビルド状況が表示されることがあります。
    • ファイルの配置場所: ユーザーサイトはusername.github.ioリポジトリのmainブランチのルート、プロジェクトサイトは設定されたブランチ/フォルダ（gh-pagesブランチのルート、mainブランチの/docsなど）にindex.htmlがあるか確認してください。
    • リポジトリ名/ブランチ名: ユーザーサイトのリポジトリ名は正確にusername.github.ioである必要があります。プロジェクトサイトのデプロイ元ブランチ（またはフォルダ）がPages設定で正しく指定されているか確認してください。
    • 大文字・小文字: Gitは通常、ファイル名やディレクトリ名の大文字・小文字を区別しますが、ウェブサーバーはOSによって区別しない場合があります。しかし、一貫性を保つため、ファイル名やディレクトリ名の大文字・小文字は正確に扱うようにしてください。特にindex.htmlやCNAMEといった重要なファイル名は正確に入力されているか確認しましょう。

  2. カスタムドメインが機能しない:

    • DNS設定の誤り:
      • Apexドメイン（yourname.com）を使いたいのにCNAMEレコードを設定している。正しくはAレコードです。
      • サブドメイン（www.yourname.com）を使いたいのにAレコードを設定している。正しくはCNAMEレコードです。
      • 設定したIPアドレスやCNAMEの宛先（your-username.github.io）が間違っている。
      • DNS設定がまだ伝播していない。
    • GitHub Pages設定の誤り: Settings > PagesのCustom domainフィールドに、設定したいドメイン名（例: yourname.comまたはwww.yourname.com）が正確に入力・保存されているか確認してください。
    • CNAMEファイルの誤り: リポジトリのルートにあるCNAMEファイルの内容が、Settingsで設定したドメイン名と一致しているか確認してください。余計な改行やスペースは削除してください。このファイルはGitHubのSettings画面で設定を保存すると自動生成されるため、手動編集時は注意が必要です。

  3. HTTPSが有効にならない:

    • カスタムドメインを設定してからHTTPSが有効になるまでには、SSL証明書の発行に時間がかかります。数時間から1日程度待ってみてください。
    • DNS設定（特にAレコードやCNAMEレコード）が完全に伝播していない可能性があります。DNS設定が完了しているか、各種DNSルックアップツールで確認してみると良いでしょう。
    • GitHub Pages設定（Settings > Pages）で「Enforce HTTPS」にチェックが入っているか確認してください。

  4. Jekyllビルドエラー:

    • Actionsログの確認: GitHubリポジトリの「Actions」タブを開き、Pagesビルドワークフローの実行ログを確認するのが最も確実です。エラーメッセージが表示されているはずです。
    • ローカルでのビルド: bundle exec jekyll serveをローカルで実行し、エラーが発生しないか確認してください。ローカルでのエラーメッセージの方が詳細な情報が得られることが多いです。
    • _config.ymlの構文エラー: YAMLのインデントやコロンの付け方などに誤りがないか確認してください。
    • Liquidテンプレートのエラー: _layoutsや_includesなどのHTMLファイル内で使われているLiquidタグ（{% ... %} や {{ ... }}）の記述に誤りがないか確認してください。
    • MarkdownファイルのFront Matterエラー: 記事ファイルの先頭にある---で囲まれた部分のYAML構文に誤りがないか確認してください。
    • サポートされていないプラグイン: GitHub PagesのJekyllビルド環境では、すべてのJekyllプラグインがサポートされているわけではありません。_config.ymlで有効にしているプラグインがGitHub Pagesで許可されているものか確認してください。許可されていないプラグインを使いたい場合は、GitHub Actionsで独自のビルドプロセスを組む必要があります。

  5. スタイルや画像が読み込まれない（プロジェクトサイトで多い）:

    • プロジェクトサイトのURLはusername.github.io/repository-name/のように、リポジトリ名がパスに含まれます。HTMLやCSSファイル内で画像やスタイルシート、スクリプトなどを指定する際に、パスが正しく記述されていないとファイルが見つかりません。
    • HTMLやCSSでのパス指定は、ルート相対パス（/assets/css/style.css）や相対パス（../images/photo.jpg）を使用できますが、プロジェクトサイトではルート相対パスを使う際に注意が必要です。プロジェクトのルートは/repository-name/になるため、/assets/...はusername.github.io/assets/...と解釈されてしまい、正しくはusername.github.io/repository-name/assets/...となるべきです。
    • これを解決するにはいくつかの方法があります。
      • パスを相対パスで記述する。
      • Jekyllを使っている場合は、{{ site.baseurl }}変数を利用してパスを生成する（例: <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css">）。_config.ymlでbaseurl: /repository-nameと設定します。
      • HTMLの<head>内で<base href="https://username.github.io/repository-name/">のようにベースURLを指定する。
    • パスが正しいか、ブラウザの開発者ツール（ConsoleタブやNetworkタブ）で確認すると、どのファイルが読み込みに失敗しているか、そのURLがどうなっているかが分かります。

これらのトラブルシューティングのヒントを参考に、問題の原因を特定し、解決に役立ててください。GitHubの公式ドキュメントも非常に参考になります。

第8章：さらにステップアップ – 発展的な使い方

基本的なGitHub Pagesの使い方が分かったら、さらに機能を追加したり、開発ワークフローを効率化したりする方法を検討してみましょう。

GitHub Actionsでビルドプロセスをカスタマイズする

GitHub Pagesの標準のJekyllビルド環境は便利ですが、利用できるJekyllプラグインが限られていたり、Jekyll以外の静的サイトジェネレータ（Hugo, Gatsby, Next.jsのSSG機能など）を使いたい場合には力不足です。

そこでGitHub Actionsの出番です。GitHub Actionsは、GitHub上でさまざまな自動化ワークフローを実行できるCI/CDサービスです。これを使うと、「プッシュされたら、指定した環境で、指定したコマンドを実行し、生成されたファイルをGitHub Pagesにデプロイする」というワークフローを構築できます。

これにより、以下のようなことが可能になります。

  • GitHub Pagesが公式サポートしていないJekyllプラグインを使う。
  • Hugo, Gatsby, Next.jsなどの別の静的サイトジェネレータを使う。
  • TypeScriptやSass/SCSSをコンパイルする。
  • コードのリンティングやテストを実行する。
  • 画像の最適化を行う。

GitHub Actionsを使ったデプロイの基本的な考え方:

  1. リポジトリの.github/workflows/ディレクトリにYAML形式のワークフローファイルを作成します。
  2. このファイルに、いつ（例: push時）、どのブランチで、どのような手順を実行するか（例: Node.jsをセットアップ、依存関係をインストール、Gatsbyのビルドコマンド実行、生成物をデプロイ）を記述します。
  3. 生成された静的ファイル（例えばpublicや_siteディレクトリ内のファイル）を、GitHub Pagesが読み取るための特別なブランチ（通常はgh-pages）にプッシュします。または、GitHub Actionsの機能を使って直接GitHub Pagesにデプロイします。

例：HugoサイトをGitHub Actionsでデプロイするワークフロー (概要)

“`yaml
name: Deploy Hugo site to GitHub Pages

on:
push:
branches:
– main # mainブランチへのpushをトリガーとする

jobs:
deploy:
runs-on: ubuntu-latest # Ubuntu環境で実行

steps:
  - name: Checkout code
    uses: actions/checkout@v3
    with:
      submodules: true # HugoテーマをSubmoduleで管理している場合

  - name: Setup Hugo
    uses: peaceiris/actions-hugo@v2
    with:
      hugo-version: 'latest' # Hugoのバージョンを指定

  - name: Build site
    run: hugo --minify # Hugoコマンドでサイトをビルド (デフォルトでpublic/に出力)

  - name: Deploy to GitHub Pages
    uses: peaceiris/actions-gh-pages@v3
    with:
      github_token: ${{ secrets.GITHUB_TOKEN }} # GitHubが自動で提供するトークン
      publish_dir: ./public # デプロイするディレクトリ (Hugoの出力先)
      publish_branch: gh-pages # デプロイ先のブランチ (プロジェクトサイトの場合)
      # user_name: 'github-actions[bot]' # コミットユーザー名
      # user_email: 'github-actions[bot]@users.noreply.github.com' # コミットメールアドレス

“`

このワークフローは、mainブランチにプッシュされると実行され、Hugoをセットアップし、サイトをビルドして、生成物をgh-pagesブランチにデプロイします。プロジェクトサイトでgh-pagesブランチからデプロイする設定と組み合わせることで機能します。

GitHub Actionsの設定は少し複雑になりますが、静的サイトジェネレータの可能性を最大限に引き出し、より高度なサイト構築や開発ワークフローを実現するための非常に強力な手段です。

SEO対策

静的サイトは検索エンジンにとってクロールしやすく、表示速度も速いため、SEOに有利な側面があります。GitHub Pagesで公開したサイトのSEOをさらに強化するためのポイントです。

  • タイトルとメタディスクリプション: 各ページの<title>タグと<meta name="description" ...>タグを適切に設定します。特にブログ記事では、記事の内容を正確に反映した固有のものを設定することが重要です。JekyllなどのSSGを使っている場合、Front Matterでこれらを定義し、レイアウトファイルで動的に出力するようにします。
  • 見出しタグ（H1, H2, …）: コンテンツの構造を論理的に示すために見出しタグを正しく使用します。
  • 画像ALT属性: 画像には必ず内容を説明するalt属性を付けます。
  • 構造化マークアップ: スキーママークアップ（例: JSON-LD）を使って、検索エンジンにコンテンツの意味をより正確に伝えます。ブログ記事やポートフォリオの項目などで活用できます。
  • XMLサイトマップ: サイト全体のページ構造を示すXMLサイトマップ（例: sitemap.xml）を生成し、Google Search Consoleなどに登録します。Jekyllはプラグイン（例: jekyll-sitemap）でサイトマップを自動生成できます。
  • 表示速度の最適化: 画像の圧縮、CSS/JSのミニファイ、ブラウザキャッシュの活用などを行います。静的サイトジェネレータやビルドツール（GitHub Actionsで実行）で自動化できることが多いです。
  • モバイルフレンドリー: レスポンシブデザインを採用し、様々なデバイスでサイトが見やすく操作しやすいようにします。
  • HTTPSの利用: 前述の通り、GitHub Pagesは無料でHTTPSを提供します。これはセキュリティだけでなく、SEOランキングにも良い影響を与えます。
  • 被リンク: 他のサイトからの高品質なリンクはSEOに大きく影響します。これはGitHub Pagesの機能というより、コンテンツの質やプロモーションに関わる部分です。

その他の機能追加

  • コメントシステム: 静的サイトにはサーバーサイドの機能がないため、ネイティブなコメント機能は持てません。DisqusやUtterances (GitHub Issuesを利用) 、Commento、Cusdisのようなサードパーティのコメントサービスを埋め込むことで対応できます。
  • アクセス解析: Google AnalyticsやCloudflare Web Analyticsなどのアクセス解析ツールを導入し、サイトへの訪問者数や行動を分析します。トラッキングコードを<head>や<body>の末尾に埋め込むだけです。Jekyllの場合は、_includesにトラッキングコード用のファイルを作成し、レイアウトファイルで読み込むのが一般的です。
  • 検索機能: 静的サイトの検索機能は、通常、サイト内検索エンジンサービス（例: Algolia, Lunr.jsを使ったクライアントサイド検索）を導入するか、Googleカスタム検索を利用することで実現します。

第9章：GitHub Pagesの活用事例

GitHub Pagesは様々な用途に活用できます。代表的な事例を紹介します。

  1. ポートフォリオサイト:
    自身のスキル、経歴、プロジェクト実績をまとめたオンラインポートフォリオ。開発者、デザイナー、ライターなど、クリエイティブな職業に就く人々にとって必須のツールです。静的なサイトなので表示が速く、カスタムドメインを設定すればプロフェッショナルな印象を与えられます。
  2. 技術ブログ:
    学んだこと、技術的なTips、開発経験などを発信するブログ。Jekyllを使えば、Markdownで簡単に記事を書くことができます。知識の整理になり、同じ問題に直面している人々の役に立つだけでなく、自身のスキルをアピールする機会にもなります。
  3. プロジェクトのドキュメント:
    オープンソースプロジェクトやライブラリの使い方、APIリファレンスなどをまとめたドキュメントサイト。プロジェクトリポジトリと連携させて、コードの更新に合わせてドキュメントも自動的に更新されるように構築できます。JekyllやMkDocs、Docsifyなど、ドキュメントに特化した静的サイトジェネレータと組み合わせて使うことが多いです。
  4. ランディングページ / プロモーションサイト:
    特定の製品、サービス、イベントなどの紹介や告知を目的としたシンプルなウェブサイト。凝ったデザインの静的HTML/CSSサイトを作成し、強力なメッセージで訪問者を引きつけます。
  5. 履歴書 / CV:
    オンライン版の履歴書や職務経歴書。PDFよりもリッチな表現が可能で、ポートフォリオへのリンクなども容易です。
  6. 個人のホームページ:
    自己紹介、趣味、連絡先などをまとめたシンプルな個人サイト。名刺代わりにもなります。
  7. 教材 / チュートリアルサイト:
    プログラミング言語や特定の技術に関する教材、ステップバイステップのチュートリアル。コード例なども含めて分かりやすく整理できます。
  8. イベントサイト:
    勉強会やカンファレンスなどのイベント告知、タイムテーブル、スピーカー情報などをまとめた一時的なサイト。

これらの事例はほんの一部であり、アイデア次第で様々な静的なコンテンツをGitHub Pagesで公開できます。

第10章：他の静的サイトホスティングサービスとの比較

GitHub Pagesは素晴らしいサービスですが、静的サイトホスティングの選択肢は他にもあります。代表的なサービスと比較し、GitHub Pagesの特徴を改めて理解しておきましょう。

  • Netlify:
    • 特徴: GitHub Pagesと同様にGit連携が強力で、リポジトリを連携させるだけで自動デプロイが可能です。ビルド環境が豊富で、GitHub PagesのJekyllサポートよりも多くの静的サイトジェネレータやビルドツール（npm scriptsなど）をサポートしています。A/Bテスト、フォーム機能、Lambda functions（サーバーレス機能）、Identity（認証）、Splits（地理的ルーティング）など、静的サイトに動的な要素やバックエンド機能を組み合わせやすいのが特徴です。無料プランが非常に generous です。
    • GitHub Pagesとの比較: ビルドの柔軟性が高く、よりモダンな開発ワークフローや高度な機能（CDNエッジでの関数実行など）を求める場合に有利です。GitHubのリポジトリ管理とは別に、Netlify独自のダッシュボードで設定や管理を行います。
  • Vercel:
    • 特徴: Next.jsの開発元が提供するホスティングサービスで、特にReact/Next.jsアプリケーションのホスティングに最適化されていますが、他の静的サイトジェネレータやフレームワークもサポートしています。Git連携による自動デプロイ、プレビューデプロイ機能、サーバーレス関数（Edge Functions, Serverless Functions）など、機能的にはNetlifyと似ています。CDNパフォーマンスに強みがあります。無料プランがあります。
    • GitHub Pagesとの比較: Netlifyと同様にビルドとデプロイの柔軟性が高く、特にJamstack構成やサーバーレス機能との連携を重視する場合に適しています。
  • GitLab Pages:
    • 特徴: GitLabが提供する静的サイトホスティングサービスです。GitHub Pagesと同様に、GitLabリポジトリと連携して利用します。.gitlab-ci.ymlファイルにビルド手順を記述することで、任意の静的サイトジェネレータやツールを使ってサイトをビルド・デプロイできます。機能的にはGitHub PagesとNetlify/Vercelの中間くらいとも言えます。カスタムドメイン、HTTPSも利用可能です。無料プランがあります。
    • GitHub Pagesとの比較: GitLabを使っているユーザーにとっては、GitHub Pagesよりも自然な選択肢となります。GitHub Pagesよりもビルドプロセスのカスタマイズ性が高いです（.gitlab-ci.ymlを使用するため）。
  • AWS S3 + CloudFront:
    • 特徴: Amazon Web Services (AWS) のオブジェクトストレージサービスS3に静的ファイルを置き、CDNサービスであるCloudFrontで配信する方法です。非常に高速でスケーラブルですが、セットアップにはAWSの知識が必要です。GitHub Pagesのように自動デプロイ機能は標準では組み込まれていませんが、AWS CodePipelineやGitHub Actionsなどと連携させることでCI/CDパイプラインを構築できます。従量課金制ですが、トラフィックが少ない場合は非常に安価です。
    • GitHub Pagesとの比較: セットアップや管理の学習コストは高いですが、スケーラビリティや他のAWSサービスとの連携という点では最も強力です。無料利用枠もありますが、完全に無料というわけではありません。

結論として:

  • 最も手軽に始めたい、GitHubでコードを管理している、シンプルなサイト（Jekyllブログ含む）を公開したい: GitHub Pages が最適です。無料枠が明確で、Git連携もスムーズです。
  • Jekyll以外のSSGを使いたい、よりモダンなビルドプロセスや豊富な機能を求めている、Git連携の容易さも欲しい: Netlify や Vercel が非常に有力な選択肢になります。無料枠も広いです。
  • GitLabユーザーである、ビルドプロセスを細かく制御したいが、GitHub Pagesライクな統合も欲しい: GitLab Pages が適しています。
  • AWSユーザーである、スケーラビリティを最重視する、クラウドインフラの学習も兼ねたい: AWS S3 + CloudFront を検討する価値があります。

あなたの目的、スキルレベル、既存の開発環境に合わせて最適なサービスを選びましょう。GitHub Pagesは、静的サイトホスティングの世界への最初のステップとして非常に優れています。

まとめ：あなたのコードを世界へ、GitHub Pagesとともに

この記事では、GitHub Pagesを使ってあなたのコードやコンテンツを世界に公開する方法を詳細に解説しました。

  • GitHub Pagesとは何か、そしてなぜそれが静的サイト公開に優れているのかを理解しました。
  • GitHubアカウントやGitといった始めるための準備を確認しました。
  • ユーザーサイトとプロジェクトサイト、2つの主要なサイトタイプとその違いを学びました。
  • 最初の静的HTMLサイトをGitHub Pagesで公開する具体的な手順を追いました。
  • 静的サイトジェネレータJekyllを使ったブログやコンテンツサイトの効率的な構築方法、基本的なファイル構造、ローカルでの開発方法を学びました。
  • サイトに信頼性とプロフェッショナリズムを与えるカスタムドメインの設定、DNSレコードの構成、そしてHTTPSの有効化について詳しく見てきました。
  • 日常的なサイトの更新ワークフロー（Gitを使った変更管理とデプロイ）を確認しました。
  • セットアップや運用中に発生しうる一般的な問題とその解決策を網羅的にカバーしました。
  • GitHub Actionsを使ったビルドプロセスのカスタマイズや、SEO、その他の機能追加といった発展的な使い方に触れました。
  • GitHub Pagesがどのような活用事例に適しているかを知り、他のホスティングサービスとの比較でその立ち位置を再確認しました。

GitHub Pagesは、開発者にとって自身の成果物を公開し、コミュニティと共有するための非常に強力でアクセシブルなツールです。ポートフォリオであなたのスキルをアピールし、ブログで知識を発信し、プロジェクトドキュメントで貢献を促すなど、その可能性は無限大です。

さあ、今日からあなたのコードをGitHub Pagesで世界に解き放ちましょう！最初の一歩は簡単です。リポジトリを作成し、index.htmlファイルをプッシュするだけ。そこからJekyllを導入したり、カスタムドメインを設定したりと、徐々にサイトを育てていくことができます。

この記事が、あなたのGitHub Pagesでのサイト公開の旅の強力なガイドとなることを願っています。あなたのオンライン上の存在感を確立し、素晴らしい作品や知識を世界と分かち合ってください！

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール