フロントエンドエンジニアのためのサーバーレス入門(Netlify でブログ構築編)

2017/07/29
Serverless 勉強会@京都 vol.1
Serverless Framework User Group

  • シマキョウスケ( @shima_x_o
  • デザイン制作会社勤務
  • HTML と CSS だけを書いて生活しています。

今日なんの話しすんの

Netlify を使ってブログ作って
サーバーレス入門したよーという話です。

今日なんの話しすんの

Netlify を使って「カンパイ本町」という共同ブログを運営していて、そこで使った事例の紹介になります。
内容は飯食いに行ったら記事にして思い出を残すのみ。

今日なんの話しすんの

https://knp-honmachi.net/

今日なんの話しすんの

web コミュニティで知り合った 3 人で運営しています。

今日なんの話しすんの

Netlify を使って多人数で運営するブログサイトを作ったよー
って話になります。

宣伝

なんかうまそうな飯画像がタイムラインに流れてきてほしい方はフォローお願いします。

https://twitter.com/kanpaihonmachi

https://www.instagram.com/honmachinomi/

使ったサービス・仕組みとか

それぞれの役割とメリット

Netlify

Netlify

  • サーバーホスティングに使用
  • 無料で使用できる
  • SSL の対応が楽(Let's Encrypt の自動更新)
  • HTTP/2 も対応
  • CDN で配信してくれてるらしい(無料の場合は海外からの配信?)

Netlify

Write frontend code. Push it. We handle the rest.

[適当に翻訳]
フロントエンドのコードを書いたらあなたは Push だけしといて。残りの部分は私たちが処理しますから。

Netlify

「うまい、やすい、はやい」の環境と言える

web 界隈の吉野家じゃね?

Netlify をとりあえず使うには

  • アカウント作って、
  • このページにアクセス → https://app.netlify.com/
  • HTML ファイルとか CSS ファイルとか画像一式を zip ファイルにしてドラッグ&ドロップするだけで、Netlify のサブドメインでページが公開されます。

Hugo

Hugo

静的サイトジェネレーター

  • Markdown で書ける(Markdown 大好き)
  • 管理画面(WordPress で言うダッシュボード的なもの)がない
  • 多人数運用は GitHub 使って解決
  • StaticGen のランキング上位のジェネレーターをほぼ全部試したのですが、 Hugo が一番使いやすかった

Hugo

どうして静的サイトジェネレーターを使うのか。

  • 管理画面(WordPress で言うダッシュボード的なもの)が必要ない
  • コンテンツに集中したい
  • アプデとかメンテナンスしたくない
  • 更新辞めてほっといてもセキュリティの心配したくない
  • CMS なのに環境の事を考えがちになるのは嫌だ

GitHub

GitHub

もろもろのバージョン管理・静的サイトジェネレーターを多人数で運用するため・デプロイ

  • みんな使ってるから
  • みんな使ってる = みんな使える

ご興味あれば是非↓
https://github.com/honmachi-nomi/knp-honmachi-netlify

自分達が何をしたいかを考えると
これらの構成がベストと行き着きました。

記事の公開手順

  1. GitHub にサイト用のリポジトリ作成
  2. Netlify に New site 作成
  3. ローカルに Hugo 環境構築
  4. ブランチを適宜変更
  5. Hugo コマンドで記事作成(.md ファイル作ってくれるだけ
  6. 書いたら Add して Commit して Push
  7. 公開用のブランチに PR だして Merge されたら Netlify がよしなにしてくれて公開される

簡単そうでしょ?

本日の勉強会レポートのブログサイトを
すぐに作成できますね😎

よくある質問

Q. 静的サイトってフォームとかどうすんの?

A. Google フォームでいいじゃん

A. Netlify がフォーム用意してくれた ← New

Netlify がフォーム用意してくれた

Form Handling | Netlify

Netlify と Hugo を気に入ってしまって個人運営のサイトを新たに立ち上げてフォーム作りました。
https://hiking-hiking.com/contact_us/
内容は Slack で受け取ることができます。

まとめ

  • サーバー代無料で表示速度がそこそこ早いサイトが作れた
  • Git が使えれば多人数での運用も問題ない
  • メンテらしいことはしていない

面倒なことから解放されよう

おわり