125
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

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

本記事は以下に引っ越しました。
今後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/)

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
125
Help us understand the problem. What are the problem?