Hugo とNetlify で作る Hugo とNetlify で作る Hugo とNetlify で作る Hugo とNetlify で作る Hugo とNetlify で作る Hugo とNetlify で作る 静的サイト 静的サイト 静的サイト 静的サイト 静的サイト 静的サイト

今日話すこと 今日話すこと 今日話すこと 今日話すこと 今日話すこと 今日話すこと やりたいこと やりたいこと やりたいこと やりたいこと やりたいこと やりたいこと できたもの できたもの できたもの できたもの できたもの できたもの Hugo Hugo Hugo Hugo Hugo Hugo Netlify Netlify Netlify Netlify Netlify Netlify 実際の構造 実際の構造 実際の構造 実際の構造 実際の構造 実際の構造                               2 / 17

やりたいこと やりたいこと やりたいこと やりたいこと やりたいこと やりたいこと いわいるウェブサイトを作りたい いわいるウェブサイトを作りたい いわいるウェブサイトを作りたい いわいるウェブサイトを作りたい いわいるウェブサイトを作りたい いわいるウェブサイトを作りたい ストック的な情報を載せておく場所で頻繁に更新しない ストック的な情報を載せておく場所で頻繁に更新しない ストック的な情報を載せておく場所で頻繁に更新しない ストック的な情報を載せておく場所で頻繁に更新しない ストック的な情報を載せておく場所で頻繁に更新しない ストック的な情報を載せておく場所で頻繁に更新しない 運用が楽であってほしい 運用が楽であってほしい 運用が楽であってほしい 運用が楽であってほしい 運用が楽であってほしい 運用が楽であってほしい 記事の追加をするのは簡単であってほしい 記事の追加をするのは簡単であってほしい 記事の追加をするのは簡単であってほしい 記事の追加をするのは簡単であってほしい 記事の追加をするのは簡単であってほしい 記事の追加をするのは簡単であってほしい できればお金はかからないでほしい できればお金はかからないでほしい できればお金はかからないでほしい できればお金はかからないでほしい できればお金はかからないでほしい できればお金はかからないでほしい SSL/TLS 対応してほしい SSL/TLS 対応してほしい SSL/TLS 対応してほしい SSL/TLS 対応してほしい SSL/TLS 対応してほしい SSL/TLS 対応してほしい 独自ドメインに対応してほしい 独自ドメインに対応してほしい 独自ドメインに対応してほしい 独自ドメインに対応してほしい 独自ドメインに対応してほしい 独自ドメインに対応してほしい                                           3 / 17

できたもの できたもの できたもの できたもの できたもの できたもの 結果 Hugo + Netlify で実現 結果 Hugo + Netlify で実現 結果 Hugo + Netlify で実現 結果 Hugo + Netlify で実現 結果 Hugo + Netlify で実現 結果 Hugo + Netlify で実現 https://chi on-sequence.net https://chi on-sequence.net https://chi on-sequence.net https://chi on-sequence.net https://chi on-sequence.net https://chi on-sequence.net             4 / 17

Hugo Hugo Hugo Hugo Hugo Hugo https://gohugo.io/ https://gohugo.io/ https://gohugo.io/ https://gohugo.io/ https://gohugo.io/ https://gohugo.io/ 5 / 17

Hugo Hugo Hugo Hugo Hugo Hugo Go 言語を使った静的サイトジェネレーター Go 言語を使った静的サイトジェネレーター Go 言語を使った静的サイトジェネレーター Go 言語を使った静的サイトジェネレーター Go 言語を使った静的サイトジェネレーター Go 言語を使った静的サイトジェネレーター $ brew install hugo $ brew install hugo $ hugo new site quickstart $ hugo new site quickstart $ git submodule add https://github.com/budparr/gohugo-theme-ananke. $ git submodule add https://github.com/budparr/gohugo-theme-ananke. git git $ hugo new posts/my-first-post.md $ hugo new posts/my-first-post.md $ hugo server $ hugo server Go http://localhost:1313/ Go http://localhost:1313/       6 / 17

Hugo Hugo Hugo Hugo Hugo Hugo 7 / 17

Hugo Hugo Hugo Hugo Hugo Hugo 選べるたくさんのテーマ 選べるたくさんのテーマ 選べるたくさんのテーマ 選べるたくさんのテーマ 選べるたくさんのテーマ 選べるたくさんのテーマ 8 / 17

Hugo Hugo Hugo Hugo Hugo Hugo 想定されるユースケース 想定されるユースケース 想定されるユースケース 想定されるユースケース 想定されるユースケース 想定されるユースケース 画像ギャラリー 画像ギャラリー 画像ギャラリー 画像ギャラリー 画像ギャラリー 画像ギャラリー ブログ ブログ ブログ ブログ ブログ ブログ いわいるウェブサイト いわいるウェブサイト いわいるウェブサイト いわいるウェブサイト いわいるウェブサイト いわいるウェブサイト プロフィールページ プロフィールページ プロフィールページ プロフィールページ プロフィールページ プロフィールページ ポートフォリオページ ポートフォリオページ ポートフォリオページ ポートフォリオページ ポートフォリオページ ポートフォリオページ                                     9 / 17

Netlify Netlify Netlify Netlify Netlify Netlify https://www.netlify.com/ https://www.netlify.com/ https://www.netlify.com/ https://www.netlify.com/ https://www.netlify.com/ https://www.netlify.com/ 10 / 17

Netlify Netlify Netlify Netlify Netlify Netlify ホスティングサービス ホスティングサービス ホスティングサービス ホスティングサービス ホスティングサービス ホスティングサービス Github のコードをそのままホスティングしてくれる Github のコードをそのままホスティングしてくれる Github のコードをそのままホスティングしてくれる Github のコードをそのままホスティングしてくれる Github のコードをそのままホスティングしてくれる Github のコードをそのままホスティングしてくれる 他にもBitbucket 、GitLab のリポジトリでもOK 他にもBitbucket 、GitLab のリポジトリでもOK 他にもBitbucket 、GitLab のリポジトリでもOK 他にもBitbucket 、GitLab のリポジトリでもOK 他にもBitbucket 、GitLab のリポジトリでもOK 他にもBitbucket 、GitLab のリポジトリでもOK 提供したテンプレートから作成 提供したテンプレートから作成 提供したテンプレートから作成 提供したテンプレートから作成 提供したテンプレートから作成 提供したテンプレートから作成 Lets encrypt の証明書を自動取得して設定までやってくれる Lets encrypt の証明書を自動取得して設定までやってくれる Lets encrypt の証明書を自動取得して設定までやってくれる Lets encrypt の証明書を自動取得して設定までやってくれる Lets encrypt の証明書を自動取得して設定までやってくれる Lets encrypt の証明書を自動取得して設定までやってくれる 独自ドメイン設定可能 独自ドメイン設定可能 独自ドメイン設定可能 独自ドメイン設定可能 独自ドメイン設定可能 独自ドメイン設定可能 これらは基本機能で$free/m これらは基本機能で$free/m これらは基本機能で$free/m これらは基本機能で$free/m これらは基本機能で$free/m これらは基本機能で$free/m                                           11 / 17

Netlify Netlify Netlify Netlify Netlify Netlify github のmaster にpush されたら公開してくれる github のmaster にpush されたら公開してくれる github のmaster にpush されたら公開してくれる github のmaster にpush されたら公開してくれる github のmaster にpush されたら公開してくれる github のmaster にpush されたら公開してくれる 12 / 17

Netlify Netlify Netlify Netlify Netlify Netlify 独自ドメイン設定可能 独自ドメイン設定可能 独自ドメイン設定可能 独自ドメイン設定可能 独自ドメイン設定可能 独自ドメイン設定可能 13 / 17

実際の構造 実際の構造 実際の構造 実際の構造 実際の構造 実際の構造 (sandbox) adminnoMacBook-Pro-3:chiffon-sequence $ tree (sandbox) adminnoMacBook-Pro-3:chiffon-sequence $ tree . . ├── layouts ├── layouts ├── public ├── public ├── static ├── static ├── config.toml ├── config.toml ├── netlify.toml ├── netlify.toml └── themes └── themes └── minimal └── minimal 14 / 17

実際の構造 実際の構造 実際の構造 実際の構造 実際の構造 実際の構造 (sandbox) adminnoMacBook-Pro-3:chiffon-sequence $ tree (sandbox) adminnoMacBook-Pro-3:chiffon-sequence $ tree . . ├── content ├── content │ ├── about │ ├── about │ │ └── me.md │ │ └── me.md │ ├── shop │ ├── shop │ │ └── main.md │ │ └── main.md │ └── works │ └── works │ ├── comic_market92.md │ ├── comic_market92.md │ ├── reitaisai13.md │ ├── reitaisai13.md │ ├── reitaisai14.md │ ├── reitaisai14.md │ └── reitaisai15.md │ └── reitaisai15.md ~~~ ~~~ 15 / 17

実際の運用 実際の運用 実際の運用 実際の運用 実際の運用 実際の運用 # 通常時 # 通常時 $ hugo new works/next-post.md $ hugo new works/next-post.md $ echo "edit next-post.md" $ echo "edit next-post.md" $ git add . | git commit -m "next post" $ git add . | git commit -m "next post" $ git push origin master $ git push origin master $ hugo new about/next-post.md $ hugo new about/next-post.md $ hugo new shop/next-post.md $ hugo new shop/next-post.md 16 / 17

まとめ まとめ まとめ まとめ まとめ まとめ Hugo + Netlify で軽率にサイト構築！ Hugo + Netlify で軽率にサイト構築！ Hugo + Netlify で軽率にサイト構築！ Hugo + Netlify で軽率にサイト構築！ Hugo + Netlify で軽率にサイト構築！ Hugo + Netlify で軽率にサイト構築！ 17 / 17