GitHub Pagesを利用する

ポートフォリオサイトを作成するにあたり、どのWebサービスを利用しようか悩んでいた際に、GitHubで静的サイトを公開できるサービスがあると知り利用することに至りました。

今回は、GitHub Pagesを利用して静的ページを公開させる方法についてご紹介したいと思います。

GitHub Pagesとは

GitHub上で利用できる静的サイトのホスティングサービスです。

GitHubのアカウントがあれば、無料で自身で作成したWebページを簡単に公開することができます。

GitHub Pagesには、GitHub上のプロジェクト毎に紐付いているWebページと、無関係のWebページの二種類があります。

今回は、後者のページを利用すると想定して解説していきたいと思います。

ホスティングサービスとは

あるサーバー環境を利用したい場合に、ユーザーがネットを通じてサーバー環境の一部の領域を確保して各リソースなどを利用することができるサービスです。

ユーザーが一からサーバー環境を準備したり管理したりする必要がないため、非常に便利なサービスとなります。

利用方法

ユーザー登録

まずは、GitHubを利用するためにユーザー登録が必要なので登録を済ませておきましょう。

リポジトリ作成

GitHubが利用できる状態になったら、GitHubの管理サイトでGitHub Pages用のリポジトリを作成します。

リポジトリを作成したら、ローカルにクローンします。

ターミナルでリポジトリを作成したいディレクトリへ移動し、以下のコマンドを実行します。

$ git clone [リポジトリのURL]

クローンが成功すれば開発の準備は完了です。

ページ作成

先ほどクローンしたディレクトリにてHTMLファイルを生成し、ページを作成します。

HTMLの記述が完了したら、内容をコミットしてリモートリポジトリへプッシュします。

GitHubの設定

GitHub管理サイトで先ほど作成したリポジトリのページを開き、「Settings」をクリックします。

次に、「Options」を選択します。

「GitHub Pages」の「Source」の項目を「None」から「master」に変更し、「Save」をクリックします。

これで、masterブランチの内容が公開されるように設定されました。

その後、ブラウザで「https://ユーザ名.github.io/リポジトリ名」にアクセスしてみましょう。

すると、先ほど記述した内容のページが表示されたかと思います。

更新日 : 2020年8月23日

投稿者: TWEI

趣味はプログラミング。 以前は仕事でプログラミングをやっていました。現在はWebエンジニアを目指して勉強中。 勉強で得た知識などをブログで発信していく予定です。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA