使った静的サイトの公開方法ツイートシェアはてブLINEPocketどうもkazyです。今日は、無料で静的ページを公開できるホスティングサービスを紹介しようかと思います。最後にGit、GitHub、GitHubPagesって?まず、Git、GitHub、GitHubPagesについてそれぞれ見ていきます。GitとはGitと呼ばれるプログラムソースやファイルの変更履歴を管理する分散型のバージョン管理システムのことです。ローカルレポジトリと呼ばれるローカル環境でファイル管理が行え、またリモートリポジトリ呼ばれる先にファイルをコミットする分散型のシステム。今までは分散型でなかった為、リモートサーバにあるファイルを複数が直接変更する仕組みでありましたが、分散型の場合ローカル環境それぞれがローカルレポジトリとして管理ができるようになりました。複数人が直接リモートレポジトリを操作するとファイルの不整合や衝突が発生してしまうのですが、ローカルリポジトリを経由することで、リモートレポジトリを気にせずにファイルを更新することが可能になります。した分散型が主流となり、今では、エンジニアのバージョン管理システムの主流となったのがGitです。GitHubとはGitを利用したファイルのバージョン管理を行うウェブサービスのこと。GitとGitHubで間違いやすいですが、GitHubは自分のソースコードやファイルをGitHub上に保存、公開して全世界の人と共有することができるサービスのことです。基本的に無料で使用することが可能で、仕事や個人で開発する上での必需品とも言えるサービス。エンジニアであれば、使えないと話にならないレベルの、基本中の基本となるものです。PagesとはGitHub内の機能の1つで、無料で静的サイトを公開することが可能なサービスです。特徴としては以下のことが挙げられます。・URLはhttps://ユーザまたはプロジェクト名.github.io/リポジトリ名となります(独自ドメインの割り当ても出来るが別途設定が必要)・masterブランチにコミットすると即公開される(時間がかかる場合あり)本来はCUIで操作していきますが、GUIでの操作も十分可能です。Interfaceの略CUIはいわゆる対話形式の操作のことで、windowsであれば、コマンドプロンプト、macであれば、ターミナルのような文字でやりとりをするもののことです。GUIは、グラフィックが伴っているやりとり、PCやスマホ、ブラウザもそれにあたります。一般的に親しまれているものはGUIです。見やすく、わかりやすい操作ができるのが特徴です。今回は、CUIでの操作方法は割愛します。Pagesを使用してサイトをアップロードすることに主軸を置いて説明します。Worldを表示するだけのページでしたら5分くらいで公開出来ると思いますから安心してください。accountのボタンをタップして登録を完了させます。登録が完了したらログイン後のトップページからレポジトリの作成を行います。レポジトリがある方は左にnewのボタンがあるのでそれをクリック。repositoriesをクリックします。repositoriesをクリックした人は次に画面右上にあるNEWボタンをクリックしてレポジトリ追加画面に遷移させます。その後、レポジトリ作成画面が表示されるので、入力していきます。入力項目は、以下です。nameは、URLに表示されます。自分の作成する静的ページのタイトルなどを入力しましょう。Descriptionは説明文ですが、入力しなくて問題ないので、飛ばします。その下のPublic、Privateはレポジトリの公開範囲です。Pagesを使用する場合はPublicとしないと公開できないので、そのままで問題ありません。開発でGitHubを使用する場合に誰にも見られたくないという場合は、Privateにするといいかもしれません。READMEこれはGitHubのレポジトリについての説明文と思ってください。基本的には、READMEは追加しなくてもいいのですが、レポジトリには初期設定が必要で、READMEを追加しておくとその設定を省けるので、ここではチェックを入れておきましょう。詳しい解説はこの記事では、割愛します。licenseについてですが、.gitignoreというのは、gitの管理対象から外すファイルを設定するファイルのことです。毎回リモートレポジトリにアップロードする必要がない、ローカルで管理するだけで十分なファイルなどは、この.gitignoreに指定しておくといった使い方をします。そのファイルをデフォルトで作成するかどうかというものです。lincenseについては、レポジトリにライセンスを付与するかどうかというものですが、今回はサンプルを作るだけなので、特に追加の必要はありません。自作のフレームワークやライブラリを作る場合に必要になってくるかもしれませんが、今回は気にしないで大丈夫です。repositoryボタンを押してレポジトリの作成を完了させましょう。完了させたあと、このような画面が表示されていればOKです。htmlファイルを追加する続いてこの作ったリモートレポジトリにファイルを追加します。再三お伝えしますが、本来であれば、ターミナルからGitコマンドを用いて追加していくのが望ましいのですが、GUIでの操作方法なので、そのままブラウザ上にファイルを追加していきます。worldと入力しておきます。worldこれだけで大丈夫です。filesボタンをタップします。その後、upload画面が表示されるのでブラウザ上にindex.htmlをドラッグアンドドロップします。changesというボタンがあるので、これをタップしてファイルのアップロードを完了せます。Pagesの公開設定を行えば、完了となります。先ほどのコミットを行なったら自動でレポジトリのトップページに遷移しているかと思います。そこからSettingタブをクリックしてレポジトリの設定画面を開きます。branchに変更します。Pagesの設定項目までスクロールしてみましょう。https://kazy-dev.github.io/test1/が表示されていれば、公開完了となります。https://kazy-dev.github.io/test1/にアクセスしてみてください。worldが表示されていました。これで公開設定は完了です。最後にどうでしたでしょうか。思ったよりも簡単だったかと思います。気をつけた方がよいのは、エンジニアであれば、基本的にCUIで操作するべきだと僕は思います。GUI操作は時間もかかるし、変更履歴などの細かな情報を見るのもCUIの方が圧倒的に管理しやすく、楽です。Pagesの設定を行うのはとても便利かと思います。Pagesで公開していますので、よかったらぜひ見てみてください。Pagesで静的サイトを公開する方法で使用したレポジトリはGitHubで公開しています。Pagesを活用してみてください。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。【2週間シリーズ】2週間で個人開発アプリをリリースしてみる〜Part.1〜【体験談】「時間を売り買いできる」タイムチケットでフリーランスの相談をしてみた感想RECOMMENDこちらの記事も人気です。@kazy_developer2012年3月大学卒業→しばらくバンド活動をするも活動休止となる。その後営業職に就き、数年後、未経験からiOSアプリエンジニアに転職。現在フリーランスエンジニアを目指して活動中。