GitHub Pagesについてまとめてみました！

初めに

  • GitHub Pagesについて詳しくまとめてみました。

  • 公式ページはこちらになります。

目次

GitHub Pagesとは？

  • githubが提供する静的サイトのホスティングサービスのこと。

  • 本来はレンタルサーバーなど契約しなければwebページを利用できないが、GitHub Pagesを利用すれば、無料でwebページを公開することができる。

  • 静的とはユーザーによってwebページが変更されない、HTMLやCSSで構築されたものを指します。

手順

事前準備

  • GitHubのアカウントを取得して無料登録する。

  • GitHub上にアップロードするHTMLとCSSを準備する。

流れ(アカウントを作成した前提で進めていきます。)

  1. GitHub上で公開するためのリモートリポジトリーを作成する。

  2. 作成したリモートリポジトリーに公開するHTML、CSSファイルをアップロードする。

  3. ページの公開を行う。

1.GitHub上で公開するためのリモートリポジトリーを作成する。

  • リポジトリーはGitHub上でWebページやアプリケーションの管理をする場所のようなもの。

  • ホーム画面右上の➕ボタンをクリックして"New repository"をクリック

  • リポジトリ名を入力。特にこだわりや理由がなければユーザー名.github.ioで作成する。

  • publicにチェックが入っているか確認する。(publicでないとweb上で公開できない。)

  • 緑色のCreate repositoryをクリック。

  • 表示された画面からREADMEをクリックして何も記載することなく右上にあるCommit changes...をクリック。

  • これにてリポジトリの作成が完了しました。

2.GitHub上にアップロードするHTMLとCSSを準備する。

  • Add fileをクリックしてCreate new fileをクリック。

  • 任意のファイル名をNew your file の部分に記述する。

  • 各自が用意しているファイルの中身をコピーして貼り付けを行う。

画像のアップロード

  • Add fileからUpload filesをクリック。

  • 使用している画像をドラッグ&ドロップしてアップロードを行う。

  • アップロードが終了したら、緑色のボタンのCommit changesをクリックすることで保存が完了する。

  • もしファイルの変更や、ディレクトリの追加がある場合は、アップロードされた画像まで移動して編集からファイル名の変更を行う。

  • 編集したいファイル名をクリック。

  • 鉛筆マークのEdit this file をクリックする。

  • 赤枠で囲まれている部分でファイル名の変更やディレクトリの追加を行う。

  • ディレクトリの追加の例としてはimages(ディレクトリ) / picture(ファイル名)とすることでimagesディレクトリの中にpictureというファイルを入れておくことができる。

3.Git Hubページの公開

  • Settingsをクリック。

  • pagesをクリック。

  • Vist siteをクリック。

  • 作成したページが表示される。

    まとめ

    GitHubページの公開までの流れを簡単に説明してきました。 GitHubページを利用すれば無料で簡単にWebページ公開することができます。 もし深く学んでみたい方は公式ページを参照するとより深く理解できると思います。 最後まで読んでいただきありがとうございました。