LoginSignup
2
1

GitHub Pagesへの公開方法を簡単に解説する

Posted at

はじめに

今回、作成したWebサイトをGitHub Pagesで公開したので
そのやり方をまとめてみました。
3ステップで簡単にでき、また、後半に自分が躓いた体験をもとに引っかかるポイントも解説したので、ぜひこの記事を参考にしてみてください!

GitHub Pagesとは

  • GitHubから提供されている静的サイト1ホスティングサービス2のこと
  • WordPressのような動的サイト(ユーザーの操作でページ内容が変化する)の公開はできません
  • GitHub無料版ではprivateリポジトリで公開できない(⇨今回は無料でできるpublicリポジトリで解説します)

プログラミング学習を始めたてで、模写コーディングなどHTML・CSSを使ってWebサイトを作ってみた方が、まず最初に公開する先として有用です!

公開に向けて準備するもの

GitHub Pagesを作成するにあたって、以下の準備が必要です。

  • GitHubアカウント
  • HTMLファイル
  • CSSファイル
  • 画像ファイル(必要であれば)

また、今回はGitやLinuxコマンドに関しては一定の知識がある前提で進めます。

公開手順3ステップ

1. Webサイトを作成する

HTML・CSS(・JavaScript)を使って静的サイトを作成
※こちらは今回はスコープ外となるため、割愛します。

2. 作成したWebサイトをGitHubへアップする

1. GitHubへログイン後、新規リポジトリを作成

CE64FB76-8C09-4A29-97CF-5F5E74142E23.png

2. レポジトリ設定ページ

① Repojitory nameを指定(ローマ字でお好みの名前で!)
② 必ずpublicにチェックが入れる
③ Create repositoryを押下
9A610F6B-EAD0-4568-BD3A-D4FDBA1C7526.png

3. 必要ファイルをGitHubへアップする

以下のコマンドから手元のディレクトリとファイルをアップする

git init
git add <ファイル名>
git commit -m <コミットメッセージ>
git remote add origin <path>
git push origin main

3. GitHub上でGitHub Pagesの設定をし公開する

GitHubへのアップロードができたら、
Settingsを押下
Pagesを押下
mainブランチ(説明画像はreplaceブランチで公開後、mainブランチにマージする予定なので、replaceブランチを指定している)
④ Saveを押下
⑤ URLあるいはVisit siteより作成したGitHub Pagesへ飛べる

6F6F47F2-C23D-4D0B-8355-5B7B411CE60F.png

URL発行に10分程度時間がかかる場合があります。

期待するページが出ない場合は?

僕にも画像のように期待するページが出ず、ずっと悩んでいた時期がありました。

8C0A086E-5C3B-415C-B977-C22D2091C878.png

そんな方々に向けた解決策としては、
表示させたいファイルが入った親ディレクトリのパスまでURLに入力することです!!
具体的に僕の例ですと、表示させたいファイルが下記のように、

6A1CC124-862E-41E8-9B38-7FDC3BBB9DA9.png


/Users/tomopu/Desktop/hc/resume/resume/

にあるので、直前の親ディレクトリまでを指定すると、

EABF070A-753C-4261-BEEE-38F41ADC624C.png

まとめ

  • GitHubから提供されている静的サイトのホスティングサービスのこと
  • 動的サイトの公開はできない
  • 公開手順は3ステップ
    • Webサイトを作成する
    • 作成したWebサイトをGitHubへアップする
    • GitHub上でGitHub Pagesの設定をし公開する
  1. 静的サイト: 動的なコンテンツ生成やデータベースとのインタラクションがない、プレーンなHTML、CSS、JavaScriptファイルのみで構成されるウェブサイトのこと(JavaScriptを使ったアニメーション含むサイトも公開可能)

  2. ホスティングサービス: インターネット上でウェブサイトやアプリケーションのデータやファイルを保存・公開するためのサーバーを提供するサービスのこと

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1