この記事でわかること
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を作成します。ここでは、以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!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>
|
作成後に、「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コマンドを実行します。
|
1
|
~$ ssh-keygen -t rsa -b 4096 -C GitHubの登録メールアドレス
|
実行すると.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コマンドを実行します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
~$ 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があることが確認できます。
|
1
2
3
4
5
|
~$ ls
github_pages_sample
~$ cd github_pages_sample/
~/github_pages_sample$ ls
index.html
|
cloneして編集
取得したindex.htmlを編集します。ここでは、cssを追加してみます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!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>
|
次に、style.cssを新規作成します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/* リセット */
* {
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します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
~/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インフラ」
FEnetインフラはサービス開始から10年以上『エンジニアの生涯価値の向上』をミッションに掲げ、多くのエンジニアの就業を支援してきました。
転職をお考えの方は気軽にご登録・ご相談ください。
