ヒューゴなのかユーゴーなのか、たぶんヒューゴーなんだろうけど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ファイルなど諸々設定、カスタマイズしていけば、ほぼ出来上がり。
マークダウンと設定諸々で少しつまずいたが、そこそこ使いこなせそう。
を作成した。