142
126

More than 3 years have passed since last update.

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

Last updated at Posted at 2017-10-25

本記事は以下に引っ越しました。
今後Qiita上での更新はありません。
https://zenn.dev/ririli47/articles/a461cf7fb9ec1b1ddf4c


この記事のターゲット

・静的サイト作りたいけどサーバーとかどうしよう
・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/)

142
126
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
142
126