技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

HTMLページをgithubに移したという話

日記 Tips

ちまちまと自分の欲しくなったコンポーネントだけ作ってた az_ui ライブラリなんだけども、なんだかんだと更新が面倒になってきてた。

で、とうとうキレたので、github pages に移動したというお話。

github pages

これは、すごく乱暴に言えば、 github 上で公式サイト配置できますよって話。

http://sunao-yoshii.github.io/az_ui/

URL 見れば分かるけど…。

どうすればこれが出来るかというと、gh-pages って名前のブランチを作ってHTMLやらコミットして push するだけです。
それ自体は知ってるかどうかだけの問題なので割愛。

coffee/less の自動コンパイル

coffee は公式にもファイル監視して勝手にコンパイルするオプションがあります。

が、今回はこれを使いません。

使ったのは yeoman です。
これも IT 勉強会に行けば数年前からちょくちょく話題に上がったやつですね。

The web's scaffolding tool for modern webapps | Yeoman

yeoman で gh-pages

この記事読む段階で、読んでる人のバージョンが違ってたらごめんなさい。

注意：yeoman は新規に作成するものには有効ですが、既にあるものに適用することは非常に難しいです。ご注意下さい。

結構はまりどころが多いので、ハマった順にメモしていきます。
まず、yeoman ですが、これは nodejs が必須との事で、環境は下記。
github 使うのに git 入ってないとかすっとぼけた人は知りません。

  • mac os 10.10.2
  • Homebrew インストール済み

を出発点としましょう。
まずは nodejs をインストール。

$ brew update
$ brew install nodejs

この時 npm も勝手に入ってくれました。で、この記事を書いている段階でのバージョンは下記

  • node -v で v0.12.0
  • npm -v で 2.5.1

で、早速 yeoman をインストールするのだけど、どうも公式 TOP とチュートリアルでのインストールの仕方が違う。
初心者殺しだろとか思うけど騒がない。とりあえずチュートリアルに従う。

npm install --global yo bower grunt-cli

で、インストールされたものが下記。各プロダクトが何なのかはご自分で…。

$ yo --version && bower --version && grunt --version
1.4.6
1.3.12
grunt-cli v0.1.13
grunt v0.4.5

更に追加プラグインを入れる。

npm install -g generator-bs-less-coffee-webfont

で、インストールされたのが

$ npm search generator-bs-less-coffee-webfont
NAME                             DESCRIPTION      AUTHOR    DATE       VERSION KEYWORDS                                                                                                
generator-bs-less-coffee-webfont Yeoman generator =websiddu 2015-01-27 0.0.4   yeoman-generator less yeoman web fonts ...(略)

ここまで来ると、yeomanが使えるようになるので、master ブランチのルートで下記を実行。

$ yo
? 'Allo Azalea! What would you like to do? (Use arrow keys)
  Run a generator
❯ Bs Less Coffee Webfont 
  Karma 
  Mocha 
  ──────────────
(Move up and down to reveal more choices)

Bs Less Coffee Webfont を選択し、respond.js 入れるか？の質問は no で進む。
その後聞かれる「Do you want to deploy your project to Github Pages? This requires an empty Github repository.」は、最後に github に push するかどうかのオプションのようで、ここは好みで選択すればいいと思う。

ちなみにこれを yes にしておくと、後述の deploy コマンドが使えてハッピー

これで自動設定されるのは下記。

  • Gruntfile.js
  • app
    • 404.html
    • favicon.ico
    • index.html
    • robots.txt
    • scripts
      • hello.coffee
      • main.js
    • styles
      • main.less
      • pages
        • index.less
      • utils
        • icons.less
  • bower.json
  • package.json
  • test
    • bower.json
    • index.html
    • spec
      • test.js

面倒なので、Javascript の UT は触れない…良い子はマネしちゃダメだぞ！
でここから使いたいのだが、結構はまりどころがある。

ハマりどころ

テストサーバが起動しない

grunt serve でテストサーバが起動し、ブラウザで index が表示されるはずなのだが、これが案外出ない。

$ grunt serve
grunt-cli: The grunt command line interface. (v0.1.13)

Fatal error: Unable to find local grunt.

If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started

「いやお前インストールしただろさっき！」とか思うけど通じない。
ローカルに入っていないと怒られるそうなので、入れる。

$ npm install grunt
npm WARN package.json hoge@0.0.0 No description
npm WARN package.json hoge@0.0.0 No repository field.
npm WARN package.json hoge@0.0.0 No README data
grunt@0.4.5 node_modules/grunt
├── which@1.0.9
(中略)
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.16)

で、再度起動しようとするがまたも動かない。

$ grunt serve
Loading "Gruntfile.js" tasks...ERROR
>> Error: Cannot find module 'load-grunt-tasks'
Warning: Task "serve" not found. Use --force to continue.

Aborted due to warnings.

これも実はハマりどころで、Gruntfile.js は存在してるし、タスクも実は書かれてる。
じゃぁ何故怒られるのかというと、どうも関連コンポーネントがないかららしい。

エラーメッセージが既に引っ掛けだよksg...

$ npm install
npm WARN package.json hoge@0.0.0 No description
npm WARN package.json hoge@0.0.0 No repository field.
npm WARN package.json hoge@0.0.0 No README data
npm WARN engine svg-pathdata@1.0.0: wanted: {"node":"0.10.*"} (current: {"node":"0.12.0","npm":"2.5.1"})
-
(長いので、省略)

と、必要なものが非常に沢山ある。三度目の正直っ！

$ grunt serve
Running "serve" task

Running "clean:server" (clean) task
>> 0 paths cleaned.

Running "coffee:dist" (coffee) task
>> 1 files created.

Running "less:dist" (less) task
>> FileError: '../bower_components/bootstrap/less/bootstrap.less' wasn't found. Tried - app/bower_components/bootstrap/less/bootstrap.less,app/bower_components/bootstrap/less/bootstrap.less,../bower_components/bootstrap/less/bootstrap.less in app/styles/main.less on line 1, column 1:
>> 1 @import "../bower_components/bootstrap/less/bootstrap.less";
>> 2 @icon-font-path: "../fonts/glyphicons/";
Warning: Error compiling app/styles/main.less Use --force to continue.

Aborted due to warnings.

ぎゃー！また落ちただと！？

エラー内容を見ると、「bootstrap の less が入ってないから今ある less がコンパイルできねーよ」という内容のようだ。
ライブラリの依存解決は bower でやってる。

$ bower install
bower jquery#>=1.9.1            cached git://github.com/jquery/jquery.git#2.1.3
bower jquery#>=1.9.1          validate 2.1.3 against git://github.com/jquery/jquery.git#>=1.9.1
bower modernizr#>=2.6.2         cached git://github.com/Modernizr/Modernizr.git#2.8.3
bower modernizr#>=2.6.2       validate 2.8.3 against git://github.com/Modernizr/Modernizr.git#>=2.6.2
bower bootstrap#>=3.0.0         cached git://github.com/twbs/bootstrap.git#3.3.2
bower bootstrap#>=3.0.0       validate 3.3.2 against git://github.com/twbs/bootstrap.git#>=3.0.0
bower modernizr#>=2.6.2        install modernizr#2.8.3
bower jquery#>=1.9.1           install jquery#2.1.3
bower bootstrap#>=3.0.0        install bootstrap#3.3.2

modernizr#2.8.3 app/bower_components/modernizr

jquery#2.1.3 app/bower_components/jquery

bootstrap#3.3.2 app/bower_components/bootstrap
└── jquery#2.1.3

さて、皆さんお待ちかね

$ grunt serve
Running "serve" task

Running "clean:server" (clean) task
>> 0 paths cleaned.

Running "coffee:dist" (coffee) task
>> 1 files created.

Running "less:dist" (less) task
File app/styles/main.css.map created.
File app/styles/main.css created

Running "copy:server" (copy) task
Copied 5 files

Running "connect:livereload" (connect) task
Started connect web server on http://localhost:9080

Running "watch" task
Waiting...

で、ブラウザ開けてハッピーハッピー。

app/ 以下がファイルの置き場所。置いてある内容は見れば分かると思う。
何が嬉しいかというと、ファイルを変更すると、自動で再コンパイルして、ブラウザリロードしてくれる点だ。
これで開発効率が上がる。

複数の JavaScript がある場合、HTML 中の build:js コメントの設定に従って、統合・圧縮されていそうな雰囲気。

よしデプロイだ

序盤のウィザードでデプロイ設定を済ませていると、残り１コマンドでデプロイすることができるようになる。

grunt deploy がそれだが、ちょっと引っかかったくだらない問題だけ下記に挙げる。

  • ファイルがコミットされてないと、deploy 中に失敗する
    • 「There are uncommitted changes in your working directory.」が出たらそれ
  • Public key のアクセスパーミッションがないとアウト
    • 「Warning: Permission denied (publickey).」が出たらそれ

ここまで来ると罠らしい罠ないですね。

good luck!