エンジニアだけど、ポートフォリオっぽいもの作りました

twitterなどのURLを、このHatena Blogにしてました。 そうすることで、自分の書いた記事や自分のアプリを紹介できてると思ってました。

ふとしたときにスマホで見てみると、サイドバーのアプリへのリンクが全く表示されてなかったのです。 これはまずい、ってことで、アプリの紹介をメインに、保持スキルも紹介できるようなページを作ってみました。

それがこちら↓
Ishikura Noboru portfolio

BEMもどきだったり、jade / stylusで作ったりと、フロントについてもいろいろ頑張りましたが、それよりも公開までのプロセスを一番頑張ったと思います。

というわけで、具体的な話。

コードリポジトリ

リポジトリは、 noboru-i/noboru-i.github.io · GitHub です。

ただ、masterブランチには成果物しか置いておらず、こちら noboru-i/noboru-i.github.io at src · GitHub にソースを置いています。

開発

gulp serve によって、インクリメンタルにビルド・ブラウザのリロードを行っています。
ほぼ、会社の同僚が書いていたのの劣化コピーですが。

/gulp/task に個別にタスクを記述したり、config.coffee にパスを一括で定義したりしてます。

詳細は、本人の記事を確認してもらえばと思います。

qiita.com

CircleCI

circle.yml に設定が書いてあります。

  • masterは生成結果なので、CircleCIの処理対象外にしています
  • nodeのバージョンは最新がいいだろうと思って、とりあえず0.12にしています
  • srcブランチに対して、script/deploy.sh を実行しています。

script/deploy.sh にデプロイの手順が書いてあります。

  • npm run build により、package.jsonに定義されている通り、gulpのdefaultタスクが実行されます
  • gitの設定として、メールアドレス等を設定しています
  • publicの中身をtarにまとめてArtifactとして保存しておきます
  • public内をgitのリポジトリとして初期化し、リモートをnoboru-i/noboru-i.github.ioに設定します
  • このブランチにcircle.ymlが存在しないと、デフォルトの動作が実行されてしまうので、circle.ymlをコピーしています
  • 強制的にgit add, git commit, git pushしています

イメージ図

全体としては、こんな感じ。

f:id:suzaku114:20150416235225p:plain

感想

GitHub Pagesは便利なんだけど、ソースと生成物を一緒のリポジトリに入れちゃうのは嫌だし、手動のビルドでビルド漏れも嫌ですし。

その点、リポジトリにあるコードをCircleCIでビルド・デプロイするのは、必ず・クリーンな状態で公開できるため、メリットは大きいと思います。

仕組み部分は、それなりにいい感じに出来たと思うので、酷評されてるデザイン面と、BEMもどきって言われたCSSの命名をがんばってみようかとか思ってます。