自分で作ったHTMLファイルを、誰でもブラウザから使える形で公開したい。
でも、
レンタルサーバーを契約するほどではない
独自ドメインもいらない
とりあえず無料で試したい
Windowsだけで作業したい
ということがあります。
そんな時に便利なのが、GitHubの「GitHub Pages」です。
GitHub Pagesを使えば、HTML・CSS・JavaScriptで作った静的なWebページを無料で公開できます。
今回は、実際にHTMLファイル1枚をGitHub Pagesで公開した時の手順を、つまずいた点も含めてまとめます。
GitHub Pagesとは？
GitHub Pagesは、GitHubのリポジトリに置いたファイルをWebサイトとして公開できる機能です。
GitHub Freeでも、Public（公開）リポジトリなら利用できます。
HTMLファイルを公開するだけなら、レンタルサーバーを用意する必要はありません。
GitHub公式でも、GitHub Pagesはリポジトリ内の静的ファイルを公開できる機能として案内されています。
公開後のURLは、おおむね次のような形になります。
https://ユーザー名.github.io/リポジトリ名/
このURLをスマートフォンやPCのブラウザで開けば、普通のWebページとして利用できます。
今回用意したもの
今回用意したのは、HTML・CSS・JavaScriptを1ファイルにまとめた、
index.html
だけです。
GitHub Pagesでは、index.html、index.md、README.mdなどを入口となるファイルとして認識します。HTMLでWebページを作るなら、index.htmlにしておくのが分かりやすいです。
なお、index.htmlという名前だからといって、そのリポジトリに他のファイルを置けなくなるわけではありません。
後から、
style.css
script.js
data.csv
画像ファイル
などを追加することもできます。
index.htmlは単に、その場所を開いた時の入口になるファイルです。
1．GitHubにログインする
まずGitHubへログインします。
すでにGitHubアカウントを持っている場合は、新しく作る必要はありません。
久しぶりにログインした場合でも、そのまま既存アカウントを使えます。
2．新しいリポジトリを作る
GitHubのトップ画面などにある「New」から、新しいリポジトリを作成します。
Repository nameには、公開する内容が分かる名前を付けます。
たとえば、
simple-web-tool
html-tools
game-tools
などです。
GitHub Pagesを無料で使う場合は、GitHub FreeではPublicリポジトリにしておくのが基本です。
設定が終わったら、
「Create repository」
をクリックします。
3．index.htmlをリポジトリに入れる
ここでHTMLファイルをGitHubへ入れます。
通常なら、
「uploading an existing file」
または、
「Add file」→「Upload files」
から、手元のindex.htmlをアップロードできます。
ところが今回、Firefox上でファイルを選択すると、
「Something went really wrong, and we can’t process that file.」
というエラーが出て、何度やってもうまくアップロードできませんでした。
ファイル名をindex.htmlにしていること自体は問題ありません。
そこで、ファイルアップロードを使わず、GitHub上で直接ファイルを作る方法に変更しました。
4．アップロードできない時はGitHub上で直接作る
空のリポジトリに表示されている、
「creating a new file」
をクリックします。
すると、
「Name your file...」
という欄が出てきます。
ここに、
index.html
と入力します。
その下に大きなコード入力欄があるので、手元のindex.htmlをメモ帳やエディタで開き、
Ctrl + A
で全選択、
Ctrl + C
でコピーし、
GitHubの入力欄へ、
Ctrl + V
で貼り付けます。
GitHubではWebブラウザ上から直接新しいファイルを作成できます。
貼り付けが終わったら、
「Commit changes」
を押します。
これでリポジトリ内にindex.htmlが保存されます。
今回のようにファイルアップロードがなぜか失敗する場合は、この方法の方が早いかもしれません。
5．GitHub Pagesを有効にする
次に、リポジトリ内のファイルをWebサイトとして公開します。
リポジトリ上部にある、
「Settings」
をクリックします。
左側のメニューから、
「Pages」
を開きます。
「Build and deployment」という項目があります。
Sourceを、
「Deploy from a branch」
にします。
その下のBranchを、
main
にします。
フォルダは、
/(root)
を選びます。
設定したら、
「Save」
をクリックします。
GitHub公式でも、ブランチから公開する場合は「Settings」→「Pages」→「Deploy from a branch」と進み、公開するブランチとフォルダを指定する手順になっています。
6．公開URLが表示されるまで待つ
Saveを押しても、すぐにページが表示されるとは限りません。
少し待ってから「Settings」→「Pages」をもう一度開くと、
「Your site is live at ...」
といった表示が出ます。
そこに公開URLが表示されます。
URLは、
https://ユーザー名.github.io/リポジトリ名/
という形になります。
GitHub公式によると、変更が公開されるまで最大10分ほどかかる場合があります。
公開URLが表示されたら、クリックして実際にページが動くか確認します。
7．スマートフォンでも普通に使える
GitHub Pagesとして公開してしまえば、iPhoneやAndroidからも普通のWebページとして開けます。
ここがかなり便利でした。
最初はHTMLファイルをメールでiPhoneへ送り、そのまま開こうとしました。
ところが、メールアプリやファイルアプリのプレビューではJavaScriptが正常に動かず、選択メニューなどが表示されませんでした。
GitHub Pagesへ置いた後は、Safariなどから普通のWebサイトとしてアクセスできるため、JavaScriptも正常に動作しました。
ローカルHTMLをスマートフォンで無理に開くより、無料のGitHub Pagesへ置いてしまう方が使いやすい場合があります。
GitHub Pagesで向いているもの
GitHub Pagesは、ちょっとした自作ツールの公開にかなり向いています。
たとえば、
計算ツール
検索ツール
JavaScriptで動く便利ツール
早見表
チェックリスト
静的なWebサイト
個人用に作った小さなWebアプリ
などです。
HTML・CSS・JavaScriptだけで完結するものなら、かなり手軽に公開できます。
一方、GitHub PagesはPHP、Pythonなどをサーバー上で動かす仕組みではありません。GitHub公式でも、PHP・Ruby・Pythonなどのサーバーサイド言語には対応していないと案内されています。
Pythonで計算した結果をHTMLとして出力したり、JavaScriptへ処理を書き換えたりする方法なら使えます。
公開リポジトリなので個人情報には注意
GitHub Pagesで公開する前に、HTMLやリポジトリ内に個人情報や公開したくない内容が入っていないか確認しておいた方がいいです。
GitHub Pagesで公開したサイトはインターネット上から閲覧できます。
GitHub公式も、Pagesサイトは公開されるため、センシティブな情報をリポジトリへ含めないよう注意を案内しています。
APIキーやパスワードなどは絶対にHTMLへ直接書かないようにします。
実際にやって分かったポイント
今回やってみて、一番重要だったのは次の3点でした。
まず、HTMLファイル1枚でもGitHub Pagesは使えます。
大掛かりなWebサイトを作る必要はありません。
次に、最初のファイル名をindex.htmlにすると分かりやすいです。
そして、ブラウザからのファイルアップロードがなぜか失敗しても、GitHub上で「Create new file」を使い、HTMLコードを直接貼り付ければ公開まで進められました。
GitHubというと、Gitコマンドやターミナルを使わないと何もできないイメージがありましたが、今回程度ならブラウザだけでも公開できます。
まとめ
HTMLやJavaScriptで作った小さなツールを無料公開したいなら、GitHub Pagesはかなり便利です。
基本的な流れは、
GitHubでリポジトリを作る
index.htmlを入れるSettingsを開く
Pagesを開く
Deploy from a branchを選ぶ
mainと/(root)を指定
Saveする
公開URLが出るまで待つ
これだけです。
レンタルサーバー代は不要で、独自ドメインも必須ではありません。
「自分で作ったHTMLを、とりあえずネット上で動かしてみたい」という用途なら、かなり使いやすい方法だと思います。
