アフィリエイト広告を紹介しています
Working Class Hero：泥臭く、スマートに生き抜く。

汗と汚れの染み込む現場も、キーボードを叩く現場も、どちらも知っている。 元ライン工の僕が、ITの世界で見つけた「少しだけ楽に、自分らしく働くための知恵」を置いておきます。

僕が働き方を変えた理由
【学ぶ】ITスキル習得
【学ぶ】ITスキル習得
【変える】エンジニア転職
【変える】エンジニア転職
【知る】工場勤務のリアル
【知る】工場勤務のリアル

【無料】GitHub Pagesでホームページを公開する方法！初心者でも10分でできる！

「自分のホームページを作りたいけど、サーバー代がかかるのは嫌だ…」

そんな方にぴったりなのが GitHub Pages（ギットハブ ページズ） です。

完全無料で、HTMLファイルをアップロードするだけでWebサイトを公開できます。

太郎
太郎

ポートフォリオサイトやプロフィールページを無料で公開できます。プログラミング学習中の方には特におすすめ！

目次

GitHub Pagesとは？

GitHub Pagesは、GitHubのリポジトリにあるHTMLファイルをそのままWebサイトとして公開できるサービスです。

GitHub Pagesの特徴
  • 完全無料（サーバー代・ドメイン代不要）
  • `https://ユーザー名.github.io` のURLで公開
  • GitHubにpushするだけで自動更新
  • SSL（https）対応済み
  • ポートフォリオ、ブログ、プロフィールサイトに最適
GitHub Pagesの制限
  • 静的サイト（HTML/CSS/JS）のみ（PHP等のサーバーサイド言語は不可）
  • リポジトリサイズ上限: 1GB
  • 帯域幅上限: 月100GB
  • 商用利用には向かない（個人利用・ポートフォリオ向け）

GitHub Pagesの始め方

ステップ1：GitHubアカウントを作成

すでに持っている方は飛ばしてOK。

github.com でアカウントを作成します（無料）。

ステップ2：リポジトリを作成

  1. GitHubの右上「+」→「New repository」
  2. リポジトリ名を ユーザー名.github.io にする（例: taro123.github.io）
  3. 「Public」を選択
  4. 「Add a README file」にチェック
  5. 「Create repository」をクリック
重要：リポジトリ名のルール

リポジトリ名は必ず `ユーザー名.github.io` にしてください。これがそのままサイトのURLになります。

ステップ3：HTMLファイルをアップロード

  1. リポジトリページで「Add file」→「Create new file」
  2. ファイル名を index.html にする
  3. 以下の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>
  <style>
    body {
      font-family: sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 40px 20px;
      background: #f5f5f5;
    }
    h1 { color: #333; }
    .card {
      background: white;
      padding: 20px;
      border-radius: 8px;
      margin: 20px 0;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <h1>こんにちは！太郎です</h1>
  <div class="card">
    <h2>自己紹介</h2>
    <p>プログラミング学習中のエンジニアです。</p>
  </div>
  <div class="card">
    <h2>スキル</h2>
    <p>HTML / CSS / JavaScript</p>
  </div>
</body>
</html>
  1. 「Commit new file」をクリック

ステップ4：サイトを確認

数分待ってから、ブラウザで以下のURLにアクセス：

https://ユーザー名.github.io

サイトが表示されれば成功です！

太郎
太郎

反映に1〜5分ほどかかります。すぐに表示されなくても焦らず待ちましょう！

VSCodeからGitHub Pagesを更新する

ブラウザでファイルを編集するのは面倒なので、VSCodeからpushして更新する方法を覚えましょう。

1
リポジトリをクローン

VSCodeのターミナルで以下を実行：

“`

git clone https://github.com/ユーザー名/ユーザー名.github.io.git

“`

2
ファイルを編集

クローンしたフォルダをVSCodeで開いて、`index.html` を編集します。

3
変更をpush

“`

git add .

git commit -m “サイトを更新”

git push origin main

“`

pushしてから数分後、サイトに変更が反映されます。

実践：ポートフォリオサイトを作ろう

GitHub Pagesでは、CSSやJavaScriptも使えます。ポートフォリオサイトに必要な要素：

ポートフォリオに入れるべき内容
  • 自己紹介（名前・経歴・写真）
  • スキル一覧（使える技術）
  • 制作物（作ったサイトやアプリのスクリーンショット）
  • お問い合わせ先（メールやSNS）

ファイル構成の例：

ユーザー名.github.io/
├── index.html      ← トップページ
├── style.css       ← スタイルシート
├── script.js       ← JavaScript
└── images/         ← 画像フォルダ
    ├── profile.jpg
    └── project1.png

よくある質問

独自ドメインを使える？

はい。GitHubの設定画面でカスタムドメインを設定できます。ドメインを別途取得する必要はありますが、サーバー代は無料のままです。

ブログは作れる？

はい。Jekyll（ジキル）というツールを使うと、Markdownで記事を書いてブログを公開できます。GitHub Pagesが標準対応しています。

サイトを非公開にしたい

リポジトリの Settings → Pages で、サイトの公開を停止できます。または、リポジトリをPrivateにすると自動的に非公開になります（ただしFreeプランでは一部制限あり）。

Web制作スキルをもっと磨くなら

GitHub Pagesでポートフォリオを公開できたら、次は本格的なWeb制作スキルを身につけましょう。

関連記事
  • [GitリポジトリをVSCodeにクローンする方法](/blog/233/)
  • [VSCodeのGitHubコミット方法やpush取り消し方法](/blog/2033/)
  • [VSCodeとGitHubの連携方法](/blog/1628/)
  • [VSCodeのターミナルの開き方・使い方](/blog/3406/)

Web制作を本格的に学ぶなら

ポートフォリオの次は実案件へ。プロのカリキュラムなら最短でスキルが身につきます。

※無料体験・無料カウンセリングあり

まとめ：GitHub Pagesで今すぐサイトを公開しよう

この記事のポイント
  • GitHub Pagesは完全無料でWebサイトを公開できる
  • リポジトリ名を `ユーザー名.github.io` にするだけ
  • `index.html` をアップロードすれば即公開
  • VSCodeからpushで更新できる

プログラミングを学んでいるなら、ポートフォリオサイトは必ず作りましょう。就職・転職活動で「実際に作ったもの」を見せられるのは大きな武器になります。

GitHub Pagesなら10分で公開できるので、今すぐ試してみてください！

コメント