初心者でも安心！ホームページをgithubで簡単に無料公開する方法

2025 9/25

2025/09/25

はじめに

ブログの記事をどう書けばいいかわからない、あるいは自分の作品やポートフォリオを簡単に公開したい――そんな悩みをもっていませんか？本ドキュメントは、GitHubを使って無料でホームページや静的サイトを公開する方法をやさしく丁寧に解説します。

目的

GitHub Pagesの基本的な仕組みと、公開に必要な手順を初心者向けに示します。コマンド操作が苦手な方でも進められるよう、わかりやすい手順を用意しています。

対象読者

初めて自分のサイトを公開する方
ブログやポートフォリオを簡単に作りたい方
GitHubを使い始めたばかりの方

本書で学べること

GitHub Pagesの仕組みと公開URLの形式
コマンド不要の公開手順（初心者向け）
サイトの内容例と簡単なSEOの考え方
公開後の注意点とよくある質問

各章は順を追って読めばそのまま公開まで進めます。気軽に始めてください。

GitHub Pagesとは？無料でホームページを公開できるサービス

概要

GitHub Pagesは、GitHubが提供する静的サイトホスティングサービスです。HTML・CSS・JavaScriptで作ったファイルをGitHubのリポジトリに置くだけで、追加費用なしに公開できます。サーバー契約や支払いは不要で、個人でも企業でも利用可能です。

特徴

無料で公開できる
静的ファイル（HTML/CSS/JS）に対応
カスタムドメインと自動HTTPSに対応
Git（バージョン管理）で履歴管理ができる

向いている用途

ポートフォリオ、作品集、個人ブログ（静的生成器を利用）、プロジェクトのドキュメントやサンプルページに向いています。小規模〜中規模の公開に適しています。

制限と注意点

サーバーサイド（PHP、Ruby、データベースを動かす処理）には対応しません。動的な会員管理やフォーム送信などは外部サービスやJavaScriptのAPI連携で補う必要があります。また、公開はリポジトリの設定に依存するため、公開範囲（公開・非公開）に注意してください。

利用に必要なもの

GitHubアカウント（無料で作成可能）
公開したい静的ファイル

最初の一歩（概要だけ）

まずはGitHubにアカウントを作り、公開用のリポジトリを作成してファイルを置くだけで始められます。次章で、公開URLの仕組みと具体的な手順をわかりやすく解説します。

GitHub Pagesの公開URLの仕組み

概要

GitHub Pagesで公開されるURLは大きく2種類あります。1つは“ユーザーページ”、もう1つは“プロジェクトページ”です。用途に応じて使い分けます。

ユーザーページ

形式: https://ユーザー名.github.io/
ユーザーページはユーザー（または組織）ごとに1つだけ作れます。リポジトリ名をユーザー名.github.ioにすると、そのリポジトリの内容がルート(/)で公開されます。個人のポートフォリオや公式サイトに向きます。

プロジェクトページ

形式: https://ユーザー名.github.io/リポジトリ名/
プロジェクトページはリポジトリ単位で複数作れます。各プロジェクトごとに独立したサイトを持ちたいときに便利です。URLにリポジトリ名が入るため、サイト内リンクや資産のパスに注意します。

独自ドメインとHTTPS

独自ドメインを設定すると、上記のURLは独自ドメインに置き換わります。GitHubは自動でHTTPSを提供するので、安全に公開できます。

実用上の注意

プロジェクトページはサブパス公開のため、相対パス・ルートパスの使い方で表示が崩れることがあります。リンクや画像の参照は公開URLを意識して書きましょう。

GitHub Pagesの公開手順（コマンド不要・初心者向け）

概要

ここではコマンドを使わずに、ブラウザだけでサイトを公開する手順を丁寧に説明します。手順はアカウント作成→リポジトリ作成→ファイル追加→公開設定の順です。

1. GitHubアカウントを作る

まず github.com にアクセスし、無料アカウントを作成します。メールとパスワードを用意すれば数分で登録できます。

2. リポジトリを作る

GitHubの「New repository（新しいリポジトリ）」で作成します。
– ユーザーページ: リポジトリ名を「ユーザー名.github.io」にします（例: taro.github.io）。この場合、ルートで公開されます。
– プロジェクトページ: 任意の名前で作成できます（例: my-site）。

3. HTMLファイルを追加する

リポジトリ内に index.html を作ります。ブラウザ上の「Add file」→「Create new file」で簡単に追加できます。Markdown（README.md）でも作れます。

4. Pagesを有効にする

リポジトリの Settings → Pages に移動し、公開するブランチ（通常は main）とフォルダ（/（root））を選んで保存します。数分で公開され、画面に表示されるURLでアクセスできます。

5. テーマやMarkdownの活用

Jekyllテーマを使えば、Markdownで記事を書いて自動的にHTMLに変換できます。Themes欄や _config.yml を設定するだけで使えます。

6. よくある追加設定

カスタムドメイン: CNAMEファイルを追加し、DNS設定を行います。
HTTPS: Pages設定で HTTPS を有効にできます。

これで準備完了です。最初は基本の index.html を置くだけで公開できるので、気軽に試してみてください。

Webサイトの内容例と応用

ここでは、GitHub Pagesで作成しやすいページ例と応用のアイデアを分かりやすく紹介します。初心者でもHTML/CSS/JavaScriptだけで実現できる内容を中心に説明します。

ページ例

トップページ：サイトの顔として短い紹介文と目立つ画像やボタンを置きます。ランディングページに最適です。
作品紹介ページ：画像ギャラリーやプロジェクトごとの説明を並べます。サムネイルをクリックして拡大表示するギャラリーが定番です。
自己紹介ページ：経歴、スキル、制作の方針を載せます。写真やダウンロード可能な履歴書を置くと親切です。
お問い合わせページ：SNSリンク、メールアドレス、あるいは外部サービス（FormspreeやGoogleフォーム）を使った簡易フォームを設置できます。

静的サイトでできること

HTML/CSS/JavaScriptだけで、見た目の良いポートフォリオや簡単な動き（スライドショー、モーダル、フィルター表示）を実装できます。サーバー側の処理が不要なため表示が速く、管理もシンプルです。

Jekyllを使った応用

Jekyllを利用すればMarkdownで記事を書き、テンプレートで一覧やタグ機能を作れます。ブログ形式の更新や、作品ごとに個別ページを自動で生成するのに便利です。GitHub PagesはJekyllをそのまま使えるので、Markdownで管理すると更新が楽になります。

実用的なヒント

画像は表示サイズに合わせて圧縮してください。スマホ表示で見やすいレスポンシブデザインにします。お問い合わせはスパム対策を考え、公開する連絡先は用途に応じて選んでください。READMEにサイトの説明を書いておくと訪問者と自分の管理に役立ちます。

GitHub PagesとSEO（Google検索への表示）

なぜサイトマップが大切か

GitHub Pagesで作ったサイトが検索に出ないとお困りではありませんか？検索エンジンはページを見つけやすいと順位が上がりやすくなります。サイトマップ（sitemap.xml）は、サイト内のページ一覧を検索エンジンに伝えるための地図のようなものです。特にページ数が増えると効果的です。

Jekyll-sitemapで自動生成する方法（簡単）

リポジトリのルートにある_config.ymlに以下を追加します：
plugins:
- jekyll-sitemap
変更をコミットしてGitHubにプッシュします。GitHub Pagesがビルドすると /sitemap.xml が自動で作られます。
生成を確認できない場合は、robots.txtや公開設定でブロックされていないか確認してください。

Google Search Consoleへの登録手順

Google Search Consoleで「プロパティを追加」。URLプレフィックス方式を推奨します。
所有権確認はHTMLファイルのアップロードか、headにmetaタグを入れる方法が簡単です。HTMLファイルをリポジトリに追加して公開すれば確認できます。
サイトマップに /sitemap.xml を登録します。
URL検査ツールで重要なページを指定し、「インデックス登録をリクエスト」します。

その他の注意点

robots.txtでクロールを妨げないことを確認してください。
質の高いコンテンツとモバイル対応は検索で重要です。

これらを行えば、検索エンジンにサイトを見つけてもらいやすくなります。

公開後の注意点とよくある質問

公開直後に404が出る場合

公開直後にページが404になることがあります。その場合は数分〜数十分待ってからブラウザをリロードしてください。DNSやGitHub側の反映処理が完了していないことが多く、時間経過で解決します。キャッシュが原因なら、ブラウザのキャッシュをクリアすると早く直ります。

静的サイトのみ公開可能

GitHub Pagesは静的ファイル（HTML・CSS・JavaScript）を配信する仕組みです。サーバーで動く処理（PHPやサーバーサイドのデータベース処理）は動作しません。動的な機能が必要な場合は、外部のフォームサービスやAPIをJavaScriptで呼び出すことで代替できます。

編集の反映について

ローカルでHTMLやCSSを編集してGitHubにプッシュすれば、通常はすぐに公開サイトに反映します。反映に数分かかる場合があるので、更新後は少し待ってから確認してください。

独自ドメインとSSL（https）

独自ドメインを設定できます。リポジトリ設定でドメインを指定するか、CNAMEファイルを追加します。HTTPS（SSL）も自動で有効化されるため、安全にサイトを公開できます。

無料かつ広告なしで利用可能

GitHub Pagesは無料で使え、公開ページに強制的な広告は入りません。個人のポートフォリオや小さなサイトに最適です。

よくある質問

Q: フォームを置けますか？
A: サーバー処理はできないため、Formspreeなどの外部サービスを使うと簡単です。

Q: 画像の容量制限は？
A: 大きなファイルを多数置くとリポジトリが重くなるため、外部のCDNや画像ホスティングの利用をおすすめします。

Q: 非公開にできますか？
A: GitHubの設定によりますが、基本は公開向けの機能です。必要に応じてプライベートな代替を検討してください。

参考リンク・公式ガイド

以下は、GitHub Pagesを使うときに役立つ公式ガイドや参考リンクです。各リンクは基本的な使い方からカスタムドメイン、トラブルシューティングまで網羅しています。最新の手順は公式ページで確認してください。

公式ドキュメント（GitHub）

GitHub Pages の概要と設定: https://docs.github.com/en/pages
リポジトリから公開する方法、ブランチやディレクトリの指定、公開設定が説明されています。
GitHub Pages とカスタムドメイン: https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site
独自ドメインの設定手順や DNS レコードの注意点が書かれています。
GitHub Actions を使った Pages の自動公開: https://docs.github.com/en/actions/deploying-to-github-pages
自動ビルドやデプロイのワークフロー例が載っています。