【超簡単】GUIでGitHub Pages を使った静的サイトの公開方法

どうもkazyです。

今日は、無料で静的ページを公開できるホスティングサービスを紹介しようかと思います。

Git、GitHub、GitHubPagesって?

まず、Git、GitHub、GitHubPagesについてそれぞれ見ていきます。

Gitとは

Gitと呼ばれるプログラムソースやファイルの変更履歴を管理する分散型のバージョン管理システムのことです。

ローカルレポジトリと呼ばれるローカル環境でファイル管理が行え、またリモートリポジトリ呼ばれる先にファイルをコミットする分散型のシステム。

今までは分散型でなかった為、リモートサーバにあるファイルを複数が直接変更する仕組みでありましたが、分散型の場合ローカル環境それぞれがローカルレポジトリとして管理ができるようになりました。

つまり、複数人が直接リモートレポジトリを操作するとファイルの不整合や衝突が発生してしまうのですが、ローカルリポジトリを経由することで、リモートレポジトリを気にせずにファイルを更新することが可能になります。

こうした分散型が主流となり、今では、エンジニアのバージョン管理システムの主流となったのがGitです。

GitHubとは

Gitを利用したファイルのバージョン管理を行うウェブサービスのこと。

GitとGitHubで間違いやすいですが、GitHubは自分のソースコードやファイルをGitHub上に保存、公開して全世界の人と共有することができるサービスのことです。

基本的に無料で使用することが可能で、仕事や個人で開発する上での必需品とも言えるサービス。

まずエンジニアであれば、使えないと話にならないレベルの、基本中の基本となるものです。

GitHub

GitHub Pagesとは

GitHub内の機能の1つで、無料で静的サイトを公開することが可能なサービスです。特徴としては以下のことが挙げられます。

・無料で利用可能

・URLはhttps://ユーザまたはプロジェクト名.github.io/リポジトリ名となります
(独自ドメインの割り当ても出来るが別途設定が必要)

・masterブランチにコミットすると即公開される(時間がかかる場合あり)

本来はCUIで操作していきますが、GUIでの操作も十分可能です。

CUI、GUI?

ちょっと補足としてですが、

・CUIは、Character User Interfaceの略

・GUIは、Graphical User Interfaceの略

CUIはいわゆる対話形式の操作のことで、windowsであれば、コマンドプロンプト、macであれば、ターミナルのような文字でやりとりをするもののことです。

GUIは、グラフィックが伴っているやりとり、PCやスマホ、ブラウザもそれにあたります。一般的に親しまれているものはGUIです。見やすく、わかりやすい操作ができるのが特徴です。

今回は、CUIでの操作方法は割愛します。あくまでもGUIで、爆速でGitHub Pagesを使用してサイトをアップロードすることに主軸を置いて説明します。

GUIで操作してもHello Worldを表示するだけのページでしたら5分くらいで公開出来ると思いますから安心してください。

まずはGitHubアカウントの作成

https://github.com/

にアクセスして右上のsin upを選択します。

次にUsername、Email、Passwordを入力し、Verify Acountを入力してcreate an accountのボタンをタップして登録を完了させます。

レポジトリの作成

登録が完了したらログイン後のトップページからレポジトリの作成を行います。

すでにレポジトリがある方は左にnewのボタンがあるのでそれをクリック。

レポジトリがない場合はnewのボタンが表示されているのか、僕の方だと確認ができないのでわかりませんが、その場合は、右上のアカウント画像をクリックして

Your repositoriesをクリックします。

Your repositoriesをクリックした人は次に

画面右上にあるNEWボタンをクリックしてレポジトリ追加画面に遷移させます。

その後、レポジトリ作成画面が表示されるので、入力していきます。

入力項目は、以下です。

Repository nameは、URLに表示されます。自分の作成する静的ページのタイトルなどを入力しましょう。

Descriptionは説明文ですが、入力しなくて問題ないので、飛ばします。

その下のPublic、Privateはレポジトリの公開範囲です。

GitHub Pagesを使用する場合はPublicとしないと公開できないので、そのままで問題ありません。

もし開発でGitHubを使用する場合に誰にも見られたくないという場合は、Privateにするといいかもしれません。

Initialize this repository with a README

これはGitHubのレポジトリについての説明文と思ってください。

基本的には、READMEは追加しなくてもいいのですが、

レポジトリには初期設定が必要で、READMEを追加しておくとその設定を省けるので、ここではチェックを入れておきましょう。詳しい解説はこの記事では、割愛します。

Add .gitignoreAdd a licenseについてですが、

.gitignoreというのは、gitの管理対象から外すファイルを設定するファイルのことです。

毎回リモートレポジトリにアップロードする必要がない、ローカルで管理するだけで十分なファイルなどは、この.gitignoreに指定しておくといった使い方をします。

そのファイルをデフォルトで作成するかどうかというものです。

lincenseについては、レポジトリにライセンスを付与するかどうかというものですが、今回はサンプルを作るだけなので、特に追加の必要はありません。

自作のフレームワークやライブラリを作る場合に必要になってくるかもしれませんが、今回は気にしないで大丈夫です。

それではCreate repositoryボタンを押してレポジトリの作成を完了させましょう。

完了させたあと、このような画面が表示されていればOKです。

htmlファイルを追加する

続いてこの作ったリモートレポジトリにファイルを追加します。

再三お伝えしますが、本来であれば、ターミナルからGitコマンドを用いて追加していくのが望ましいのですが、GUIでの操作方法なので、そのままブラウザ上にファイルを追加していきます。

事前にテキストエディタでindex.htmlファイルを作成し、Hello worldと入力しておきます。

hello world

これだけで大丈夫です。

index.htmlを作成したら、Upload filesボタンをタップします。

その後、upload画面が表示されるのでブラウザ上にindex.htmlをドラッグアンドドロップします。

アップロードしたら画面を下にスクロールしてもらうと、Commit changesというボタンがあるので、これをタップしてファイルのアップロードを完了せます。

これで完了です。

GitHub Pagesの設定を行う

ここまできたらあとは、GitHub Pagesの公開設定を行えば、完了となります。

まず先ほどのコミットを行なったら自動でレポジトリのトップページに遷移しているかと思います。

そこからSettingタブをクリックしてレポジトリの設定画面を開きます。

そして、下へスクロールしていくとGitHub Pagesの設定項目が表示されるので、

Source

という項目のプルダウンをmaster branchに変更します。

変更すると設定はすぐさま反映されて、設定画面が再読み込みされますので、またスクロールしてGitHub Pagesの設定項目までスクロールしてみましょう。

下記のような

 Your site is published at https://kazy-dev.github.io/test1/

が表示されていれば、公開完了となります。

実際に https://kazy-dev.github.io/test1/にアクセスしてみてください。

hellow worldが表示されていました。これで公開設定は完了です。

最後に

どうでしたでしょうか。

思ったよりも簡単だったかと思います。

ただ気をつけた方がよいのは、エンジニアであれば、基本的にCUIで操作するべきだと僕は思います。正直、GUI操作は時間もかかるし、変更履歴などの細かな情報を見るのもCUIの方が圧倒的に管理しやすく、楽です。

ただ、このレベル、例えば、HTML、CSS、 JSで簡単なポートフォリオを作ったなどであれば、GUIを使って、GitHub Pagesの設定を行うのはとても便利かと思います。

僕も自作したポートフォリオをGitHub Pagesで公開していますので、よかったらぜひ見てみてください。

今回紹介したGitHub Pagesで静的サイトを公開する方法で使用したレポジトリはGitHubで公開しています。

https://github.com/kazy-dev/test1

みなさんもぜひGitHub Pagesを活用してみてください。

コメントを残す

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

CAPTCHA