GitHub Pagesでウェブサイト公開


GitHubには「GitHub Pages」という静的なウェブサイトをホスティングする機能があります。

“ホスティング”とは、サーバにHTMLファイルなどを置いて世界に公開する機能です。いわゆるウェブサーバというやつですが、ウェブサーバには、ファイル(HTMLや画像など)をブラウザに送る機能以外にも、サーバ上で色々なプログラムを実行する機能があります。

“静的なウェブサイト”というのは、ファイル配布以外の色々なプログラムをサーバ上で実行する必要がなく、サーバの仕事がブラウザへのファイル配布だけで完結するウェブサイトです。“動的”なウェブサイトとは、CMS(Wordpressなど)やウェブアプリなどです。Reactなどのように、サーバサイドプログラミングではないけれど、HTML・CSS・JavaScriptを生成するために「デプロイ」という処理が必要なものも動的サイトに含まれると思います。

ちなみにJavaScriptを使えば「動く(変化する)ウェブサイト」は作れるので、“静的/動的”は”動くか/動かないか“ではありません。JavaScriptから外部のサーバが提供する機能(API)にアクセスするだけなら“静的”なウェブサイトです。“サーバレス”と呼ばれる最近流行りのアプリ構成であれば、おそらく静的サイトとして構成することもできます。

ということで、HTML・CSS・JavaScriptを使っただけのウェブサイト(Vue.jsでCDNを使う場合も含む)やサーバレスなウェブアプリであれば、GitHub Pagesを使って無料で世界に公開できます。

以下では、その使い方の手順を紹介します。


GitHubに登録する

まず、GitHubのアカウントを持っていない人は ここから 登録します。

GitHubとは、“バージョン管理システム” と呼ばれるものの一つです。バージョン管理システムとは、上書き更新していったファイルを過去のバージョンに戻したり、ファイルの更新を分岐させて複数のバージョンを作ったりするものです。複数人で使用することができて、同時に同じ箇所を書き換えてしまったときの対応などもやってくれます。

GitHubはそんなバージョン管理システムの一つなのですが、github.comのトップページにて

GitHub is a development platform inspired by the way you work. From open source to business, you can host and review code, manage projects, and build software alongside 40 million developers.

と紹介されているように、コードをレビューしたりプロジェクトを管理するための「開発プラットフォーム」というべき存在になっています。プログラミング系の会社に就職するときは、自分のGitHubをもってプロフィールとするくらいです。
GitHubと類似のサービスに、GitLabやGitBucketなどがあります。

GitHub Pagesを使ってウェブサイトをホスティングするには、このGitHubを使うことが前提となっています。ウェブサイトデータのバージョン管理もできますので、一石二鳥ですね。

GitHubのアカウントを作成すること自体は難しくありません。ここの右上にある「Sign up」をクリックして、好きなユーザ名(username)を入力し、メールアドレスとパスワードを記入します。そして人間による入力であることを確認するために、動物の絵を転がしたりする作業をします。下の方で訊かれている「organization account」は、個人のウェブサイト専用であればチェックなしでOKです。

「Next: Select a plan」ボタンを押すと、FreeかProかを選択するページに遷移しますので、Freeを選んでください。「Welcome to GitHub」というアンケートページに遷移しますので、一番下までスクロールして「skip this step」をクリックしてください(もちろん回答しても構いませんよ!)。

すると、GitHubを使用する前に「Please check your email settings」ということですので、登録したメールアドレスに届くGitHubからメールが届いているか確認してください。以下のような英語のメールが届いているかと思いますので、「Verify email address」のリンクをクリックしてください。(画像では「ugok-girlsというアカウントを設定しています)

画像1

GitHubのサイトに飛びます。まずはProfileなどを整理してもらってもいいのですが、ここでは先に話を進めましょう。右肩にある三つのアイコンの「+」アイコンから「New repository」を選びます。この“リポジトリ”という言葉はGitHubの頻出用語で、バージョン管理するファイル群を置いておく場所です。

画像2

すると以下のようにリポジトリを新規作成するページに遷移するので、「Repository name」を「ユーザ名.github.io」にしてください。

画像3

一番下の「Create repository」ボタンを押すとリポジトリが作成され、以下のようなページに遷移します。

画像4

これでひとまずGitHubのウェブサイトで行う作業はおしまいです。

GitHubを使う環境を準備する

手元のPCからGitHubを使う方法はいくつもあるのですが、PCにアプリケーションをインストールする権限を持っているのであれば、WindowsとMacで同じように使えるGitHub Desktopを使ってみましょう。

ここからソフトウェアをダウンロードしてインストールしてください。初回はインストールの後に自動起動されます。2回目以降はアプリ一覧のなかに追加されていると思います。

画像5

「Sign in to GitHub.com」から先ほど登録したユーザ名とパスワードを入力すると、初回はGitの設定をしてくれるようです。登録したものと異なるEmailアドレスが表示されていますが、気にしなくて構いません。これはEmailアドレスの非公開設定なのですが、GitHub Desktopだとこんなに簡単に設定してくれるなんてちょっと感動です。

画像6

Continueを押すと、「Make GitHub Desktop better!」とか言ってきますが、チェックは外しておいても構いません。Finishボタンを押してください。

画像7

こんな感じの画面になり、「Your repositories」のところに先ほど作ったリポジトリが表示されているかと思います。

ファイルをリポジトリに追加する

ここでリポジトリ名をクリックすると、下の方に「Clone ユーザ名/ユーザ名.github.io」という青いボタンが表示されますので、クリックしてみましょう。

画像8

こんな画面が立ち上がります。「Local path」というところで「Choose」ボタンを押し、自分のPC上でウェブサイトのファイルを置きたいところを選びます。すでにウェブサイトのファイルがある場合は、ひとまず別のフォルダを指定しておいて、あとでファイルをそのフォルダに移動します(後述)。

「Cloneボタン」を押すと以下のような画面に遷移します。

画像9

また、Local pathとして選択したフォルダに「ユーザ名.github.io」というフォルダができていると思います。このフォルダが作業フォルダとなります。このフォルダを“ローカルリポジトリ“といいます。

すでに用意していたファイルがあるのであれば、このローカルリポジトリフォルダに移動しましょう。まだなければ、「index.html」というファイルを新規作成して、以下の内容でもコピペして保存しておきましょう。

<!doctype html> 
<html> 
  <body> 
    <h1>Hello World!!</h1> 
  </body> 
</html> 

すると、次のような感じで、追加したファイルがGitHub Desktopのほうに表示されると思います。

画像10


左ペインの中に「Summery (required)」という1行フォームがあります。ここには毎回の作業の内容(概要)を書きます。この項目は必須なので、何かしら書く必要があります(日本語OKです)。今回は「ファイルを置いた」などと書いておきます。

その下に「Commit to master」という青いボタンがあるので押してみましょう。すると以下のように左ペインが「0 changed files」となります。この作業を“コミット”といいます。

画像11

このコミットによって、ローカル(自分のPC)上でのファイルの変更がローカルリポジトリに記録されます。

ローカルリポジトリがあるということは“リモートリポジトリ”も存在し、これは最初のほうでGitHub.comにて作成したリポジトリを指します。リモートリポジトリはインターネット上にあります。ローカルリポジトリにファイルの変更を登録したら、次はそれをリモートリポジトリに反映させる必要があります。

なんだか二度手間のようですが、ローカルリポジトリを複数のPCで持っておいて(自宅のPCと大学のPCとか)、各PCからリモートリポジトリ(これは一つしかない)を更新したり、リモートリポジトリから最新のファイルを取ってきたりするために必要なのです。

さて、上記画像の「Publish branch」というボタンを押してみましょう。右上の黒地に白文字の「Publish branch」というところがしばらく動き、「Fetch origin」という文字に変わります。この作業を“プッシュ”といいます。

プッシュしたら、最初のほうで作成したリモートリポジトリ(GitHub.comのほうのリポジトリ)に移動してみましょう。
もうブラウザを閉じちゃったよ…という人は右肩のアイコンから「Your repositories」を選び、リポジトリリスト(といってもまだ一つですが)から辿れます。また、ブラウザのロケーションバーに「github.com/ユーザ名/ユーザ名.github.io」と打ち込んでも構いません。

画像12

リモートリポジトリのページに行くと、追加したファイルが表示されているでしょうか。もし表示されていなければ、ブラウザをリロードしてみてください。

画像13

表示されていれば成功です。ローカルリポジトリにあるファイルがリモートリポジトリに同期されました。

では、ブラウザのロケーションバーに「ユーザ名.github.io」と打ち込んでみてください。自分のウェブサイトが全世界に公開されているはずです(時間がかかることがあります)。

ファイルの更新

このあとは、ローカル(手元のPC)でファイルを更新する度にコミット→プッシュして、リモートリポジトリのファイルも更新していくことになります。
ローカルでウェブサイトのファイルを更新してGitHub Desktopを開くと、更新された部分がハイライト表示されている状態になっているかと思います。

「Summery (required)」に更新内容を書いて、「Commit to master」ボタンを押し、ローカルリポジトリに更新をコミットします。
続いてリモートリポジトリにその変更を適用しますが、先ほどは「Publish branch」だったボタンが「Push origin」に変化しています。

リモートリポジトリにプッシュしたら、「ユーザ名.github.io」を確認して、ウェブサイトが更新されていることを確認してください。

既存のリポジトリをウェブサイト公開する

今回のようにウェブサイトを公開するためにGitHubに一からリポジトリを作るのではなく、すでにGitHubで管理しているリポジトリをウェブサイトとして公開したい場合もあります。

その場合、リポジトリのなかに docs というフォルダを作成して、そこに公開したいウェブサイトのソースコード(HTMLファイルやCSSファイル)を置きます。ローカルでdocsを作成してファイルを置き、コミット→プッシュという作業になります。

それから、GitHubのサイトにログインしてリポジトリのページに移動します。上のタブリストの一番右にある「Settings」をクリックします。

画像14

開いたページを下の方にスクロールしていくと「GitHub Pages」という項目があるので、そこの「Source」のプルダウンメニューから「master branch /docs folder」を選んでください。

キャプチャ

これで、「ユーザ名.github.io/リポジトリ名」でウェブサイトが公開されているはずです。※この方法は著者は未確認です

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
文理融合系の学生たちにプログラミングを教えています/Twitter▷ojklab 教科書的なものは https://zenn.dev/ojk に移行しています。移行が終わったら、こちらは物書き用にしていきます。