Hugoでサイトを作る

Netlify

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

テーマの変更

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

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/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ディレクトリ配下に置いています。

ChatGPTとのやり取り

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

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

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

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

```markdown
---
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のアニメーションやトランジションについての深い理解と経験が必要となります。

winds.from.oz 技術メモ

Hugoでサイトを作る

Netlify

テーマの変更

フォント指定

ディレクトリ構成

/static

/assets

ChatGPTとのやり取り

参考にしたサイト

【備忘録】Config.tomlの項目 - たかけんテックラボ

Menus | Hugo

まくまく Hugo ノート - 天才まくまくノート

静的サイトジェネレータHugoを使ったサイト構築（メニュー編） · feedtailor Inc. スタッフブログ

GitHub Pages は（GitHub 無料プランにおいて）プライベートリポジトリでは運用できない

Hugo で作った静的サイトを GitHub Pages から Netlify へ移行する

カスタマイズしたCSSを追加する - Todonomatsuri

メニュー