Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

この記事のターゲット

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

ririli
Podcastやってます。 https://wakateossan.github.io/ 若手とおっさんの年齢差をコンセプトにテック系や健康、時事ネタなどを話しています。
https://www.ririli.net/
Colorkrew
東京・秋葉原にあるIT企業、株式会社Colorkrew。 ”世界のシゴトをたのしくするビジョナリーカンパニー”をビジョンに掲げています。 管理職0(ゼロ)、階層0(ナシ)、 チーム力∞(無限大)の組織運営、バリフラットモデルを策定・導入。OpenWork(旧Vorkers)が選ぶ自由主義で個性を活かす企業、性格のいい会社に上位ランクイン!
https://www.colorkrew.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away