vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

GitHubを使って無料でWebサイトを公開してみよう!

      2017/01/31

LINEで送る
Pocket

github-pages
こんにちは、okutani(@okutani_t)です。GitHubでは静的なページ(PHPやRubyなどのサーバーサイドで動く言語を使わないページ)であれば、無料でお手軽にWebサイトを公開することができます。

ちょっとした検証や、GitHubで管理しているプロジェクトの紹介ページをこの機能で作ると良いですね。

実際にGitHubページで運用されているサイトはたくさんありますが、「Animate.css」や「slick – the last carousel you’ll ever need」なんかは、この機能を使って公式サイトをオープンしています。

yoshiko-pg.github.io」を初めてみたときは感動しました。一度見てみてください。

合わせて公式のチュートリアルを見ておくとより理解が深まるかと思います。

参考GitHub Pages – Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

もし、GitHubのアカウント作成がまだ済んでいない方は「GitHubの登録手順、SSH設定&リポジトリをclone,pushまで | vdeep」を一読して、GitHubを利用できる状態にしておきましょう。

GitHubページは「ユーザーアカウント用のページ」「リポジトリごとのページ」がそれぞれ作成できます。本記事では両方解説しています。

では、実際にGitHubでWebサイトを公開してみましょう!

スポンサーリンク

ユーザー名.github.ioのページを作成してみる

まずはユーザーアカウント用のページを作成してみましょう。

GitHub上で「ユーザー名.github.io」という名前で空のリポジトリを作成します。

github-pages2

次のコマンドでリポジトリをクローン。

$ git clone https://github.com/ユーザー名/ユーザー名.github.io.git

私のアカウントでは次のようになりました。

$ git clone https://github.com/okutani-t/okutani-t.github.io.git

あとは、この中にHTMLファイルを生成していけばOKです。

$ cd okutani-t.github.io
$ echo hello github page! > index.html

ステージング、コミットしてプッシュ。

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

すこし待って(10分ぐらい)下記へアクセス。作成したページが表示されるか確認してみましょう。

http://ユーザー名.github.io/

github-pages3

無事にユーザーアカウントのWebページが公開できました。

リポジトリごとのページを作成してみる

次はリポジトリごとのページを作成してみましょう。

作り方はかんたんで、『gh-pages』という名前でブランチを作ればOKです。試しにfirst-gitリポジトリで作成してみます。

$ git clone https://github.com/okutani-t/first-git.git
$ cd first-git
$ git checkout -b gh-pages
$ echo first git! > index.html

コミットしてプッシュします。

$ git add -A
$ git commit -m "Initial commit"
$ git push origin gh-pages

GitHubにプッシュしたら、次のURLへアクセスしてみましょう。

http://ユーザー名.github.io/リポジトリ名/

github-pages4

ちゃんとWebサイトが表示されました!かんたんにリポジトリからWebサイトを作ることができましたね。

私はJavaScript, jQueryで書いたテストコードをすぐにブラウザで確認できるように、gh-pagesブランチでリポジトリを管理しています。リンクを載せておくので参考にしてください。

参考okutani-t/javascript-code: JavaScriptのテストコード

参考okutani-t/jQuery-code: jQueryのテストコード

github-pages5

また、Webサイトの内容はgh-pagesブランチを常に見ているので、masterブランチの内容は破棄してもOKです。一応、masterブランチを破棄する手順も合わせてご紹介しておきます。

masterブランチを削除する方法

まずは、Github上のデフォルトブランチをmaster以外にします。

GithubのリポジトリTOPページから「Settings」→「Branches」へ移動。「Default branch」の項目を次のように変更しましょう。

github-pages6

これで、masterブランチを削除する準備ができました。変更できたら、ローカルリポジトリ上でmasterブランチを削除しましょう。

$ git branch -d master

次のコマンドで、リモートリポジトリのmasterブランチを削除。

$ git push origin :master

次のコマンドで、ローカルとリモートリポジトリのブランチの状態をまとめて確認できます。

$ git branch -a
* gh-pages
  remotes/origin/gh-pages

きちんとmasterブランチが削除されていることが確認できました。これでgh-pagesブランチのみで運用できますね。

ただし、はじめに作ったユーザー名.github.ioのブランチはmasterでの運用でOKです。わざわざgh-pagesブランチで運用する必要はないので気をつけましょう。

Githubを使ってサイトを作成したい方の参考になれば幸いです。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
有料のサーバーを借りなくても好きにサイトが構築できるのは良いですね。便利に静的ページが作れる「Jekyll」と組み合わせれば、さらに自由なサイトが作れますね!

 - Git

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

Git for Windows導入方法&初期設定まとめ

こんにちは、okutani(@okutani_t)です。みなさんはGitでソース …

簡易デプロイツールを「Git+シェルスクリプト」で実装してみた

こんにちは、okutani(@okutani_t)です。前回、こんな記事を書きま …

『GitHub+dotfiles』は環境構築を一瞬で終わらせるすごいやつ

こんにちは、okutani(@okutani_t)です。『GitHub+dotf …

git pushで本番環境に“自動デプロイ”できる環境を作ってみよう!

こんにちは、okutani(@okutani_t)です。Gitを使えばかんたんに …

Laravelのプロジェクトをgit cloneしたときの手順

こんにちは、okutani(@okutani_t)です。超かんたんなTipsなの …

GitHubの登録手順。SSH設定&リポジトリをclone, pushまで解説

こんにちは、okutani(@okutani_t)です。最近はコーディング時にG …

Gitのサブモジュール機能を使ってプロジェクトを管理してみよう

こんにちは、okutani(@okutani_t)です。Gitのサブモジュール( …

エックスサーバーにGitを導入する手順

こんにちは、okutani(@okutani_t)です。本記事ではエックスサーバ …

WordPressサイトをGitで管理。Macローカル開発環境編

こんにちは、okutani(@okutani_t)です。みなさんはちゃんと「Wo …

CentOS7に最新のGitを導入する方法

こんにちは、okutani(@okutani_t)です。CentOS7でGitを …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。