【Hugo設定】記事のファイル名を連番管理しつつ、URL(slug)を綺麗に保つ方法

ブログの連載記事やチュートリアルが増えてくると、「あの記事のファイルはどこに置いたっけ？」「書く順番通りにエディタ上で並んでほしい」といった管理の悩みが生まれますよね。

この記事では、ローカルのMarkdownファイル名を連番付きできれいに整理しつつ、Webサイト上で公開されるURL（パーマリンク）は数字を含まないスマートな英単語のみにする「slug機能」の活用テクニックを紹介します！

1. ファイル名には「数字」をつけるのがおすすめ

ObsidianやVS Codeなどのエディタでは、ファイルは基本的に名前順に並びます。
そのため、記事のファイル名には先頭に数字（連番）をつけるのがセオリーです。

content/posts/
├── 01-intro-install.md
├── 02-create-site.md
├── 03-base-template.md
...
├── 10-template-variables.md

こうすることで、学習順や作成順にファイルがズラリと並び、管理が圧倒的に楽になります！

2. でも、URLに数字が入るのはちょっと…

しかし、Hugoはデフォルトで「ファイル名」をそのまま「URL」に使います。
つまり、01-intro-install.md というファイル名だと、URLはこうなってしまいます。

http://example.com/posts/01-intro-install/

「URLに管理用の番号が入ってるのはカッコ悪いな…」「数字が変わったらURLも変わっちゃうの？」
気になりますよね。

3. 解決策：Front Matterの `slug` を使おう！

そこで登場するのが、Front Matterの slug（スラッグ）設定です。
これを使うと、「ファイル名は管理用」「URLは公開用」 と完全に分けることができます。

使い方は超簡単。記事の先頭（Front Matter）に slug = "好きなURL" を書き足すだけです。

+++
title = 'Hugoのインストール'
date = 2024-01-01...
slug = "intro-install"  <-- ここを追加！
+++

こう設定すると、ファイル名が 01-intro-install.md であっても、URLはこうなります！

http://example.com/posts/intro-install/

数字が消えてスッキリしましたね！✨
これで、手元では番号順にきっちり管理しつつ、読者にはきれいなURLを提供できます。

4. リンクはどうするの？

「URLが変わったら、他の記事からのリンクも書き直さないといけないの？」
と心配になるかもしれませんが、大丈夫です！

Hugoの ref 機能（内部リンクの記事で解説）を使っていれば、リンクはファイル名のままでOK です。

[インストール記事はこちら]({{< ref "01-intro-install.md" >}})

このようにファイル名を指定しておけば、Hugoが自動的に slug を見て、正しいURL（/posts/intro-install/）に変換してリンクを作ってくれます。

ファイル名自体を変更しない限り、内部のリンク切れは起きません。
サイト公開後に slug（URL）だけを変更しても、過去に書いた ref のリンク元を修正して回る必要はありません。

これぞHugoのパワーを活かした運用です！リンクの整合性を気にせず、安心して数字付きファイル名で管理してください。

slugを活用してファイル管理と綺麗なURLを両立しよう

Front Matterに slug を設定するひと手間を加えるだけで、手元のエディタ上での「ファイルの探しやすさ・並び順（連番管理）」と、読者にとって「親切でモダンなURL（カテゴリ推測しやすい英小文字）」の両方を実現できます。
Hugoの ref ショートコードと組み合わせればリンク切れのリスクも無くなるため、サイト記事が増えてきたらぜひ導入をおすすめします！