hugo を使って静的サイトを作ってみた話 2018/6/2 第１８回伊勢IT交流会でのLT資料 https://iseit.connpass.com/event/88143/

1. hugoで静的サイト
作ってみた
2018/6/2
第１8回伊勢IT交流会
森ソフト 森純一

2. 動機
• 自分のサイトに技術メモとしてブログを載せていた
• でも、はてなブログに移ったので更新頻度が激減
• 気になるのが、サーバー代
→静的サイトホスティングが流行っているっぽいの
で試してみたい

3. ツール
• 調べるといろいろある
• で、比較サイトあるのはありがたいが、比較サイト
や比較記事も山ほどあって、結局よくわからん
• ビルドが早いらしいということで、hugoをえらんだ

4. どこでホスティングする？
• S3?
• Google Drive?
• GitHub Page?
• 選択肢はいろいろとある
→ Gitリポジトリにコミットすると自動でデプロイしてく
れるのに惹かれて、Netlify
（しかも無料プランの範囲でいろいろできる）

5. Gitリポジトリは？
• リポジトリは公開したくない
→Bitbucket一択

6. 構成
• 静的サイトジェネレータ：hugo
• Gitリポジトリ：Bitbucket
• ホスティング：Netlify
→ドメイン関係は適宜設定するものとします

7. まずはhugoを使ってみる

8. テーマをダウンロード

9. ローカルで試す

10. 記事を追加

11. Gitリポジトリに保存
• Bitbucketの場合、プライベートリポジトリでもOK
注意点
• themeディレクトリ内のテーマは、submoduleとして
設定しておくこと

12. Netlifyでホスティング
• ログイン後、gitリポジトリの場所を指定するだけで
よい
• ビルドコマンドや使用するhugoのバージョン指定も
可能
• 公開出来たら、必要に応じて独自ドメインを割り当
てる

13. まとめ
• サイトを作って公開する作業そのものは全然手間
がかからない
• 毎度おなじみのように、デザインできない人間に
とっては、テーマ（サイトのデザイン）決めるのと、
若干のカスタマイズが一番手間がかかる
• まあ、ここはツールで何をつかっても同じか
• ひな型さえできれば、無料でWebサイトをホスティ
ングできるので、更新が少ないものに向いてるか
も

14. まとめ（その２）
• サイト内検索、問い合わせフォームなど、一部の
機能は外部サービスを使うことで、静的サイトでも
実現できる
• Webサイトの目的次第で、向き不向きが結構あり
そう

15. • 詳しくはブログにまとめてあるのでそっちをみてく
ださい
• Webサイトを静的サイトにしました : hugo による静
的サイトの作成 (1/3)
• http://blog.mori-
soft.com/entry/2018/01/11/213431