Netlifyでブログを公開してStorybookをGithub Pagesで自動更新する

このブログはGatsbyを使ってNetlifyで公開しています。

コードはGithubに置いてContentfulで記事を管理する今流行?のスタイルにしました。

Netlifyでコードの変更と記事の更新をトリガーに自動公開

Netlifyでは2つのポイントをきっかけにビルドして公開するようにしています。

  • Githubへpush
  • Contentfulで記事を更新

コードを変更してGithubにpushするか、Contentfulで記事の更新をトリガーにNetlifyで自動でビルドされます。

Storybookを運用する

自分用に作ったコンポーネントをStorybookで整理しておきたいなあとローカルで作ってみました。

だけど起動が重くみるためだけにyarn storybookと叩くのもめんどくさくなってしまったので、公開してしまえとGithubPagesに載せてみました。

CircleCIでStorybookをビルドして自動で公開

Storybookを公開するにはローカルでビルドして、それをGithubPagesを表示するためにpushすることになります。

更新の度にビルドしてpushするのもめんどくさいのでCircleCIを使って自動化することにしました。

やっていることは至って単純ですがフローはこんな感じです。

  1. ローカルのコードをGithubにpush
  2. GithubのpushをトリガーにCircleCIでビルド
  3. ビルドしたコードをGithubのgh-pagesブランチにコミット

CircleCIで自動化することでわざわざStorybookをビルドして公開するという手順が省略することができました。

作ったStorybookは下記。

https://koojy.github.io/mk-dev/

運用のフロー

これまで書いた内容を図にしてみました。

blog-update-flow

Netlifyで作ったブログのStorybookの運用をどうしようかなーと思っていたんですよね。

今回のようなCircleCIでビルドしてGithub Pagesで公開するというフローは今のところけっこうしっくりきているのでこのブログ以外でも使えるフローかなという感触です。

すべて無料で色々と自動化できるなんていい時代だ。

この記事をシェアする
コウジ
Vue.jsが好きなフリーランスのフロントエンドエンジニアです。 フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。
Nuxt.jsを身につけたい!
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

開発依頼

VueやReactを用いたSPAアプリケーションの開発を中心にフロントエンド開発のプロジェクトをお手伝いさせていただいております。
開発事例の詳細などはAboutの開発事例をご覧ください。

Contactよりお気軽に必要事項をご入力の上ご連絡ください。