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

Slide 1

Slide 1 text

Hugoで Webサイト(ブログ)作り発表元: CookHack #1 LT会 2017/06/21 改修

Slide 2

Slide 2 text

自己紹介 1.

Slide 3

Slide 3 text

自己紹介 https://www.aokashi.net/aboutme/

Slide 4

Slide 4 text

Hugoについて 2.

Slide 5

Slide 5 text

Hugoについて ● Webサイトを簡単に作れるソフトウェア、いわゆる静的サイトジェネレータ。 ● GO言語製である。GO is God ● HTMLページの生成が他と比べて速い。 ● ブログの作成に特化している。 ○ 他の静的サイトジェネレータもだいたいそう。なお、構築したWebサイトはGitHub Pagesで簡単に設営、更新ができるが、今回のスライドはGitHub Pagesの利用は割愛する。

Slide 6

Slide 6 text

静的サイトジェネレータとは名前そのまま。静的サイトを生成するソフトウェアである。 ● 動的サイトプログラミング言語とかを頼りに、Webサイトの各ページにありがちな共通部分をまとめたり、管理を楽にしてくれる。プログラムがサーバーに置いているため、悪用の可能性がある。 ● 静的サイト HTMLファイルそのままをたくさん置いたもの。アクセスが速い。大規模になるほど管理が複雑になる。公開する場合はホスティングサービスをあまり気にしなくても良い。

Slide 7

Slide 7 text

*.cgi *.php 動的サイトは、サーバーにプログラムファイルが置かれていて、 WebサイトにアクセスするとHTML形式を生成するためにサーバーが動く Webサーバー (のつもり) HTML HTML

Slide 8

Slide 8 text

Webサーバー (のつもり) *.html 静的サイトは、サーバーにHTML形式のファイルがそのまま置いている、 Webサイトへのアクセスは手持ちのパソコンへのダウンロードで済む (その他、色々な処理はありますが今回は省いておこう...)

Slide 9

Slide 9 text

動的サイトでないとできないケースがある静的サイトでも動的サイトでも完成したサイト自体に大差はないと言って良い。しかし、以下の場合は動的サイトでないと実現できないかもしれない。 ● サイト内を検索できる機能が備わっているWebサイト ● 誰でも編集できるWiki(閲覧しているページがHTML形式であろうとページの更新にはやはりサーバーに処理してもらう必要がある)

Slide 10

Slide 10 text

Hugoを使う 3.

Slide 11

Slide 11 text

大まかな流れ 1. ターミナルかWebブラウザを立ち上げる 2. Hugoを手に入れる 3. サイトを作る 4. ページを作る 5. ✌('ω'✌)三✌('ω')✌三(✌'ω')✌ コマンドラインの文字列は斜体で表す。

Slide 12

Slide 12 text

ダウンロード方法以下の方法で入手する。 ● Ubuntu: aptで入手 ● Mac: homebrew入手 ● Windows: GitHubからバイナリを入手 ● その他: go get でソースを持ってきてコンパイル詳しくは https://github.com/spf13/hugo/ を参照のこと。

Slide 13

Slide 13 text

サイトを作る 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/ で大体のことが書かれているので参考にしてほしい(投げやり)。

Slide 14

Slide 14 text

クローンするには欲しいテーマのリポジトリからClone or download を選び、Copy to clipboardでURLを覚える。 themesディレクトリ上で git clone (ここでペースト) でテーマを持っていける。お使いのPCは正常にURLが表示されます

Slide 15

Slide 15 text

config.toml のサンプル baseurl = “サイトのURL” languageCode = “ja” title = “サイトのタイトル theme = “テーマ名(ディレクトリの名前から指定)” ● サイトの設定を行うconfig.tomlはテーマの指定やサイトの生成時の挙動を調整したりできる。 ● 設定については http://gohugo.io/overview/configuration/ が参考になる。

Slide 16

Slide 16 text

その他 4.

Slide 17

Slide 17 text

補足 ● 私のWebサイト「Aokashi Home」はHugoで構築されている。ブログ構築を前提としているが、なるべくサイトとして使えるように様々な調整を加えている。 ● Aokashi Homeのテーマとして利用している「Aokashi Base」が公開されているので確認して欲しい。 →https://github.com/aokashi/aokashi_base

Slide 18

Slide 18 text

その他 Hugoの他に、Rubyで動作するMiddleman https://middlemanapp.com/jp/ を実際に動かしてみた。 ● 設定ファイルのconfig.rbは、Rubyのソースファイルということで、プログラミングライクに設定ができる。 ● SassとかのCSSプリプロセッサに対応できる。 ● 公式サイト、ドキュメントが日本語に対応している(！)。 ● サイトのプレビュー(サーバー)を開く時に__middleman/ と加えるとサイトの構成を見ることができる。 →どんなファイルが生成されるのか見ることができる！