v-fukuoka #2

## 静的サイトジェネレーターで始める ## アウトプット駆動開発 Vue Night in Fukuoka #2 清家史郎(@seike460)

###### Who? Fusic Co., Ltd.  清家史郎  @seike460    

### tech - Program Language - PHP - Go - Elixir - infrastructure - Server - AWS - infrastructure as code - Network - Other - Serverless - Vue.js - React

### OSS products - s3ry (s3 prompt cli) - https://github.com/seike460/s3ry - utakata (Serverless Slack Notificatier) - https://github.com/seike460/utakata ### Organizer - Serverless Meetup Fukuoka

#### Agenda - 趣旨 <!-- .element: class="fragment" --> - ブログ <!-- .element: class="fragment" --> - 静的サイトジェネレーター <!-- .element: class="fragment" --> - Gridsome + Netlify <!-- .element: class="fragment" --> - アウトプット駆動開発? <!-- .element: class="fragment" --> - 纏め <!-- .element: class="fragment" -->

## 趣旨 - インプットした知識を正しく吸収できてるか？ - アウトプット -> 言語化して知識を定着させる <!-- .element: class="fragment" --> - アウトプット先の候補 <!-- .element: class="fragment" --> - 社内のメンバーと話す <!-- .element: class="fragment" --> - 登壇 <!-- .element: class="fragment" --> - 文書化 <!-- .element: class="fragment" --> - ブログ <!-- .element: class="fragment" -->

## ブログ - はてなブログ、note <!-- .element: class="fragment" --> - WordPress <!-- .element: class="fragment" --> - 静的HTML公開 <!-- .element: class="fragment" --> - AWS S3 + Cloud Front <!-- .element: class="fragment" --> - Github Page <!-- .element: class="fragment" --> - Netlify <!-- .element: class="fragment" --> ### Netlify <!-- .element: class="fragment" --> [Github Pages VS. Netlify](https://www.netlify.com/github-pages-vs-netlify/) <!-- .element: class="fragment" -->

## 静的サイトジェネレーター - [Gatsby](https://www.gatsbyjs.org/) <!-- .element: class="fragment" --> - React製 <!-- .element: class="fragment" --> - [Gridsome](https://gridsome.org/) <!-- .element: class="fragment" --> - Vue製 <!-- .element: class="fragment" --> - [Saber](https://saberjs.org/) <!-- .element: class="fragment" --> - Vue製 ※ not production ready yet<!-- .element: class="fragment" --> ### Gridsome <!-- .element: class="fragment" -->

## Gridsome - Vue - GraphQL ### 開発 ``` $ yarn global add @gridsome/cli $ gridsome create portfolio.seike460.com $ cd portfolio.seike460.com $ gridsome develop ``` `http://localhost:8080/` で開発

## 記事を書く 様々なinputに対応 - contentful - wordpress - markdown

### 静的HTML生成 ``` $ gridsome build ``` `dist`にHTMLが生成される -> Netlifyに配置 実際には配置するわけではなくてGithubにcommitするだけ

#### Netlify Github 認証して 

対象Repository選択して 

簡単なDeploy設定を行うと 

Deployが始まって 

出来ちゃう...!! https://seike460.netlify.com/ - もちろん独自ドメインも設定可能 ※僕は実際は諸々の事情上AWS S3 + Cloud Frontで運用中 主にDNS絡み 

#### アウトプット駆動開発? - サイトの構成要素等は構築する必要がある(サイト自体と検索、他の機能も) - Vue + GraphQL学習チャンス!!! - pluginがまだ少ないので、作成して補う事が出来る - plugin設計学習チャンス!!! - そもそも Gridsome 本体の機能が足りていない - OSS コントリビュートチャンス!!!

## 纏め - インプットした情報の整理にはアウトプットが最適 - ブログを作ってみるのはどうでしょう！ - 環境作るのが大変… - 皆さんが得意なVueなら Gridsome + Netlifyで簡単作成 - 少し作らないといけない - そもそもインプット + 手を動かすチャンス 静的サイトジェネレーターでアウトプット駆動開発して、 Vueの学習Loopを回すのはどうでしょう？ 参考になるかもしれないブログ [GridsomeをCodePipeLine + CodeBuild でDeployするServerlessなBlog](https://blog.seike460.com/2018/12/20/gridsome-deploy-serverless/)

Thank you! Fusicは技術が大好きなエンジニアを募集しています  https://fusic.github.io