Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

201806 hugo で静的サイト作ってみた

94 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

201806 hugo で静的サイト作ってみた

  1. 1. hugoで静的サイト 作ってみた 2018/6/2 第18回伊勢IT交流会 森ソフト 森純一
  2. 2. 動機 • 自分のサイトに技術メモとしてブログを載せていた • でも、はてなブログに移ったので更新頻度が激減 • 気になるのが、サーバー代 →静的サイトホスティングが流行っているっぽいの で試してみたい
  3. 3. ツール • 調べるといろいろある • で、比較サイトあるのはありがたいが、比較サイト や比較記事も山ほどあって、結局よくわからん • ビルドが早いらしいということで、hugoをえらんだ
  4. 4. どこでホスティングする? • S3? • Google Drive? • GitHub Page? • 選択肢はいろいろとある → Gitリポジトリにコミットすると自動でデプロイしてく れるのに惹かれて、Netlify (しかも無料プランの範囲でいろいろできる)
  5. 5. Gitリポジトリは? • リポジトリは公開したくない →Bitbucket一択
  6. 6. 構成 • 静的サイトジェネレータ:hugo • Gitリポジトリ:Bitbucket • ホスティング:Netlify →ドメイン関係は適宜設定するものとします
  7. 7. まずはhugoを使ってみる
  8. 8. テーマをダウンロード
  9. 9. ローカルで試す
  10. 10. 記事を追加
  11. 11. Gitリポジトリに保存 • Bitbucketの場合、プライベートリポジトリでもOK 注意点 • themeディレクトリ内のテーマは、submoduleとして 設定しておくこと
  12. 12. Netlifyでホスティング • ログイン後、gitリポジトリの場所を指定するだけで よい • ビルドコマンドや使用するhugoのバージョン指定も 可能 • 公開出来たら、必要に応じて独自ドメインを割り当 てる
  13. 13. まとめ • サイトを作って公開する作業そのものは全然手間 がかからない • 毎度おなじみのように、デザインできない人間に とっては、テーマ(サイトのデザイン)決めるのと、 若干のカスタマイズが一番手間がかかる • まあ、ここはツールで何をつかっても同じか • ひな型さえできれば、無料でWebサイトをホスティ ングできるので、更新が少ないものに向いてるか も
  14. 14. まとめ(その2) • サイト内検索、問い合わせフォームなど、一部の 機能は外部サービスを使うことで、静的サイトでも 実現できる • Webサイトの目的次第で、向き不向きが結構あり そう
  15. 15. • 詳しくはブログにまとめてあるのでそっちをみてく ださい • Webサイトを静的サイトにしました : hugo による静 的サイトの作成 (1/3) • http://blog.mori- soft.com/entry/2018/01/11/213431

×