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

Git

テクノロジー
プログラミング

公開日時: 2021-06-21 　更新日時: 2022-04-26

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を作成します。ここでは、以下のように記述します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TipsNote : GitHub Pages Sample</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<body>
<main>
  <h1>GitHub Pages sample.</h1>
  <input type="button" value="button" class="btn btn-primary" onclick="buttonClick()">
</main>

<script>
function buttonClick(){
    // JavaScriptが動作することを確認するために、alertを記述
    alert('Clickされました！');
}
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>TipsNote : GitHub Pages Sample</title>

</head>

<body>

<main>

<h1>GitHub Pages sample.</h1>

</main>

function buttonClick(){

// JavaScriptが動作することを確認するために、alertを記述

alert('Clickされました！');

}

</script>

</body>

</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-keygen -t rsa -b 4096 -C GitHubの登録メールアドレス

1	~$ ssh-keygen -t rsa -b 4096 -C GitHubの登録メールアドレス

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

~$ ls .ssh/
id_rsa  id_rsa.pub

1 2	~$ ls .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コマンドを実行します。

~$ git clone git@github.com:GitHubユーザ名/github_pages_sample.git
Cloning into 'github_pages_sample'...
The authenticity of host 'github.com (13.114.40.48)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'github.com,13.114.40.48' (RSA) to the list of known hosts.
Enter passphrase for key '/home/user/.ssh/id_rsa':
remote: Enumerating objects: 16, done.
remote: Counting objects: 100% (16/16), done.
remote: Compressing objects: 100% (11/11), done.
remote: Total 16 (delta 3), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (16/16), done.
Resolving deltas: 100% (3/3), done.

~$ git clone git@github.com:GitHubユーザ名/github_pages_sample.git

Cloning into 'github_pages_sample'...

The authenticity of host 'github.com (13.114.40.48)' can't be established.

RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.

Are you sure you want to continue connecting (yes/no/[fingerprint])? yes

Warning: Permanently added 'github.com,13.114.40.48' (RSA) to the list of known hosts.

Enter passphrase for key '/home/user/.ssh/id_rsa':

remote: Enumerating objects: 16, done.

remote: Counting objects: 100% (16/16), done.

remote: Compressing objects: 100% (11/11), done.

remote: Total 16 (delta 3), reused 0 (delta 0), pack-reused 0

Receiving objects: 100% (16/16), done.

Resolving deltas: 100% (3/3), done.

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

~$ ls
github_pages_sample
~$ cd github_pages_sample/
~/github_pages_sample$ ls
index.html

~$ ls

github_pages_sample

~$ cd github_pages_sample/

~/github_pages_sample$ ls

index.html

cloneして編集

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TipsNote : GitHub Pages Sample</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>

<body>
<main>
  <h1>GitHub Pages sample.</h1>
  <input type="button" value="button" class="btn btn-primary" onclick="buttonClick()">
</main>

<script>
function buttonClick(){
    alert('Clickされました！');
}
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>TipsNote : GitHub Pages Sample</title>

</head>

<body>

<main>

<h1>GitHub Pages sample.</h1>

</main>

function buttonClick(){

alert('Clickされました！');

}

</script>

</body>

</html>

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

/* リセット */
* {
  margin: 0;
  padding: 0;
}

/* 見出し */
h1 {
  height: auto;
  margin: 40px 0 0 20px;
  padding: 0;
  color: #000;
  font-size: 30px;
  font-weight: bold;
  border-top: 0;
  line-height: 1.5;
}

/* リセット */

* {

margin: 0;

padding: 0;

}

/* 見出し */

h1 {

height: auto;

margin: 40px 0 0 20px;

padding: 0;

color: #000;

font-size: 30px;

font-weight: bold;

border-top: 0;

line-height: 1.5;

}

commit, pushします。

~/github_pages_sample$ git add index.html
~/github_pages_sample$ git add style.css
~/github_pages_sample$ git commit -m "style.css"
[main d40f7cd] style.css
 2 files changed, 18 insertions(+)
 create mode 100644 style.css
~/github_pages_sample$ git push
Enter passphrase for key '/home/user/.ssh/id_rsa':
Enumerating objects: 6, done.
Counting objects: 100% (6/6), done.
Delta compression using up to 2 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 487 bytes | 44.00 KiB/s, done.
Total 4 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To github.com:GitHubユーザ名/github_pages_sample.git
   75fee92..d40f7cd  main -> main

~/github_pages_sample$ git add index.html

~/github_pages_sample$ git add style.css

~/github_pages_sample$ git commit -m "style.css"

[main d40f7cd] style.css

2 files changed, 18 insertions(+)

create mode 100644 style.css

~/github_pages_sample$ git push

Enter passphrase for key '/home/user/.ssh/id_rsa':

Enumerating objects: 6, done.

Counting objects: 100% (6/6), done.

Delta compression using up to 2 threads

Compressing objects: 100% (4/4), done.

Writing objects: 100% (4/4), 487 bytes | 44.00 KiB/s, done.

Total 4 (delta 1), reused 0 (delta 0)

remote: Resolving deltas: 100% (1/1), completed with 1 local object.

To github.com:GitHubユーザ名/github_pages_sample.git

75fee92..d40f7cd main -> main

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

まとめ

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

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

FEnetを運営しているネプラス株式会社はサービス開始から10年以上
『エンジニアの生涯価値の向上』をミッションに掲げ、
多くのインフラエンジニア・ネットワークエンジニアの就業を支援してきました。

ネプラス株式会社はこんな会社です

秋葉原オフィスにはネプラス株式会社をはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

インフラ業界に特化

ネットワーク・サーバー・データベース等、ITインフラ業界に特化。Cisco Systemsプレミアパートナーをはじめ各種ベンダーのパートナー企業です。

業界を知り尽くしているからこそ大手の取引先企業、経験豊富なエンジニアに選ばれています。
正社員なのにフリーランスのような働き方

正社員の方でも希望を聞いたうえでプロジェクトをアサインさせていただいており、フリーランスのような働き方が可能。帰社日もありません。

プロジェクト終了後もすぐに次の案件をご紹介させていただきますのでご安心ください。
大手直取引の高額案件

案件のほとんどが大手SIerやエンドユーザーからの直取引のためエンジニアの皆様へに高く還元できています。

Ciscoをはじめ、Juniper、Azure、Linux、AWS等インフラに特化した常時300件以上の案件があります。
スキルアップ支援

不要なコストを削減し、その分エンジニアの方へのスキルアップ支援(ネットワーク機器貸出、合格時の受験費用支給など)や給与で還元しています。

受験費用例）CCNP,CCIE:6-20万円、JNCIS:3-4万円、AWS:1-3万円など

※業務に関連する一定の資格のみ。各種条件がありますので詳しくは担当者へにお尋ねください。
現給与を保証します！※

前職の給与保証しており、昨年度は100%の方が給与アップを実現。収入面の不安がある方でも安心して入社していただけます。

※適用にはインフラエンジニアの業務経験1年以上、等一定の条件がございます。
インセンティブ制度

ネットワーク機器の販売・レンタル事業等、売上に貢献いただいた方にはインセンティブをお支払いしています。

取引先企業とエンジニア側、双方にメリットがあり大変好評をいただいています。
社会保険・福利厚生

社員の方は、社会保険を完備。健康保険は業界内で最も評価の高い「関東ITソフトウェア健康保険組合」です。

さらに様々なサービスをお得に利用できるベネフィットステーションにも加入いただきます。
東証プライム上場企業グループ

ネプラスは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。