GitHub Pagesとは
GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。
要するに、無料でwebページを公開できるというGitHubの1つの機能です。
GitHub Pagesサイトの例は、下記リンクにリポジトリが置いてあるので、見てみると面白いかもしれません。
使い方
①GitHubのアカウント作成
まずはGitHubのアカウントを作成する必要があるので、無料でアカウントを作成しましょう。
https://github.com/
すでにGitHubのアカウントを持っている方は、ログインしてください。
②GitHubにてリポジトリの作成
GitHub Pagesでwebページを公開するには、リポジトリを作成する必要があります。
リポジトリとは、webページやwebアプリケーション等を、GitHubで管理するための箱のようなものです。
以下リンクからリポジトリを作成しましょう。
(右上の+アイコンをクリック → New repository
をクリックしても同じ画面に行けます)
https://github.com/new
Repository name
の部分に任意のリポジトリ名を入力しましょう。
このリポジトリ名は、後ほど公開するwebページのURLになります。
(https://アカウント名.github.io/リポジトリ名
のような感じになる)
なお、webページを公開するので、Private
ではなくPublic
で作成してください。
③表示したいファイルの追加
GitHub Pagesで公開したいファイルを、作成したリポジトリ内にアップロードしましょう。
HTML/CSS/JavaScriptファイルをそれぞれアップロードすればOKです。
(本記事はHTML/CSS/JavaScriptの扱い方に関する記事ではないため詳細は割愛します)
④GitHub Pagesの公開
該当のリポジトリ内にファイルをアップロードできたらいよいよ公開です。
リポジトリ画面の右上にあるSettings
をクリックします。
Settings画面の左側メニューにあるPages
をクリックします。
Branch
部分を任意のブランチ(基本的にはmainブランチだと思います)に変更して、save
をクリックします。
上記操作で完了です。
しばらくすると、Visit site
と表示されるので、そちらをクリックするとGitHub Pagesを使って公開したwebページを見ることができます。
お疲れ様でした。
とても手軽に静的なページを公開できるので、便利だなと思います。
サクッと試したい時などにぜひお試しください。
参考資料