MENU
オンライン講座開催中
コーディング＆AWSにゃ(ΦωΦ)

GitHub Pagesで無料でWebページを公開する方法【ポートフォリオ・自己紹介ページに最適】

GitHub
GitHub Pagesで無料でWebページを公開する方法【ポートフォリオ・自己紹介ページに最適】

GitHub Pagesを使うと、HTMLファイルをGitHubにアップロードするだけで無料でWebページを公開できます。サーバー代もドメイン代も不要です。この記事ではリポジトリの作成からページ公開までの手順を解説します。

目次

GitHub Pagesとは

GitHub PagesはGitHubが提供する静的サイトホスティングサービスです。リポジトリにHTMLファイルをpushするだけでWebページとして公開できます。

項目内容
料金無料
独自ドメイン設定可能（別途ドメイン取得が必要）
デフォルトURLhttps://ユーザー名.github.io/リポジトリ名/
対応ファイルHTML・CSS・JavaScript（静的ファイルのみ）
PHPやWordPress使用不可（動的サイトは対応していない）

GitHub Pagesに向いているページ

  • ポートフォリオページ・自己紹介ページ
  • ランディングページ（LP）
  • HTMLの練習・学習用ページ
  • リンク集・プロフィールページ

STEP1：Publicリポジトリを作成する

GitHub PagesはPublicリポジトリで使用します（無料プランの場合）。Privateリポジトリで使用するにはGitHub Enterpriseが必要です。

  1. GitHubにログインして右上の「+」→「New repository」をクリック
  2. 以下の通りに設定する
  3. 「Create repository」をクリック
項目設定値
Repository nameportfolio（任意）
Public / PrivatePublic（GitHub Pagesは公開リポジトリが必要）
Add a README fileチェックを入れる

STEP2：index.htmlをアップロードする

公開するHTMLファイルを用意してアップロードします。ファイル名はindex.htmlにしてください。index.htmlはWebサーバーが最初に読み込むファイルです。別の名前にするとURLにファイル名を含める必要があります。

  1. リポジトリ画面の「+」ボタン → 「Upload files」をクリック
  2. index.htmlをドラッグ＆ドロップ
  3. 「Commit changes」をクリック
  4. ポップアップが出たら「Commit directly to the main branch」を選択して「Commit changes」をクリック

STEP3：GitHub Pagesを有効にする

  1. リポジトリの「Settings」タブをクリック
  2. 左メニューの「Pages」をクリック
  3. 「Branch」のドロップダウンで「main」を選択
  4. フォルダは「/ (root)」のまま
  5. 「Save」をクリック

「GitHub Pages source saved.」と表示されれば設定完了です。公開まで数分かかることがあります。

STEP4：公開URLにアクセスする

以下のURLでページが公開されます。

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

数分待ってもアクセスできない場合は、ブラウザのキャッシュをクリアしてから再度アクセスしてみてください。

ページを更新する方法

index.htmlを修正してGitHubに再アップロードするだけで自動的に更新されます。ブラウザからアップロードする場合は「Upload files」から同名ファイルをアップロードすると上書きされます。ターミナルからの場合はgit add → commit → pushで更新できます。更新後の反映にも数分かかることがあります。

独自ドメインを設定する方法

デフォルトのURLではなく独自ドメインを使いたい場合は、Settings → Pages → Custom domainに取得済みのドメインを入力してSaveします。あわせてドメインのDNS設定でCNAMEレコードを追加する必要があります。

まとめ

手順内容
STEP1Publicリポジトリを作成する
STEP2index.htmlをアップロードする
STEP3Settings → PagesでBranchをmainに設定する
STEP4https://ユーザー名.github.io/リポジトリ名/ にアクセスする

GitHub Pagesはポートフォリオや自己紹介ページを無料で公開するのに最適なサービスです。HTMLファイルを更新してpushするだけでページが更新されるので、維持コストもかかりません。

GitHub
目次