Hugoを使って簡単なウェブサイトを作る（その1）

Hugoという静的サイトジェネレーターを使ってウェブサイトを作ったので（このサイトです） 備忘録として作り方をまとめてみました。サイトのテーマにはBlowfishを使ってます。

サイトを作る前準備

#

Hugoをインストール
私はUbuntuにインストールしました

sudo apt update
sudo apt install hugo

hugo new site website

archetypes  assets  content  data  hugo.toml  i18n  layouts  static  themes

cd website

git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish

これでthemesディレクトリにblowfishがインストールされる


blowfishの設定ファイル一式をコピー

cp -r thems/blowfish/config .

rm hugo.toml

cd config/_default

mv languages.en.toml languages.ja.toml
mv menus.en.toml menus.ja.toml

defaultContentLanguage = "ja"

languageCode = "ja"
languageName = "Japanese"
...
[params]
  displayName = "JA"
  isoCode = "ja"

hugo.tomlファイルの設定

#

テーマの設定

#

blowfishのテーマを使いたいので次をアンコメント

theme = "blowfish"

サイトのURLを設定

#

ローカル環境でテストする際は

baseURL = "https://localhost:1313/"

本番環境では自分のサイトのドメインに

baseURL = "https://yservice.net/"

記事のサマリーの文字数設定

#

summaryLength = 70

日本語だとサマリー文字数がうまく認識されず必要以上の文字が表示されてしまうことがあるので 下の一文を追加

hasCJKLanguage = true

languages.ja.tomlファイルの設定

#

サイトのタイトル設定

#

自分のサイトのタイトルを入力

title = "山田の崩壊寸前ラボ"

年月日の表示形式とサイトロゴの設定

#

[params]
...
  dateFormat = "2006年1月2日"
   logo = "img/logo.png"

dataFormatは記事の年月日をどういう形で表示するかという設定で他にも2006-01-02など色々あります。 (なぜ2006年1月2日じゃないといけないのかはわかりません！） logoはサイト名の横に表示されるロゴです。assets/imgディレクトリにロゴの画像を入れといてください。 secondaryLogoというのもありますが、ライトモードとダークモードを切り替えたときに表示されるロゴを指定するらしいです。

著者の設定

#

 [params.author]
   name = "山田"
   image = "img/otama.png"
   headline = "辺境の個人ブログへようこそ！"
   bio = "ここ一年くらいオタマトーンにはまってます"

nameは自分の名前 imageはプロフィール画像（これもassets/imgに入れとく） handlineは名前の下に表示される文章、 bioは記事を開いた時に著者名の下に表示される自己紹介文

リンクの設定

#

links = [
{ x-twitter = "https://twitter.com/yamada_otm" },
]

プロフィールの下に表示したいSNSリンクをアンコメント、一番下の ] のアンコメントも忘れずに。

menu.ja.tomlファイルの設定

#

トップページ右上のメニューバーに表示したいものをアンコメントしたり追加したりすればいいです。 私の場合はBlogとCategoriesとTagsを表示してるので以下をアンコメント

[[main]]
  name = "Blog"
  pageRef = "blog"
  weight = 10
[[main]]
  name = "Categories"
  pageRef = "categories"
  weight = 20
[[main]]
  name = "Tags"
  pageRef = "tags"
  weight = 30

nameは表示される名前 weightは重要度（値の低いものがメニューバーの左側に来る） BlogのpageRefはblogとなってます。これはBlogをクリックしたときcontent/blogディレクトリ内を参照して、 その中にある記事ファイルを表示するという意味です。 しかし、CategoriesやTagsのpageRefは同じ意味ではなくて、各記事ファイルにフロントマターとして書かれている categories=[カテゴリ名]やtags=[タグ名]を参照してるのだと思われます。違ったらすみません。