GitHub Pagesで静的サイトを無料で公開

今回は、「GitHub Pages」というGitHubのサービスを使って静的なサイトをWEB公開した話を紹介したいと思います。

既にGitを使っている人ならあっという間に無料公開できますし、Gitを使ったことがない人にとっては無料公開しつつGitの練習もできる方法となっています。

Gitとは

WEBに携わる人の多くが使うことになるであろうツールの1つとして、「Git」があります。Wikipediaによると、Gitとは以下のようなシステムのことを指します。

プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システム
https://ja.wikipedia.org/wiki/Git

WEBに関する業務をチームで行うときに重宝されるシステムで、同じテキストファイルを複数人が同時に編集しても最終的には1つの成果物にすることができるという便利なシステムです。基本的には無料で使えます。

僕が通っていた職業訓練校では1回もGitを使うことがありませんでしたが、実際に就職してWEB関連の実務に関わるとなると、毎日Gitを使うことになります。

また、Google、Microsoft、Twitterなどといった名だたる企業がGitを使って開発を行っており、現代を生きる私たちの多くがgitの恩恵を受けています。

Wikipediaでは、GitHubは以下のような説明で紹介されています。

GitHub（ギットハブ）は、ソフトウェア開発のプラットフォームであり、ソースコードをホスティングする。コードのバージョン管理システムにはGitを使用する。
https://ja.wikipedia.org/wiki/GitHub

つまり、インターネット経由でサーバを借りることによってGitを使ったソフトウェア開発ができるプラットフォームです。Git同様、基本的には無料で使えます。

GitHubは世界中で使われており、9400万人以上の開発者が利用しているようです。

そして、今回僕がWEB公開をするために使用したサービスが「GitHub Pages」です。僕が参考にしたブログ記事では以下のように紹介されています。

GitHubから提供されている、静的サイトのホスティングサービスのこと。
https://pengi-n.co.jp/blog/git-githubpages/

実際に使ってみて分かったのですが、GitHub PagesはGitHub内で利用できるため、既にGitHubで静的サイトのソースコードの管理をしている人は、30秒でWEB公開をすることができます。

しかし、僕はGitHubを使っていなかったので、GitHub上にサイトのデータを上げるということから取り組みました。以下の手順でデータを上げました。

自分のPCに置いているサイトのデータをGitHubのリモートリポジトリにプッシュ。以下のブログ記事を参考にして進めていきました。

そのあとは、GitHub上で少し設定を変えてWEB公開。以下のブログ記事を参考にしました。

今回WEB公開したのは、僕が職業訓練校に通っていたときに制作したポートフォリオサイト。HTML, CSS, jQueryのみで制作したもので、サーバーサイドのプログラミングを使っていない静的なWebサイトです。

GitHub PagesでWEB公開をすると、以下のURLでサイトへ訪問できるようになります。

そして、僕のポートフォリオサイトは以下のURLで訪問できるようになりました。

簡単に、無料で、しかもスッキリしたURLでWEB公開ができました。

以上が、「GitHub Pagesで静的サイトをWEB公開」した話でした。

これからWEB関連の実務に携わるという人は、試しにGitHub PagesでのWEB公開をやってみると、Gitを使う練習にもなって良い経験になるんじゃないかと思います。

リンク