エンジニアだけど、ポートフォリオっぽいもの作りました
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 にパスを一括で定義したりしてます。
詳細は、本人の記事を確認してもらえばと思います。
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
しています
イメージ図
全体としては、こんな感じ。
感想
GitHub Pagesは便利なんだけど、ソースと生成物を一緒のリポジトリに入れちゃうのは嫌だし、手動のビルドでビルド漏れも嫌ですし。
その点、リポジトリにあるコードをCircleCIでビルド・デプロイするのは、必ず・クリーンな状態で公開できるため、メリットは大きいと思います。
仕組み部分は、それなりにいい感じに出来たと思うので、酷評されてるデザイン面と、BEMもどきって言われたCSSの命名をがんばってみようかとか思ってます。