【Hugo】 続・静的サイトジェネレーター Hugo導入

SITE

 ヒューゴなのかユーゴーなのか、たぶんヒューゴーなんだろうけどHugo(gohugo.io/)を使ってみることにした。
 Go言語ベースの静的サイトジェネレーター。いじったことのない言語なのでちょっと躊躇したが、PHPを使えなくてもWordPressを使えるのと似て、あまり気にしなくてもよさそう。

スポンサーリンク

Hugoインストール

 公式HPの下のほうにインストールの説明がある。

 Hugo Releases(github.com/gohugoio/hugo/releases)からダウンロードした場合、解凍してできたhugoフォルダ(フォルダ名は任意)をホームの下など使いやすいところへ置く。

 例えばWindowsならば、
 C:\Users\ユーザー名\hugo

 インストールと言ってもhugoフォルダの中身は、
 hugo.exe、LICENSE、README.md。

 コマンドプロンプト(ターミナルエミュレーター)から

cd hugo

 でhugoフォルダに移って

hugo new site fushizen

 で、Congratulations!のメッセージが表示され、
 hugoフォルダの下にfushizenフォルダ(フォルダ名は任意)が作られる。

 作業の大まかな流れは、

  •  記事を(マークダウン記法 markdownで)書く
  •  ビルド build ・・・ マークダウン ⇒ HTML
  •  サーバーへアップロード
スポンサーリンク

Hugoを使ってみる 

 hugo new siteで作られたfushizenフォルダの中身は、 

 fushizen
 |
 ├─ archetypes
 ├─ content
 ├─ data
 ├─ layouts
 ├─ static
 ├─ themes
 └─ config.toml ・・・ 設定ファイル

となっている。
 うちcontentフォルダの中に記事を書いていく。

 コマンドプロンプトから

cd hugo/fushizen

 でfushizenフォルダに移って

hugo new kiji1.md

 でfushizen - contentフォルダの下に
 kiji1.mdというファイルが作られる。

hugo new fukumaden/kiji2.md

 であれば、fushizen - content - fukumadenフォルダの下に
 kiji2.mdというファイルが作られる。

 ファイルのコピー&ペーストも可。

 .mdファイルにマークダウン記法で書いていく。

hugo server -D

 でサーバー起動。

 ※ -Dオプション無しだとドラフト(下書き)の記事は無視される。
   ドラフトの記事とはフロントマター(ヘッダー)にdraft: trueがある.mdファイル。デフォルトでtrue。

 メッセージの下にあるURL(http://localhost:1313/)で、ブラウザ上の実際の表示を確認できる。
  ※ Web Server is available at http://localhost:1313/

 「Ctrl+C」でサーバー・ストップ。

 記事を書いて一区切りついたら

hugo -D

 でビルド。

 publicフォルダが作られるので、(contentフォルダではなく)こちらをサーバーへアップロードする。

Hugoのテーマ

 一から一つ一つ作っていくこともできるが、テーマがいろいろある。
 Hugo Themes(themes.gohugo.io/
から選べる。

 上記HP各ページのInstallationにあるコマンドで、themesフォルダにテーマが格納される。

 例えばAnankeというテーマであれば、

git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

 加えて
 config.tomlファイルに
 theme = “ananke” 
の一行を追加。

 個人的にはブログ形式であれば、WordPressのまま。やっとこさ使い慣れてきたことだし、今のところ特に大きな問題も起こっていない。
 Hugoは固定ページ用に使うので、マニュアルのようなテーマを探した。

 Learnというテーマをインストールしてみた。

cd themes/
git clone https://github.com/matcornic/hugo-theme-learn.git

 +
 config.tomlファイルに
 theme = “hugo-theme-learn”
を追加。

 他にもいくつか試したが、うまくインストールされないテーマもあった。

 あとはconfig.tomlファイルなど諸々設定、カスタマイズしていけば、ほぼ出来上がり。

 マークダウンと設定諸々で少しつまずいたが、そこそこ使いこなせそう。

 www.mitsumatado.com/memoma/

を作成した。

スポンサーリンク
ふシゼン
タイトルとURLをコピーしました