VSCode+Hugo+GitHubでつくるブログ#03

はじめに

みなさんこんにちは！千葉達也です。
前回はとりあえずブログ記事を投稿、Hugoの簡易サーバー機能でそれを閲覧できるようにしました。ということで、今回はブログの設定をもう少し詰めていきたいと思います。
それではよろしくお願いします！

対象

VSCode+Hugoでブログを作りたい方

前提

Windowsな環境であること
Hugoをインストールしてあること
GitとVSCodeをインストールしていること
- まだな方は、こちらの記事を参考にインストールしてください。
- GitHubとの連携まで済ませておいてください。

`hugo.yaml`の作成

前回はHugoの簡易サーバー機能でブログを閲覧するために、Stackのサンプルページ用に用意されているhugo.yamlを使用しました。
ですが、これはあくまでもサンプルページ用の設定ですので、自分のブログに適した設定に変更する必要があります。
ということで、まずはhugo.yamlを作成していきましょう！

…

……

一から作るのは面倒ですね…

ということで、今回はサンプルページ用のhugo.yamlを参考に作成してみましょう。

ブログの基本の基本な設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


baseurl: https://example.com # あなたのブログのURL
languageCode: ja # 日本語の場合
theme: hugo-theme-stack # 変えない
paginate: 3 # 変えない
title: Example Site　# ブログサイト名
copyright: Example Person # コピーライト

# Theme i18n support
# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw
DefaultContentLanguage: ja # 日本語の場合 

# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage: true # 日本語の場合

サンプルページのhugo.yamlにはこの下にlanguages:とservice:、permalinks:という項目がありますが、今回は日本語ページのみ作成し、コメント機能・パーマリンクは実装しませんので作成するhugo.yamlには記述しません。

すこし発展的な設定

params:の項目はほぼサンプルページのものを使用しました。以下は変更点です。

faviconの設定
- ファビコン用の画像をstaticというフォルダにfavicon.icoとして保存します
- favicon: static/favicon.icoと記載します
footerの設定
- 必要な場合は適宜記述します
sidebarの設置
- subtitleを適宜変更します
- アバター（アイコン画像）をフォルダーimgにavatar.pngとして保存します
articleの設定
- licenceは無効化しました
commentsの設定
- 今回は無効化します
menuの設定（後述）
related、markupはそのまま記述します

テーマ公式のドキュメントが詳しいです

メニューにhome,about,archives,serchが表示されるように設定します

フォルダcontentを見ます

すると、現段階ではpostというフォルダのみが存在しています
ということで、contentの中にabout,archives,serchというフォルダを追加します

about,archives,serchのなかにそれぞれindex.mdを配置します

about/index.mdに記述する内容は次の通り

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


---
title: About
aliases:
  - contact
menu:
    main: 
        weight: -90
        params:
            icon: user
---

# 自己紹介
自己紹介を以下に書きます。

archives/index.mdに記述する内容は次の通り

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


---
title: "Archives"
date: 2024-04-01
layout: "archives"
slug: "archives"
menu:
    main:
        weight: -70
        params: 
            icon: archives
---

serch/index.mdに記述する内容は次の通り

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


---
title: "Search"
slug: "search"
layout: "search"
outputs:
    - html
    - json
menu:
    main:
        weight: -60
        params: 
            icon: search
---

再びhugo.yamlを見ます

homeを表示するために、menu:に次のように記述します

1
2
3
4
5
6
7
8


menu:
    main:
        - identifier: home
          name: Home
          url: /
          weight: -100
          params:
          icon: home

備考:weightについて
weightは値が小さいものほどメニュー上部に表示されるようになります。表示したい順番によって適宜数値を設定しましょう。

まとめ

以上のような設定をすると、だいたい下の画像のようなブログとなると思います。
私のブログの様子

でもよく見ると…

日本語表示がおかしくないですか!?

はい。
おかしいんですねぇ。CSSを見ると中国語フォントが使われてしまっていることがわかります。

ということで、今回はここまでとしますが、次回はCSSの編集をしていきたいと思います。

それでは、また次回！

参考文献

Stackの公式ドキュメント
https://stack.jimmycai.com/guide/
Hugo × Cloudflareで簡単ブログ構築
https://zenn.dev/seita1996/articles/hugo-markdown-blog