Github PagesでWebページを公開してみようの巻

Gitってなんだっけって方にピッタリの記事がこちらです。

GIT を使う必要がない人でも分かるように説明してみた

Github PagesはGithubで静的サイトを公開するための無料サービスです。
AWSなど使われている方ですとA3に近いイメージというかあれですね。
Github Pagesを使うメリットとしては以下の3つ

  • 無料
  • Githubに送るだけで公開できる
  • プロジェクト単位でWEBページを作成できる

特にSSHで接続してとか、FTP立ち上げてとか、何か面倒な作業をしなくても公開できるのはとても楽。
自身のポートレートサイト作成などに使ってみてもよいかもしれません。

Github Pagesを使ってみよう

Github PagesでWebページを公開してみようの巻

まずはGithubにログインしていただきまして。

右上にある「+」マークをクリックすると

Github PagesでWebページを公開してみようの巻

このようなメニューが開きますので、
ここからNew repositoryをクリック。
そうするとrepositoryの作成画面が現れます。

Github PagesでWebページを公開してみようの巻

ownerと書かれているところががあなたのユーザーネームになります。
その隣のRepository nameに

 

ユーザーネーム.gihub.io

と入力してください。
あとは特に何も設定せずCreate repositoryという緑のボタンを押せば完成です。
あとは新しく作ったレポジトリに静的サイトのデータをpushすれば
https://ユーザーネーム.github.io/に無事公開されていることでしょう。

 

実はユーザーネームじゃなくてもいけると思ってて、
abcd.github.ioみたいな適当な名前で試してみたんですが、当然公開されてなくて。
Githubにメールしたらユーザーネームじゃないとダメだよって教えてもらえました。
本当ちゃんとマニュアルとかは読まないといけませんね。

プロジェクト単位で公開したい場合

さて、先ほどの場合ですと
https://ユーザーネーム.github.io/での公開となります。

プロジェクト単位で公開したい場合の方法ですが実はとても簡単。

まず好きな名前のレポジトリを立ち上げます。

仮に「AWESOME」というレポジトリを立ち上げた場合は

 

https://ユーザーネーム.github.io/AWEOME/

 

といったURLに静的サイトを公開させることが可能です。
方法ですがいたって簡単。

$ git checkout -b gh-pages

gh-pagesというブランチを作成して移動します。
gh-pagesのブランチにindex.htmlをpushすれば
https://ユーザーネーム.github.io/AWEOME/

にpushしたindex.htmlが公開されます。
またcssやjavascriptなども適切に配置すればしっかりと公開されます。

JekyllならPushするだけでビルドしてくれます。

Github PagesでWebページを公開してみようの巻

2017年注目の「静的サイトジェネレーター」を3つ紹介します。でも紹介しましたJekyll
大人気の静的サイトジェネレーターですが、Github Pagesに対応しておりPushするだけで自動的にビルドしてくれます。
静的サイトを効率的に作るためにも是非合わせて活用してみてはいかがでしょうか。

最速でjekyllで作ったサイトをgithub page(project page)からhttpsで配信しながら、ローカルではlivereloadを有効にして最強の環境をつくるでも紹介しましたが、https配信や、Livereloadといった機能も導入できるのもJekyll、Github Pagesの特徴です。
是非一度使ってみてくださいね。

Github Pagesでサイトを公開しちゃおう!

Github PagesでWebページを公開してみようの巻

PHPなどの動的サイトは公開することはできないのですが、
お客様へ見せたり、デザイナーや社内の人に簡単に確認してもらう時など、
pushだけすれば公開されるGithub Pagesはとても便利で楽ちんです。
どのような使い方をするかはあなた次第!とても簡単ですので是非試してみてくださいね。

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

WEB DIRECTOR

マンノカズミチ

バンドマンを経て、台湾で日本語教師をしてましたが、2016年より株式会社AWESOMEにてWEB開発とコンテンツ制作を担当しております。SEO対策と記事執筆が得意分野です。こっそり台湾と日本のハーフです。

他の投稿を見る →