GitHub_Pagesを使ってみた

23:25・2020/10/13　公開

22:55・2020/12/19　更新

サンプルページを表示するのにGitHubPagesを使うことにしました。

新規リポジトリを作成する

GItHub1

右上のNewを押して作ります。

リポジトリを作成する-GitHub Docs

公開範囲はpublicにしてください。
READMEはあっても無くてもいいです。

リポジトリの名前はURLに組み込まれます。

index.htmlを追加する

GiHub2
  • creating a new file(新しくファイルを作る)
  • uploading an existing file(既存のファイルを追加する)

どちらか選択して「index.html」をリポジトリに追加します。
※READMEがある場合はindex.htmlより優先的に表示されます。

ファイルを作る場合
GutHub3

htmlの中身は何でも良いですが、今回はHelloWorldを表示します。

<!doctype html>

<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

ファイルを追加する場合

ファイルを選ぶか、ドラッグ＆ドロップし、
アップロードが完了したらCommit Cangesを押して完了です。

セッティングする

GitHub4

ファイルが有るのを確認したら、Settingsに移ります。

GitHub Pagesの項目で、ブランチをmainにしてSaveします。

GitHub5
GitHub6

確認する

ページ上部に変更した旨のメッセージが表示されたら、再びGitHub Pagesの項目へ。

GitHub7
上部にURLリンクがある

表示されたURLリンクを押して、「Hello World!」が表示されたら公開完了です。

お疲れさまでした。

補足：他のファイルへのリンク

例えば追加したフォルダ内のファイルにアクセスしたいとき。

このフォルダの
GitHub9
このファイル

https://akahoshi-rs.github.io/samples/　←(元々あった部分)
sample-1/　←(フォルダを指定する部分)
sample-1.html　←(フォルダ内のファイルを指定する部分)

https://akahoshi-rs.github.io/samples/sample-1/sample-1.html

ということで他のファイルへ自由自在にリンクを飛ばせます。