Hugoでwebサイト構築(5) そのままコピーする'static'フォルダ

written: kengo
tag:

1. 加工なしのリソースをpublicに移す

Hugoで生成されたサイトコードはpublicフォルダに入りますが、 Hugoのビルド工程を経ずに任意のフォルダ構成でそのままコピーしたいリソースがあります。 例えばサイト全体で共有するcssファイルやjsファイル、また画像ファイルなどです。

このようなファイルは「static」フォルダ内にいれることでそのままコピーされます。

2. 使用例

staticにcss,js,画像ファイルなどを配置した場合のpublic出力例を示します。

以上のようなフォルダ構成だった場合、

上記の位置にコピーされます。static内のフォルダ構造がそのまま維持される形です。

2-1. 上記ファイルを利用したpartialの改良

staticのファイルはコピー位置が明確なのでパス指定が容易です。 上記で映したファイルをレイアウトで活用する例を示します。 partialの回で作成したsite_header.htmlに追加します。

layouts/partials/site_header.html

<!DOCTYPE html>
<html>
<head>
	
	{{ .Site.Title }} | {{ .Site.Params.site_name_jp }}
	
	
	
	 
	 
	 
</head>
<body>
	

config.tomlで定義したBaseURLをパスの先頭につけ、 そのあとにstaticにおいたフォルダ階層に従ってパスを指定すれば、サイト共通のcssやjsを指定するヘッダ部品がつくれます。

References