GitHubPagesを使ってサイトを公開する方法|公開手順から編集方法まで解説

GitHubPagesを使ってサイトを公開する方法|公開手順から編集方法まで解説のアイキャッチイメージ

GitHub Pagesを使ってサイトを公開しよう!


今回は、GitHub Pagesを使ってサイトを公開する方法について説明します。サイトの公開手順から、cloneして編集する方法について紹介します。無料で公開でき、リポジトリごとにサイトを作成できます。

GitHub Pagesの公開URLは以下のようになります。
https://{GitHubユーザ名}.github.io/{リポジトリ名}/

興味のある方はぜひご覧ください。

公開手順

GitHub Pages を使ったサイトの公開手順を紹介します。
GitHubにログインし、画面右上の「+」アイコンをクリックします。「New repository」を選択して、リポジトリを作成します。
リポジトリ名は、ここでは「github_pages_sample」とし、「Create repository」ボタンをクリックします。

次に、「creating a new file」リンクまたは「uploading an existing file」リンクをクリックして公開用のHTMLファイルを作成します。
ここでは、「creating a new file」でindex.htmlを作成します。ここでは、以下のように記述します。

作成後に、「Commit new file」をクリックしてコミットします。
次に、GitHubリポジトリのSettingsからGitHub Pages、Sourceと進みmainを選択して、Saveボタンをクリックします。
公開URLは以下のようになります。ブラウザからアクセスしてみてください。
https://{GitHubユーザ名}.github.io/{リポジトリ名}/

GitHubから編集

GitHub Pagesの公開URLの更新手順を紹介します。
GitHubリポジトリからindex.htmlを選択し、鉛筆ボタンで編集できます。コミット後に公開URLを更新すると、編集結果が反映されることが分かります。
簡易的な編集であれば、GitHubで直接編集しても構いません。

SSHキーの設定

GitHubにアクセスするための、SSHキーの設定手順を紹介します。ターミナルからssh-keygenコマンドを実行します。

実行すると.sshフォルダに秘密鍵(id_rsa)と公開鍵(id_rsa.pub)が生成されます。

作成した公開鍵をGitHubに登録します。以下のURLにアクセスしてください。
https://github.com/settings/keys

「New SSH key」ボタンをクリックし、Titleに何かしらのタイトルを入力します。Keyに公開鍵(id_rsa.pub)の内容を入力します。その後、「Add SSH key」ボタンをクリックします。

次にターミナルからgit cloneコマンドを実行します。

github_pages_sampleフォルダが取得できました。配下にindex.htmlがあることが確認できます。

cloneして編集

取得したindex.htmlを編集します。ここでは、cssを追加してみます。

次に、style.cssを新規作成します。

commit, pushします。

公開URLにブラウザからアクセスしてみてください。
https://{GitHubユーザ名}.github.io/{リポジトリ名}/
内容が更新されていることが分かります。

まとめ


GitHub Pagesを使ってサイトを公開する方法と、サイトの公開手順からcloneして編集する方法について紹介しました。

説明したサンプルコードを参考に、ぜひご自身でソースコードを書いて理解を深めてください。

インフラエンジニア専門の転職サイト「FEnetインフラ」

FEnetインフラはサービス開始から10年以上『エンジニアの生涯価値の向上』をミッションに掲げ、多くのエンジニアの就業を支援してきました。

転職をお考えの方は気軽にご登録・ご相談ください。