GitHub Pagesを利用したサイトの公開方法まとめ

はじめに

今回はGitHub Pagesを使ってサイトを公開したので、公開までに対応したことをまとめたいと思います。

GitHub Pagesとは

そもそもGitHub Pagesとは、GitHubが出しているサービスで、GitHubリポジトリをWebサイトとして公開できる仕組みのことです。

誰でも(個人でも組織でも)無料で作成できる静的サイトホスティングサービスになっています。

ドメインgithub.ioか独自ドメインを設定することも可能です。

sampleサイト紹介

百聞は一見にしかずということで、3つほどGitHub Pagesで作成されているサイトを紹介したいと思います。

Netflix OSS
Square Open Source
Twitter Open Source

公開までの流れ

では、実際にGitHub PagesでのWebサイトの公開までの流れを説明します。

大きく分けると4つのステップです。

  1. Githubアカウントを作成する
  2. リポジトリを作成する
  3. html&cssファイルをアップロードする
  4. Github上で公開の設定をする

それでは1つずつ詳細を確認していきましょう。

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

まずはGithubのアカウントを作成します。

無料で作成できるのでまだ未作成の場合は作成しましょう。

2. リポジトリを作成する

リポジトリの作成と公開設定

次はリポジトリを作成します。リポジトリの名前は任意のもので大丈夫です。 既存のリポジトリを利用することも出来ます。

リポジトリは公開と非公開を選択できますが、GitHub Pagesでサイトを公開するためにはリポジトリを公開しておく必要がありますので注意してください。

3. html&cssファイルをアップロードする

リポジトリが作成できたらGitHub Pagesで公開したいサイトのhtmlやcssのファイルをアップロードします。

htmlファイルは第一階層に置いておくといいと思います。

また、ファイルをアップロードして、公開させたいBranchを覚えておきましょう。

4. Github上で公開の設定をする

ここまで準備ができたらあと少しです。

GitHubでの公開設定

GitHub の該当リポジトリでSettingタブを開き、左側のメニューバーからPagesを選択します。

Build and deploymentの項目で公開させたいBranchを選択します。

またもし独自ドメインを設定したい場合は、Custom domainの項目でドメインを設定します。

設定はこれで完了です。お疲れさまでした。

まとめ

今回はGitHub Pagesを利用したサイトの公開方法を紹介しました。

ご自身でサーバーを契約して構築する必要もなく公開できるので、ポートフォリオサイトなどとして利用するにはとても便利だと感じました。