Yeoman で雛形を作り GitHub Pages で WEBサイトを公開する手順

こちらの ゆめみスタッフブログにも書きましたが、Qiitaにも投稿しておきます。

GitHub Pages を利用すると、ソースも同時に公開されてしまいますが、自前でサーバを用意しなくても静的なWEBサイトが無料でホスティングできます（今回は説明しませんが、独自のドメインを振ることも可能です）。

私は最近、JavaScriptアプリケーションのデモサイトとして利用しています。

今回は Yeoman のテンプレートからWEBサイトを作成し、GitHub Pages で公開するまでの手順について説明します。
※ GitHub Pages だけを利用する場合は、前半の Yeoman の手順は特に不要です。

今回の前提

• GitHub のアカウントを持っていること。
• 開発するクライアント端末の OS は Mac OS であること。
  • 予めコマンドライン版の Git がインストールされていること。
  • Yeomanの環境があること。
    • なければ下記の記事のように構築してください。
      • http://qiita.com/hkusu/items/7d748b55ba73cc8a3675
      • この際、node と npm が必要です。

手順

• もしインストールされていなければ、YeomanからWEBアプリケーションの雛型ジェネレータをインストールします。ちなみにYeomanにはほかにも色々なジェネレータが用意されています →http://yeoman.io

  # npm install -g generator-webapp
  

• 雛型ジェネレータを起動します。

  $ mkdir webapp-test
  $ cd webapp-test
  $ yo webapp
  

• Yeomanの画面が表示されるので、そのまま進めます。

  

• これで雛型の生成は完了です。ためしに動作確認してみます。

  $ grunt serve
  

• するとブラウザが起動しサンプルページが開きます。

  

• 本来はここから自分なりのコードを書いていくのですが、今回はこのまま公開してみます。GitHubへアクセスし、公開用のリポジトリを作成します。

  

• リポジトリが出来たら、ターミナルからソースをプッシュします。

  $ cd webapp-test
  $ cd app
  $ git init
  $ git add *
  $ git commit -m "first commit"
  $ git remote add origin [リポジトリのパス]
  $ git push -u origin master
  

• GitHub Pages 用のブランチを作成します。この際、ブランチ名は必ず「gh-pages」である必要があります。

  

• これで GitHub Pages での公開は完了です。次のURLで、先ほどのWEBサイトが公開されています。

  http://[アカウント名].github.io/[リポジトリ名]
  

  

おわりに

プロダクトのランディングページやデモサイト、またJavaScriptアプリケーションの検証などわりと使い道があると思いますので、是非、活用してみてください！