Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Aokashi
October 01, 2016

 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

Aokashi

October 01, 2016
Tweet

More Decks by Aokashi

Other Decks in Technology

Transcript

  1. Hugoについて • Webサイトを簡単に作れるソフトウェア、いわゆる静的サイトジェネ レータ。 • GO言語製である。GO is God • HTMLページの生成が他と比べて速い。

    • ブログの作成に特化している。 ◦ 他の静的サイトジェネレータもだいたいそう。 なお、構築したWebサイトはGitHub Pagesで簡単に設営、更新ができ るが、今回のスライドはGitHub Pagesの利用は割愛する。
  2. 大まかな流れ 1. ターミナルかWebブラウザを立ち上げる 2. Hugoを手に入れる 3. サイトを作る 4. ページを作る 5.

    ✌('ω'✌)三✌('ω')✌三(✌'ω')✌ コマンドラインの文字列は斜体で表す。
  3. ダウンロード方法 以下の方法で入手する。 • Ubuntu: aptで入手 • Mac: homebrew入手 • Windows:

    GitHubからバイナリを入手 • その他: go get でソースを持ってきてコンパイル 詳しくは https://github.com/spf13/hugo/ を参照のこと。
  4. サイトを作る 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/ で大体のことが書かれているので参 考にしてほしい(投げやり)。
  5. config.toml のサンプル baseurl = “サイトのURL” languageCode = “ja” title =

    “サイトのタイトル theme = “テーマ名(ディレクトリの名前から指定)” • サイトの設定を行うconfig.tomlはテーマの指定やサイトの生成時の挙動を 調整したりできる。 • 設定については http://gohugo.io/overview/configuration/ が参考になる。
  6. その他 Hugoの他に、Rubyで動作するMiddleman https://middlemanapp.com/jp/ を 実際に動かしてみた。 • 設定ファイルのconfig.rbは、Rubyのソースファイルということで、プログラミ ングライクに設定ができる。 • SassとかのCSSプリプロセッサに対応できる。

    • 公式サイト、ドキュメントが日本語に対応している(!)。 • サイトのプレビュー(サーバー)を開く時に__middleman/ と加えるとサイト の構成を見ることができる。 →どんなファイルが生成されるのか見ることができる!