DEVELOPMENT
新たに記事投稿型の webサイトを構築しようと思い、hexoでも良かったんですが、せっかくなら使ったことのないFrameworkを使いたいと思い、今回は、多言語対応にも強い、GO言語で書かれたhugoを使ってみることにしました。
その際の構築手順をメモっておきます。
hugoインスコ
homebrew で入れる。
brew install hugo
サイト作成
作業dirで次のコマンドで作成します
hugo new site ~/○○○○○
結構時間かかる
テーマの追加
cd ○○○○○
git init;\
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\
設定ファイルにテーマを記述
echo 'theme = "ananke"' >> config.toml
記事作成
下記コマンドで記事を作成
hugo new posts/my-first-post.md
posts って部分は、contents以下のdir名になるので、なんでもOKです
作成された記事のファイルは下記
content/posts/my-first-post.md
このファイルをマークダウン形式で記述します。
ローカルで確認
hugo server -D
-D オプションは、ドラフト(下書き)記事もビルドするという意味
ドラフト機能
これは、Defaultで、下記ファイルの生成されるもとのファイルにて
archetypes/default.md
draft: true
この記述により、この記事はドラフトです。という内容になります。 その場合、ビルドした際、htmlファイルは生成されません。
ドラフト記事も含めてビルドする際(あんまり考えれらない)は、-D(—buildDrafts)コマンドを使うとhtmlファイルが生成されますが、 通常、記事中の、draft: falseに変更するのがいいと思います。
hugo undraft ○○○○
のundraftコマンドはなくなりました。
またドラフト中の記事の一覧を確認するには、
hugo list drafts
で確認できます。
http://localhost:1313/
で確認できます。
多言語対応
hugo は多言語対応に大変優れていますね。 とりあえず、日本語と英語を作成してみます。下記ファイルで設定を行います。
~/config.toml
DefaultContentLanguage = "en"
DefaultContentLanguageInSubdir = true
.
.
.
[Languages]
[Languages.en]
weight = 1
title = "○○○"
[Languages.ja]
weight = 2
title = "○○○"
- DefaultContentLanguage で デフォルトの言語を設定
- DefaultContentLanguageInSubdir を trueにすると、リクエストURLに言語ごとにpathを切ってくれます。
英語版
example.com/en/...
日本語版
example.com/ja/...
という感じです。
- [Languages]では、それぞれのタイトルや言語ごとの必要事項を設定しておきます。使用するテーマなどに依存します。
- weightは優先する方を低い数値にしておきます。いらないかも。
それぞれの記事を作成
ここでは、英語優先なので、
hugo new posts/sample.md
と、すると英語ページ
hugo new posts/sample.ja.md
で日本語ページとして読んでくれます。
/ja/へのアクセスで、xxxx.ja.md の記事が読まれ、/en/ もしくは / で、xxxx.md or xxxx.en.md の記事が読み込まれ勝手に切り替えてくれます。 あとはそれぞれの言語で記事を書くだけです。
公開
generateします
$ hugo
これだけです。そうするとpublic以下に生成されます。 これらをs3やgithubに上げればOKです。
hugoまとめ
非常にささっと簡単にwebサイトができました。またthemesもかなりたくさんありますが、それをoverride的な形でカスタマイズすることも可能です。 簡単な上に非常に柔軟性があり、hexoよりもいいかもしれません。
株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから