【保存版】GitHubって何？学習・コード管理に最適な使い方＆Pagesで公開する方法も紹介

2025年11月8日2025年11月24日

「制作したHTMLや課題ファイルを安全に保存したい」「過去のコードと比較したい」「チームでコードを共有したい」
そんなときに役立つのが GitHub（ギットハブ） です。

GitHubは、デザイナーやエンジニアがコードやファイルを保存したり、履歴を管理したり、共同編集したりできる学習・制作向けのクラウドサービスです。

さらにGitHubには、作成したWebサイト（HTML・CSS・JavaScript）をインターネット上に公開できる「GitHub Pages」という機能も用意されています。
ただし、公開するとコードも誰でも閲覧・ダウンロードできる状態になるため、ポートフォリオや商用利用を考えている場合は注意が必要です。

この記事では、まず「GitHubとは何か」「なぜ学習者や制作現場で使われるのか」をわかりやすく解説し、最後にGitHub PagesによるWeb公開の方法と注意点も紹介します。

Contents

GitHubとは？何ができるサービス？

GitHubは、ソースコードや制作ファイルをオンライン上で保存・共有できるサービスです。
世界中のエンジニア・デザイナーが、プログラム・Webサイト・制作データを管理する場所として利用しています。

GitHubを使うと、以下のことが可能になります。

できること	説明
ファイルやフォルダをインターネット上に保存できる	パソコンが壊れても、バックアップとして残せる
履歴管理（バージョン管理）ができる	「昨日の状態に戻したい」「どこを直したか知りたい」が簡単
チームでの共同作業ができる	誰が・どこを・いつ編集したかが記録される
世界中の人のコードを閲覧・学習できる	実際のプロジェクトの構造やコーディング方法が学べる

GitHubは、もともと「Git（ギット）」という履歴管理システムの保存場所として作られたサービスです。

Git と GitHub の違い

名前	役割
Git（ギット）	ファイルの変更履歴を記録・管理する仕組み（バージョン管理システム）
GitHub（ギットハブ）	Gitの履歴をクラウド上に保存し、閲覧・共有・共同作業できるWebサービス

つまり、
Git = ノートのように「履歴を記録」する道具
GitHub = そのノートをインターネット上に置ける場所
というイメージです。

GitHub Pagesとは？｜静的サイトを無料で公開できる機能

GitHubには 「GitHub Pages」 という機能があり、リポジトリ内の HTML / CSS / JavaScript ファイルを、そのままWebサイトとして公開できます。ただし、これは静的サイトのみ対応しています。PHP・WordPress・データベース（MySQLなど）は使えません。

できること・できないこと

できること	説明
HTML / CSS / JavaScript のサイト公開	手元で作ったポートフォリオや作品をブラウザで公開できる
画像・PDF・動画なども表示可能	ファイルをGitHubにアップすればそのまま表示できる
レスポンシブやアニメーションもOK	CSS・JSの内容は自由に使える
取得すれば独自ドメインの設定もできる	`example.com` を設定することも可能

できないこと	理由
PHP・MySQLなどのサーバー処理	GitHub Pagesはサーバー機能を持たないため動作不可
WordPressの使用	WordPressはPHP＋データベースを必要とするため
お問い合わせフォームの送信処理	送信処理はサーバー側で動く必要があるため

GitHub Pagesは「静的サイト公開専用」であり、PHPやDBは原則使えません
有料プランでも対応しません（そもそもプランとして存在しない仕様）
PHP・WordPress・ログイン機能などを使いたいならレンタルサーバーに切り替える必要があります

ここで重要な注意点｜「公開するとコードもすべて見られます」

GitHub Pagesを使って公開した場合、HTML・CSS・JavaScriptなどのファイルも同時に公開状態（Public）になります。

誰でもWebサイトを見られる
同時に、誰でも「コードを表示・コピー・ダウンロードできる」状態になります

そのため

ポートフォリオとして見せたいけど、コードは見られたくない
商用デザイン・独自アイデアを含む制作物

このようなケースでは、GitHub Pagesを使わず、レンタルサーバー・Netlify・Vercelなどの方法のほうが安全です。

GitHub でアカウント作成

1. GitHubアカウントを作成する

まずはGitHubの公式サイトにアクセスします。

GitHub公式サイト　　https://github.com
画面右上「Sign up」から、メールアドレス・パスワード・ユーザー名を登録。（Googleでのログイン可)
メールに送られてくる認証リンクをクリックして完了
または、下記の様な画面の指示にしたがってパズルを操作する画面が出てきます。下記の場合、画面の左には「E, 12」と書かれた黒白の画像があり、これは 移動させるべき座標（位置） を示しています。画面の右には線路のようなマス目と左右の矢印ボタンがあり、この位置を左右に動かして指定の場所に合わせる パズルです。

2. 新しいリポジトリ（公開用フォルダ）を作成する

GitHubでは、ファイルを保存するフォルダのことを 「リポジトリ（Repository）」 と呼びます。
GitHub Pagesでサイト公開するには、特別な名前で作る必要があります。

GitHubにログイン
左端にある「Create repository」（新規作成）」をクリック

次のように入力します。

①General（上の部分）

項目	入力内容
Owner	そのままでOK
Repository name	`ユーザー名.github.io` ← ★ここが重要！
Description（任意）	入れても入れなくてもOK（例：My Portfolio / Webtraining demo site）

リポジトリ名は必ず「ユーザー名 + .github.io」という形式にしてください。
例えば今回のユーザー名が「webtrainingjp-cpu」なので、webtrainingjp-cpu.github.io と入力します。

② Configuration（下の部分）

項目	選択内容
Choose visibility	Public（公開）にする
Add README	どちらでもOK。迷ったらチェックなしでOK
Add .gitignore	選択なし（No .gitignore のまま）
Add license	なし（No license のまま）

③ 入力ができたら…

右下の 「Create repository」（緑のボタン）をクリックしてください！

3. 公開するファイルを準備する

最低限必要なのは index.html というファイルです。
以下のように、シンプルなHTMLファイルを用意しておくとスムーズです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>My Portfolio</h1>
        <p>Web Designer / Front-end Developer</p>
    </header>
    <main>
        <section>
            <h2>About Me</h2>
            <p>ここに自己紹介が入ります。</p>
        </section>
    </main>
</body>
</html>

フォルダ例（パソコン内）

portfolio/      
├── index.html     ← 公開時に最初に表示されるファイル
├── style.css
└── images/
    ├── profile.jpg
    └── work1.jpg

4. GitHubにファイルをアップロードする

画面中央付近にある 「creating a new file or uploading an existing file」 のリンクのうち、
　「uploading an existing file」 をクリックします。
　（もし見つからなければ、上部の 「Add file」→「Upload files」 でもOK）
表示されたページに、パソコンにある index.html ファイルをドラッグ＆ドロップします。
　（まだHTMLがない場合は、仮のファイルを作ってもOKです）
ページ下部の「Commit changes」をクリックして保存

5. GitHub Pages を公開用に設定する

Settings に移動
- 画面上部のタブから 「Settings」 をクリックします
  （Code / Issues / Pull requests の右にあります）
Pages の設定を開く
- 左側のメニューを下にスクロールして「Pages」 をクリック
公開するブランチを選択する
Build and deployment という項目があります
- Source を
  　 Deploy from a branch にする
- その下に出てくる Branch を
  　 main
  　 / (root)
  　に変更して Save

正しく設定できたら…数十秒〜数分後に、以下のURLでサイトが公開されます

公開URLの例

https://ユーザー名.github.io/リポジトリ名/

例：https://webtraining.github.io/portfolio/

6. ページが表示されたら成功です！

もし表示されない場合、よくある原因は

トラブル	確認ポイント
404 Not Found	`index.html` がリポジトリの一番上にあるか？
CSSが反映されない	`./style.css` になっているか？パスのミスはないか？
更新されない	キャッシュを消すか、URL末尾に `?v=2` をつける

自分のパソコンで作ったファイルを“まとめてアップロード”する手順

GitHubでは、1つ1つアップしなくても フォルダごと（複数ファイルをまとめて）アップロードすることができます。

① パソコン側でファイルを整理する

まずは、公開したいファイルを1つのフォルダにまとめておきます。

portfolio/          ← 自分の作業フォルダ（名前は自由）
├── index.html      ← 必須（最初に表示されるページ）
├── style.css       ← デザイン用ファイル
└── images/         ← 画像ファイル用のフォルダ
      ├── profile.jpg
      ├── work1.png
      └── work2.jpg

※ images フォルダの名前は自由ですが、小文字＋英語だけがおすすめです。

② GitHubリポジトリを開く

GitHubにログイン
自分のリポジトリ（例：webtrainingjp-cpu.github.io）を開く
「Add file」→「Upload files」 をクリック

③ フォルダごとドラッグ＆ドロップする

パソコンの作業フォルダ（例：portfolio の中身）をすべて選択して、
　GitHubのアップロード画面にドラッグ＆ドロップします。HTML / CSS / imagesフォルダ / 画像ファイルすべて一気にOKです。

※ そのままだと「フォルダごとアップ」できないこともあるので、
　フォルダの中身（全ファイル＋ imagesフォルダ）だけを選んでドロップするのが一番確実です。

④ Commit（保存）する

画面の下にある 「Commit changes」 ボタンを押す
これでファイルがGitHub上に保存されます
数秒待つと、自動的にURLへ反映されます

GitHubはなぜ学習者・エンジニアにとって大事なのか？

GitHub Pages の公開方法を紹介してきましたが、**「公開しないとしても、GitHub自体は触っておいた方が良い」**と言われる理由があります。
実際に制作現場や就職活動の面接でも、こんな質問がよくされます。

「GitHub使ったことありますか？」
「Gitでのバージョン管理はできますか？」
「ポートフォリオのコードはGitHubにありますか？」

なぜ、ここまでGitHubが重視されるのでしょうか？

GitHubを触っておくべき5つの理由

理由	内容
世界標準のコード管理サービス	ほぼすべてのエンジニア・制作会社が使っており、「使ったことがある」だけで信頼度が上がります
バージョン管理（履歴管理）ができる	「以前の状態に戻したい」「どこを修正したか知りたい」が簡単にできる
共同開発の基本スキルになる	チーム制作・授業や職業訓練・企業案件でも必須ツールになりつつあります
ポートフォリオの証拠になる	コードを書いた証拠（成長の記録）として評価されることもあります
オープンソースを学べる	実際のプロジェクトのコード構造・命名・設計など、教科書より参考になる例が多数あります

■ GitHub Pagesで“公開しない”使い方もできる

「コードを見られたくない」「非公開で使いたい」という場合でも、GitHubは学習に役立ちます。

使い方	具体例
バックアップ用途	PCが壊れてもコードが残る
課題提出用クラウド	ZIPで送る必要なし。URLで共有できる
履歴（差分）確認	“いつ・どこを・誰が修正したか”がわかる
Private（非公開）リポジトリも使用可	GitHub無料プランでも無制限で作成可能

■ Pages公開する場合の注意点（再確認）

注意点	内容
コードもすべて公開される	HTML・CSS・JSが誰でもコピー可能
商用・オリジナル作品には不向き	盗用・模倣される可能性もゼロではない
学習用・練習サイト・授業共有には最適	公開→URLで見せられる → フィードバックしやすい

GitHubは「学びの貯金箱」

GitHubは、ただのファイル置き場ではなく、自分の成長・努力を記録できるポートフォリオそのものです。

書いたコードがいつでも見返せる
失敗も含めて経験として残せる
企業や仲間から評価される「見える努力」になる

「まだよくわからないけど、触ってみる」だけでも十分価値があります。
Web制作者・エンジニアを目指すなら、早めにGitHubの世界に慣れておくことをおすすめします。

URLをコピーしました！