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

こんにちは。hkusuです。
今回は GitHub Pages についてです。

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

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

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

今回の前提

  • GitHub のアカウントを持っていること。
  • 開発するクライアント端末の OS は Mac OS であること。
    • 予めコマンドライン版の Git がインストールされていること。
    • Yeomanの環境があること。

手順

  • もしインストールされていなければ、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アプリケーションの検証などわりと使い道があると思いますので、是非、活用してみてください!


Comments are closed.