📄

GitHub Pagesで静的サイトを簡単に作る

2020/11/24に公開

この記事のターゲット

・静的サイト作りたいけどサーバーとかどうしよう
・GitHubで作れるらしいけどどうやるんだろう

GitHub Pagesって?

GitHubが提供している静的サイトのホスティングサービス。
HTML,CSS,JSを利用した静的サイトを簡単に公開することができる。
大きく分けてユーザーサイトとプロジェクトサイトの二つがある。
当然GitHubアカウントが必要。

ユーザーサイトの作り方

非常に簡単で、「username.github.io」という名前のリポジトリを作るだけ。(usernameは自分のgithubアカウント名)
このリポジトリに配置したファイルがweb上に公開される。
適当にindex.htmlを用意して以下のURLにアクセス。

https://username.github.io/

正しく表示されればあとは好きにサイトを作って行くだけ。

プロジェクトサイトの作り方

プロジェクトサイトの場合は二通り方法がある。(他にあればご指摘ください)

方法1 「gh-pages」というブランチを用意する

このブランチを切ることで勝手にプロジェクトサイトが用意される。
プロジェクトサイトのURLは以下の通り。

https://username.github.io/repository/

方法2 githubのリポジトリのページでgithub-pagesの設定をする

各リポジトリのsettingsにgithub-pagesに関する設定がある。
デフォルトではsourceがnoneになっているはず。
これを既存のブランチ(masterでも可)に設定することでプロジェクトサイトが用意される。
この場合のURLも方法1と同じ。

まとめ

とても簡単。
お金もかからないのでお財布にも優しく静的サイトを公開することができます。
プロジェクトサイトなんかはwikiみたいな使い方ができるんじゃないでしょうか。(デフォの機能であるけど)
あとはそのプロジェクトの紹介ページとか。
使い道はいろいろですね。

蛇足

拙作ですが、私のユーザーサイトを置いていきます。
簡単なポートフォリオを作りました。
デザインて難しいですね...

(https://ririli47.github.io/)

Discussion