hugo を使って爆速でブログ・サイトを作る
November 05, 2018

DEVELOPMENT

web
hugo
js

新たに記事投稿型の 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
うかい@代表取締役兼エンジニア株式会社UKAI
Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

🙏よかったらシェアお願いします🙏
WRITTEN BY
うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI

Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

CONACT
入力して下さい
Slack からもどうぞ

※お気軽にどうぞ!(6月20日まで有効!お早めに)

COPYRIGHT © 2020 UKAI CO., LTD. ALL RIGHTS RESERVED.