Hugo 導入編
Hugoを使ってサイトを立ち上げるにあたって、公式サイトを参考にインストール、試しに任意のサイト（HelloWorld）を構築してみます。
Hugoインストールから記事公開までのクイックスタート
本家本元の公式のチュートリアルです。 https://gohugo.io/getting-started/quick-start/
Hugo導入 ハンズオン
公式のクイックスタートを元に、helloworldという名前のHugoプロジェクト作成し、テーマを ananke で記事公開まで行います。
# インストール on MacOS Homebrewを入れておく必要あり
brew install hugo
# helloworldプロジェクト作成
hugo new site helloworld
cd helloworld
# Theme ananke の反映
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
echo 'theme = "first post !"' >> posts/my-first-post.md
# ドラフト状態も含めてローカルで起動
hugo -D server
デフォルトでは以下のポート1313でローカル起動します。
http://localhost:1313/
カスタマイズ入門
サイト名、言語設定、多言語化や利用するテーマの設定など、サイト全体の基本的な設定は config.toml で行います。
- config.toml
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'Hello World' # タイトル名変更
theme = "ananke"
ビルド
./public/ に生成された静的サイトは出力されます。とてもシンプル。
# ドラフト状態も含めてビルド
hugo -D
./public/ 以下をホスティング先のサーバーに置けば静的サイトの完成です。
テーマのカスタマイズ
テーマの表示内容や順序などに手を入れていくには、テンプレートに手を入れる必要があります。
クイックスタートで使用した ananke のテーマをベースにカスタマイズします。
レイアウトの仕組みとカスタマイズ手順
レイアウトの仕組みは、こちらのサイトがとてもわかりやすいので引用させていただきます。
最低限必要となるテンプレート Hugoは次の4つの基本テンプレートが存在する事でページを生成しています
- layouts/index.html（トップページ）
- layouts/_default/baseof.html（全ページで使われるBase Template）
- layouts/_default/list.html（セクションやTaxonomyごとの記事一覧ページ）
- layouts/_default/single.html（記事個別ページ）
カスタマイズはテーマのlayoutsをプロジェクトルートにコピーして、そっちを編集します。
プロジェクトルートにあるlayouts以下のテンプレートファイルが優先的に使われ、無い時はテーマの側のものが適応されます。
# anankeのlayoutsをルートにコピー
cp -r ./themes/ananke/layouts .
スタイルのカスタマイズ
フォントや文字サイズなどを変更したい場合はカスタムCSSで対応します。
config.tomlのパラメータにcustom_cssを加え./static以下に対象となるcssファイルを配置することで、テンプレートから読み込まれるようになります。
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'Hello World' # タイトル名変更
theme = "ananke"
[params]
custom_css = ["css/custom.css"]
static/css/custom.css
h3 {
font-size: 20px;
color: #FF0000;
}
こんな感じでスタイルを変更できます。
Hugoの構造を把握する上で
慣れていないとcssファイルやテンプレートファイル、変数などがどのように適応されているかなど、分かりづらい部分もあります。結局は慣れるまで、grepやファイル検索でだいぶ駆使しました。
また、テーマごとに独自のパラメータがあったりもするので、テーマの配布しているサイトのドキュメントは一読すると良いと思います。