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

netlify

このブログは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を使って自動化することにしました。

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

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

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

作ったStorybookは下記。

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

運用のフロー

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

blog-update-flow

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

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

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

WEB開発の依頼について

フリーのフロントエンドエンジニアとして企業様のWEB開発をさせていただいています。

Vue.jsやReact.jsを使ったアプリケーションの作成などのご要望がありましたら、お気軽にお問い合わせください。

実績や単価については「WEB開発について」をご覧ください。

運営について

MK Devはフリーランスのエンジニア村上浩司が運営するメディアです。フロントエンドを中心としたWEB開発、PCやガジェットに関連したことを発信しています。

最新の情報を受取る

(c) MK Dev. All Rights Reserved.