【HUGO】フレームワークを用いた静的サイト作成

前知識

静的サイトとは

いつみても同じ情報が乗っているWebサイトのことらしいです．会社のサイトなどサイト作成者から一方的に表示するやつ．対して「動的サイト」もあって，ユーザや時間，場所によって表示内容を変えるインスタや掲示板などのことを指す．

HUGOとは

HUGOは静的Webサイトを作るフレームワーク（骨組みを提供してくれる）になっている．HUGOの特徴は
・Go言語で作られており，HTMLへの変換がはやい
・データベースを用いずファイルで管理する
・MarkdownやHTMLを用いて記述するため比較的記述が容易
・サイトのテーマ（テンプレート）が豊富 : テーマ一覧

HUGOでWebサイトを作ってみる

準備

1. HUGOをインストールする

• まず先述の通りHUGOはGOで作られているためGOが入っているか確認しましょう．
  ターミナルやコマンドプロンプトで以下を実行してください．

$ go version

もしバージョンが表示されず入っていなかったら
https://go.dev/
でGO言語をインストールしてください．

• 次にTheme（テーマ）を引っ張ってくるためにgitの登録が必要になります．ssh認証(鍵登録)までしっかりしないと引っ張ってこれません．
  gitおよびgithubの登録方法は他の方の記事を参考にしてください．

• HUGO公式のQuick Startをクリックするとこのサイトに飛びます．
  https://gohugo.io/getting-started/quick-start/
  ここから「install HUGO」で個人のデバイスにあったものをインストールしてください．ちなみに私はbrewを使って以下のコードでインストールしました．

$ brew install hugo

サイトの形を作る

1. まずHUGOを用いてディレクトリなどの雛形を作ります．以下のコマンドをターミナルなどで実行してください．「サイト名」はご自身の好きなやつ．

$ hugo new site サイト名

すると「サイト名」のディレクトリの中に以下のようにファイルが作られたと思います．これが雛形というやつみたい．でもこの中は空っぽで何も入っていないからテーマを設定しないといけません．

そこでThemesの中にテーマを持ってくるわけです．
まずthemesの中に移動します．ターミナルで以下の一連を実行．

$ cd quickstart

次に念の為現在のディレクトリの空のGitリポジトリを初期化します．

$ git init

そしたらテーマをgitを使って引っ張ってきます．「テーマリンク」の部分は先のテーマ一覧の「Installation」部分に似たようなコードがあると思うので，それをはっつけてください．後で例を示します．

$ git submodule add テーマリンク

そしたらthemesの中にある「exampleSite」から「data, content, static, resources, config.toml(hugo.toml)」というファイルをコピー(exampleSiteではない同じ名前のファイルのところに移す)してきます．以下のコマンドでもできるみたいです．私は手作業で持ってきました．

$ cp -a themes/テーマ名/exampleSite/* 

ではここで忘れないようにthemeを設定ファイル「hugo.toml」に登録しておきましょう．

$ echo "theme = 'テーマ名'" >> hugo.toml

試しにサーバを動かしてどんな風にWebサイトが表示されるか見たいときは以下のコマンドを打ちます．ちなみにhugo.tomlにあまり記述していない状態では全然表示されませんでした．

$ hugo server -D #-Dで下書き状態のものも表示する

例) roxo-hugoというテーマを加えようとすると以下のようになります．

$ git submodule add [e-mail]:StaticMania/roxo-hugo.git themes/roxo-hugo

$ cp -a themes/roxo-hugo/exampleSite/* 

$ echo "theme = 'roxo-hugo'" >> hugo.toml

サイトに手を加える(theme : roxo-hugo)

はじめの状態ではまるで何が起きているかわからない状態だと思うのでちょっとずつ形作っていきます．形作る上で大事だなと思ったのは

1. 設定ファイル「hugo.toml」の記述
2. パスの変更
3. dataの変更
4. scssの記述

です．一つずつ見ていく前に現段階（編集している）でのディレクトリ構成を載せておく．赤字が多いが気にしない．

では今回のテーマのファイルの解説をする．

• content: コンテントファイルでは各トップページ（「about」, 「blog」...）の内容を記述するマークダウンファイル．主にタイトルや添付画像の設定が重要．また，内容を直接記述することになる．
• data: ファイルによってはここを参照して，数字などを取ってくる．例えば今回themes/roxo-hugo/layout/counterでは実績の紹介で「実績タイトル」「クライアント数」を取ってくるのだが，それが`data/counter.yml'に記述されている．
• public: 様々な機能によって実際に作られたHTMLなどを格納する場所．サーバを起動するたびに中身が作ったものを元に更新されるので触っても意味がない．
• themes/scss: scssとは変数・関数などのCSSにはない機能を使って、CSSを便利に使えるように拡張した言語で，ここを変更しないと基本的なスタイルの変更はできません．例えば文字の色や大きさ，ボックスの余白などを変更したときはHTMLファイルとSCSSをにらめっこして該当する部分を修正します．
• exampleSite: ここにはデモサイトの情報が記されているため参考にするときに役に立ちます．
• layout: ここには各ページのHTMLが入っており，これを書き換えることで構成を変更することができます．
• hugo.toml: 一番大事と言っていい．大体のファイルがここの中の設定を参照するようにしているため，これにパラメータを記述して表示を変えていく．

hugo.tomlをいじる

ここにはサイトの情報，HTMLの記述内で参照する情報を記述します．どうやらもっと分けて書いたほうがいいみたいです（分割する）が，まだ作っている最中なので全部一箇所に書いてます．
HTMLによってはマークダウンファイルの情報を読み取るようになっていたりするので気をつけましょう．
以下は最初に設定したほうがいいものになっています．

baseURL = 'http://localhost:1313/' #名の通り大元となるURL
languageCode = 'ja-jp' #日本語設定にしておきましょう
DefaultContentLanguage = 'ja' #これはデフォルトで日本語変換されるためのものらしい
title = 'Qwer Lounge' #サイトタイトルで，タブに表示されます．
theme = ['roxo-hugo'] #先のテーマの登録で勝手に書かれます．
summarylength = 50 #検索で表示した時の文章の長さです．
HasCJKLanguage = true #「Chinese, Japanese, Korean」言語を有効にするやつです
copyright = "Copyright © 2024 Qwer" #一応のコピーライトです．

# Site Params
[Params]
  dateFormat = "2024/10/29"
  # Meta data
  description = "Qwerの活動情報を発信していきます"
  author = "hogehoge fugafuga"

より詳しtomlファイルの出る幕を解説すると「partials/hero.html」の上部はこのようになっています．早速出てきました．
with .Site.Params.bannerはSite(hugo.toml)の[Params.banner]の中から設定を参照していくよ．ってことです．

{{ with .Site.Params.banner }}
  {{ if .enable }}
  {{ "<!-- Site Hero Start -->" | safeHTML }}
  <section class="site-hero" style="background-image: url('{{ .background_image }}');">
    <div class="container">
      <div class="row">
        <div class="col-lg-10 mx-auto">
          <div class="site-hero-content text-center">
            <h6>{{ .tagline }}</h6>
            <h1>
              {{ .heading }}
            </h1>

{{ if .enable }}
[Params.banner]のenableがtrue(もしくは１)じゃないとこのファイル自体動作しないよ．
{{ .tagline }}
[Params.banner]のtaglineの内容を表示するよ．
{{ .heading }}
[Params.banner]のheadingの内容を表示するよ．

って感じです．safeHTMLは安全なHTMLと証明するらしい．よくわからん．

つまり先ほど書いた[Params]の続きに以下のように書く必要があります．他にもいろいろ書いてますが，これはHTMLファイルの下の方で必要になりました．

[Params]
  dateFormat = "2024/10/29"
  # Meta data
  description = "Qwerの活動情報を発信していきます"
  author = "hogehoge fugafuga"
  
  [Params.banner]
    enable = true
    background_image = "/backgrounds/hero-background.jpg"
    tagline = "After All this time?"
    heading = "Always"
    primary_button_url = "#project"
    primary_button = "See Our Work"
    secondary_button_url = "#partialteam"
    secondary_button = "See Our Team"

画像パスの設定

どうやら表示したいページによって画像を参照するとき，rootがイメージと違うっぽい．staticがrootになっているのでしょうか．
content/blog/~~.mdではstatic/blog/blog-post-04.jpgを参照するのに以下のように書く．

title: "Design Inspiration: The Best Projects From December"
date: 2019-12-24T13:45:06+06:00
type: "blog"
image: blog/blog-post-04.jpg  #これ
feature_image: blog/blog-details-image.jpg
author: Alexender Schoitiz

hugo.tomlでstatic/logo.pngを参照する時は以下のように書きます．

[Params]
  logo = "logo.png" #これ
  logo_footer = "logo-footer.png" #これ

備忘録

tomlファイルを参照するの書き方．

入れ子の構造になるときは[[親.子]]となるように書くことに気をつける．

  [Params.contactForm]
    send_message = "send"
    placeholder_first_name = "名(太郎)"
    placeholder_last_name = "姓(山本)"
    placeholder_email = "[e-mail]"
    placeholder_status_type = "選択肢から選んでください"
    placeholder_about_the_question="ここに送信内容を記入"

    [[Params.contactForm.projectType]]
      value = "会社員"
      title = "会社員"
    [[Params.contactForm.projectType]]
      value = "フリーランス"
      title = "フリーランス"

ロゴや画像が変わらないとき

いくら画像を入れ替えても，サーバを立ち上げ直しても変わらない時は，古いキャッシュが残り続けて邪魔しているかも．一度choromなどの履歴からキャッシュを削除するのがいい．