LoginSignup
10
14

More than 5 years have passed since last update.

GitHub Pagesで自分の作ったサイトを公開する

Last updated at Posted at 2017-06-14

せっかく勉強したし、自分で作ったものをwebページで公開してドヤ顔したい

でも

サーバー借りるのお金かかるし、めんどうやな(はなほじ

なにかちゃちゃっと簡単にアップできるのないのか

あった

_人人人人人人人人_
> GitHub pages <
 ̄Y^Y^Y^Y^Y^Y^Y ̄

GitHub Pagesがあれば個人のポートフォリオサイトやプロジェクトごとにページを公開することができます

GitHub Pagesに個人サイトを公開する方法は2つあります

 1.ユーザーアカウントのページ
 2.プロジェクトごとのページ

まずはユーザーページを作成するところから始めましょう✨

初手

  • GitHubアカウントがないかたはまず作ってからどうぞ

ユーザーページ作成

  • ユーザーページは1アカウントにつき1つまで作成可能です

[ユーザー名].github.ioというリポジトリをGitHubで作成します
ユーザーネーム以外は適用できないっぽいので気をつけてください

次に作成したリポジトリをクローンします

$ cd 作業場所(Desktopなど)
$ git clone git@github.com:[ユーザー名]/[ユーザー名].github.io.git

このディレクトリに公開したいページを作成します
ここでは仮にindex.htmlというファイルだけ公開します

$ cd [ユーザー名].github.io
$ echo "GitHub Pages" >> index.html

作業が完了したらリモートリポジトリにプッシュします👐

$ git add .
$ git commit -m "Initial commit"
$ git push origin master

プッシュした後は少しタイムラグがあるので反映されるまではお茶でもしばいてください🍵

[ユーザー名].github.io/で公開されました🎉

次はプロジェクト単位のページの作成方法です💪

プロジェクトページ作成

自己紹介ページだけでなく、プロジェクト単位でページを作りたいですよね

こちらは普通にプロジェクト単位でリポジトリを作ります。
準備が整ったら、GitHubのリポジトリページの[Setting]→[GitHub Pages]→[Source]で、[master branch/docs folder]を指定します。
[master branch/docs folder]が選択できない場合があるかもしれません。その時は[master branch]を選択してください

たったこれだけ

あとはリポジトリ名のURLにアクセスするだけです

https://[ユーザー名].github.io/[リポジトリ名]/

すごーい!ぎっとはぶさんはとってもかしこくてしんせつなフレンズなんだね🐯

所感

  • 静的なページなら無料で簡単に公開できるのすごい
  • たくさん公開して自分を表現できる( ・ㅂ・)و ̑̑
  • 転職したい人はこういう場所にどんどん公開した方が良い結果が生まれそう
  • 個人的には新しいフレームワークやプラグインの勉強で作ったものを公開することが多くなりそう
10
14
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
10
14