winds.from.oz 技術メモ

Hugoでサイトを作る

Posted:

Netlify

Netlifyでのデプロイ。Netlify自身がかなり手厚いサポートをしており、かなり楽にデプロイできました。 参考 Host on Netlify

テーマの変更

現在使っているテーマは gevhaz/hugo-theme-notrack

hugoの場合、テーマによってCSS上書きの方法が違うらしくテーマの説明を見ます。

gevhaz/hugo-theme-notrackの説明を見ると

You can add your own CSS by creating a file assets/css/userstyles.css.
The theme will automatically pick it up.

とあります。このファイルを作成します。 ( このファイルは themes/hugo-theme-notrack/layouts/partials/head.html から参照されていました ) 私の希望としては、まずサイトの横幅を広げたいので、そのためのCSSを作成しました。

@media (min-width: 48em) {
  main {
    margin: 0 2%; /* from 15% to 10% */
  }
}
@media (min-width: 64em) {
  main {
    margin: 0 4%; /* from 17% to 12% */
  }
}
@media (min-width: 85.375em) {
  main {
    margin: 0 6%; /* from 21% to 16% */
  }
}
@media (min-width: 120em) {
  main {
    margin: 0 6%; /* from 24% to 18% */
  }
}
@media (min-width: 160em) {
  main {
    margin: 0 5%; /* from 27% to 20% */
  }
}

フォント指定

テーマのデフォルトのフォントが硬い印象だったので変えてみました。

Browse Fonts - Google Fonts から 好きなフォントをクリック、「Select 〜」でフォントを選択すると左からフォントへのリンクが表示されるのでリンクをコピー

テーマのhead.htmlを上書きするためコピー

cp -rp themes/hugo-theme-notrack/layouts/partials/head.html layouts/partials/head.html

layouts/partials/head.html を編集します。 私は下記を追加しました。

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1+Code&display=swap" rel="stylesheet">

下記のような形になります。

<head>
    <title>{{ .Site.Title }} {{ with .Title }}- {{ . }} {{ end }}</title>
    <link rel="stylesheet" type="text/css" href="{{ "css/fonts.css" | absURL }}">
    <link rel="stylesheet" type="text/css" href="{{ "css/fontawesome.css" | absURL }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1+Code&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{ "css/styles.css" | absURL }}">
    {{ with resources.Get "css/userstyles.css" }}
    <link rel="stylesheet" type="text/css" href="{{ .Permalink }}">

次に assets/css/userstyles.css をフォントを使うように修正します。

*, p, h1, h2, h3, h4, h5, h6 {
  font-family: 'M PLUS 1 Code', sans-serif;
}

フォントのスタイルは layouts/partials/head.html で変更する形ですね。

ディレクトリ構成

/static

ここにあるファイルはHugoによってそのまま公開ディレクトリ（デフォルトでは/public）にコピーされます。 CSSファイルをこのディレクトリに置くと、そのファイルは変更されずにそのまま公開されます。

/assets

このディレクトリはHugoのパイプライン機能と一緒に使用されます。 ここに置かれたファイルは、ビルド時にHugoによって処理され、公開ディレクトリに出力されます。 CSSやJavaScriptなどのファイルは、ここに置くことでHugoによる最適化（ミニファイ化、結合など）を受けられます。

このためcssファイルなどは /assetsディレクトリ配下に置いています。

/public

Hugo のデフォルトの出力先です。 content/, layouts/, static/, assets/, config.toml などから生成された、公開対象の HTML/CSS/JavaScript/RSS/sitemap などが配置されます。

このリポジトリでは netlify.toml の publish = "public" により、Netlify が hugo --gc --minify 実行後の /public を配信対象として扱います。 そのため /public 配下は基本的に直接編集せず、必要な変更は元になる Markdown、テンプレート、静的ファイル、設定ファイル側へ反映してから Hugo で再生成します。

ローカルで生成される作業成果物なので、Git 管理対象にはせず .gitignore に /public/ を追加しています。

ChatGPTとのやり取り

はい、Hugoでは特定のページのHTMLをカスタマイズすることが可能です。具体的には、特定のページのみに適用するテンプレートを作成することで、そのページのHTMLを変更することができます。

また、特定のページにだけCSSを適用するためには、ページのフロントマター（YAML、TOML、JSONなどの形式で記述されたメタデータ）に特定の変数を設定し、それに基づいてテンプレートから該当のCSSを読み込むようにすることも可能です。

たとえば、あるページのフロントマターに `use_animation: true` のようなフラグを設定し、それに基づいてテンプレートから該当のCSSを読み込むようにすることができます。以下にその一例を示します。

まず、ページのフロントマターに以下のように記述します：

title: “My Page With Animation” use_animation: true


次に、`baseof.html` の `<head>` タグ内に以下のような条件分岐を追加します：

{{ if .Params.use_animation }}

<link rel="stylesheet" href="/css/animation.css">

{{ end }}


このようにすると、フロントマターで `use_animation` が `true` に設定されたページだけが `animation.css` を読み込むようになります。

この方法を使えば、特定のページにだけアニメーションCSSを適用することが可能です。ただし、`animation.css` のパスや、フロントマターの変数名（この例では `use_animation`）は適宜自分の状況に合わせて変更してください。

ここでは、CSSを使って背景にDockerのクジラのアニメーションを追加するサンプルを提供します。ただし、CSSのアニメーションは非常に複雑で、この例はあくまで簡単な一例です。

まず、DockerのクジラのSVGイメージが必要です。ここでは、SVGの形式で提供されているDockerのロゴを仮定しています。そして、そのSVGファイルをウェブサイトの公開ディレクトリ内（例えば `/static/images/`）に保存します。

そして、以下のようなCSSを作成します：

body {

position: relative;
overflow: hidden;

}

body::after {

content: "";
background: url(/images/docker-whale.svg) repeat;
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
z-index: -1;
animation: move 10s linear infinite;

}

@keyframes move {

from { transform: translateX(0); }
to { transform: translateX(-50%); }

}

このCSSでは、body要素の後に疑似要素を追加し、その背景にDockerのクジラのSVG画像を繰り返し表示します。そして、アニメーションを使用して、この背景画像が右から左へと無限に移動するようにします。

ただし、このアニメーションは非常に基本的なもので、実際のウェブサイトで使用する場合には、アニメーションのスピードや方向、SVG画像の大きさや配置など、さまざまな要素を自分のニーズに合わせて調整する必要があります。

また、SVGファイルのパス（この例では /images/docker-whale.svg）や、body要素の大きさや位置なども、実際のウェブサイトの構造に合わせて適宜変更する必要があります。

この例はあくまで一つの簡単な例ですが、CSSのアニメーションは非常に豊富で多様な表現が可能です。より詳細なアニメーションを作成するためには、CSSのアニメーションやトランジションについての深い理解と経験が必要となります。


# 参考にしたサイト

#### [【備忘録】Config.tomlの項目 - たかけんテックラボ](https://takaken.tokyo/dev/hugo/config/hugo-config-description/)

最初、このページを参考にさせていただいた記憶が。
config.tomlの各項目が日本語で説明されていて参考になりました。

#### [Menus | Hugo](https://gohugo.io/content-management/menus/)

メニューの設定方法、特にtomlの設定方法があるので助かりました。
またオプションが例示されているので試したい。

#### [まくまく Hugo ノート - 天才まくまくノート](https://maku77.github.io/hugo/)

hugoの機能を網羅されている感があります。

特にconfig.tomlの設定方法が参考になりました。
[Hugo でコンフィグファイルに設定した情報を参照する - まくまく Hugo ノート](https://maku77.github.io/p/5m9tdwg/)

#### [静的サイトジェネレータHugoを使ったサイト構築（メニュー編） · feedtailor Inc. スタッフブログ](https://staff.feedtailor.jp/2016/07/27/hugo_15/)

メニューのURLには相対パスが使えるのが参考になりました。
階層化するサンプルを試したい。

#### [GitHub Pages は（GitHub 無料プランにおいて）プライベートリポジトリでは運用できない](https://zenn.dev/hellorusk/articles/938ebbc3b4e4fb)

私は最初、「GitHub
Pagesでホストできないかな?」と思っていたのだけれど、
どうもプライベートリポジトリだと課金しないといけない?と思ったのですが確信が得られて助かりました。

#### [Hugo で作った静的サイトを GitHub Pages から Netlify へ移行する](https://zenn.dev/meihei/articles/7909f38a69b04b)

GitHub Pagesでhugoのホスティングの辛みがか書かれていて共感が...
Netlifyありがたい(仕組み的にも素晴らしい)

#### [カスタマイズしたCSSを追加する - Todonomatsuri](https://www.todonomatsuri.com/post/2021/01/01/customize_css/)

フォントの変更はこのサイトを参考にしました。
テーマによってユーザーのcssの読み込み方法が異なります。

#### [メニュー](https://garretlab.web.fc2.com/hugo/contents/menu/)

メニューの変更方法の参考にした
私のテーマは assets/css/userstyles.css を読み込む形でした。