LT4_HugoでWebサイト(ブログ)作り/MakeWebSiteWithHugo

CookHack #1で設けられたLT会で発表した資料です。
Hugoを利用してWebサイト、と言うよりかはブログを作ってみようというお話です。
参考サイト：
http://gohugo.io
http://staff.feedtailor.jp/2016/07/06/hugo_12/
https://github.com/jaden/twentyfourteen
http://www.rssboard.org/rss-language-codes

Transcript

1. Hugoで Webサイト(ブログ)作り 発表元: CookHack #1 LT会 2017/06/21 改修
2. 自己紹介 1.
3. 自己紹介 https://www.aokashi.net/aboutme/
4. Hugoについて 2.
5. Hugoについて • Webサイトを簡単に作れるソフトウェア、いわゆる静的サイトジェネ レータ。 • GO言語製である。GO is God • HTMLページの生成が他と比べて速い。 • ブログの作成に特化している。 ◦ 他の静的サイトジェネレータもだいたいそう。 なお、構築したWebサイトはGitHub Pagesで簡単に設営、更新ができ るが、今回のスライドはGitHub Pagesの利用は割愛する。
6. 静的サイトジェネレータとは 名前そのまま。静的サイトを生成するソフトウェアである。 • 動的サイト プログラミング言語とかを頼りに、Webサイトの各ページにありがちな共通 部分をまとめたり、管理を楽にしてくれる。 プログラムがサーバーに置いているため、悪用の可能性がある。 • 静的サイト HTMLファイルそのままをたくさん置いたもの。アクセスが速い。 大規模になるほど管理が複雑になる。 公開する場合はホスティングサービスをあまり気にしなくても良い。
7. *.cgi *.php 動的サイトは、サーバーにプログラムファイルが置かれていて、 WebサイトにアクセスするとHTML形式を生成するためにサーバーが動く Webサーバー (のつもり) HTML HTML
8. Webサーバー (のつもり) *.html 静的サイトは、サーバーにHTML形式のファイルがそのまま置いている、 Webサイトへのアクセスは手持ちのパソコンへのダウンロードで済む (その他、色々な処理はありますが今回は省いておこう...)
9. 動的サイトでないとできないケースがある 静的サイトでも動的サイトでも完成したサイト自体に大差はないと言って 良い。しかし、以下の場合は動的サイトでないと実現できないかもしれな い。 • サイト内を検索できる機能が備わっているWebサイト • 誰でも編集できるWiki(閲覧しているページがHTML形式であろうと ページの更新にはやはりサーバーに処理してもらう必要がある)
10. Hugoを使う 3.
11. 大まかな流れ 1. ターミナルかWebブラウザを立ち上げる 2. Hugoを手に入れる 3. サイトを作る 4. ページを作る 5. ✌('ω'✌)三✌('ω')✌三(✌'ω')✌ コマンドラインの文字列は斜体で表す。
12. ダウンロード方法 以下の方法で入手する。 • Ubuntu: aptで入手 • Mac: homebrew入手 • Windows: GitHubからバイナリを入手 • その他: go get でソースを持ってきてコンパイル 詳しくは https://github.com/spf13/hugo/ を参照のこと。
13. サイトを作る 1. サイトの作成は hugo new site (サイト名) 2. テーマは http://themes.gohugo.io/ で気に入ったものを選んで、GitHubリ ポジトリから git clone で持っていく 3. config.toml ファイルを弄る 4. content ディレクトリからmarkdown ファイルを作りまくる 5. hugo コマンド一発で出来上がり http://gohugo.io/overview/introduction/ で大体のことが書かれているので参 考にしてほしい(投げやり)。
14. クローンするには 欲しいテーマのリポジトリからClone or download を選び、Copy to clipboardでURLを覚える。 themesディレクトリ上で git clone (ここでペースト) でテーマを持っていける。 お使いのPCは正常にURLが表示されます
15. config.toml のサンプル baseurl = “サイトのURL” languageCode = “ja” title = “サイトのタイトル theme = “テーマ名(ディレクトリの名前から指定)” • サイトの設定を行うconfig.tomlはテーマの指定やサイトの生成時の挙動を 調整したりできる。 • 設定については http://gohugo.io/overview/configuration/ が参考になる。
16. その他 4.
17. 補足 • 私のWebサイト「Aokashi Home」はHugoで構築されている。ブログ構築を 前提としているが、なるべくサイトとして使えるように様々な調整を加えてい る。 • Aokashi Homeのテーマとして利用している「Aokashi Base」が公開されて いるので確認して欲しい。 →https://github.com/aokashi/aokashi_base
18. その他 Hugoの他に、Rubyで動作するMiddleman https://middlemanapp.com/jp/ を 実際に動かしてみた。 • 設定ファイルのconfig.rbは、Rubyのソースファイルということで、プログラミ ングライクに設定ができる。 • SassとかのCSSプリプロセッサに対応できる。 • 公式サイト、ドキュメントが日本語に対応している(！)。 • サイトのプレビュー(サーバー)を開く時に__middleman/ と加えるとサイト の構成を見ることができる。 →どんなファイルが生成されるのか見ることができる！