GatsbyJSで作ったブログのディレクトリ構成とslug

公開日: 2020年05月29日最終更新日: 2022年01月28日

今までは/content/posts/に.mdを直接配置していました。treeで表すと以下のような配置です。

├─content
│  ├─assets
│  ├─pages
│  └─posts
│      ├─first-post.md
│      ├─blog-start-log.md
│      ├─google-analytics.md
...

このままだとフラットにファイルが増えて管理が大変になるため、ディレクトリ管理したほうが良いことに気づきました。また、ぱっと見ていつ書いたものなのかもファイル名ではわかりませんし、そのうちファイル名も重複しそうです。
そこで/content/posts/yyyy-mm-dd-<awesome-title>/の様に日付ごとにディレクトリを作って管理することにします。添付ファイルもとりあえず同じディレクトリに入れておくこともできるので良さそうです。以下のとおりです。

├─content
│  ├─assets
│  ├─pages
│  └─posts
│      ├─2020-05-20-first-post
│      │   └─index.md
│      ├─2020-05-24-blog-start-log
│      │   2020-05-24-blog-start-log.md
│      ├─2020-05-25-google-analytics
│      │   └─google-analytics.md
...

このとき、記事のファイル名をindex.mdにしておくことでディレクトリ名までのURLで記事ページにアクセスすることができるようになります。

例えば、 https://gan0803.dev/2020-05-20-first-post/ です。

一方、上記でgoogle-analytics.mdのようにindex.md以外のファイル名をつけると、URLは https://gan0803.dev/2020-05-25-google-analytics/google-analytics/ になり、ファイル名が含まれたものになります。

しかし、2020-05-24-blog-start-log.mdについては、 https://gan0803.dev/2020-05-24-blog-start-log/ となっており、ファイル名なしのURLでアクセスすることができます。
これは、記事ファイル内のfrontmatterでslug: 2020-05-24-blog-start-logを指定しているためです。slug:に指定したパスでアクセスすることができます。

もし、長期間ブログを続けられていたら年ごとにディレクトリ整理したくなるかもしれません。
そうなると/content/posts/yyyy/mm-dd-<awesome-title>/のようなディレクトリ構成に変わってしまうでしょう。そうするとURLが変わってしまいます。

├─content
│  ├─assets
│  ├─pages
│  └─posts
│      └─2020
│          |─2020-05-20-first-post
│          │   └─index.md
│          ├─2020-05-24-blog-start-log
│          ├─2020-05-25-google-analytics

どこかからリンクされている場合に、URLが変わってアクセスできなくなるのは困ります。 そんな場合にslugを指定すると、ディレクトリ構成を変えても同じURLでアクセスし続けることができます。
すべての記事のfrontmatterにslugを記述する方法以外に、Creating Slugs for Pagesにある通り、ファイル名からslugをGraphQLで自動生成することもできます。

遠くない未来、きっと自分はディレクトリ構成やファイル名を整理したくなると思うのでslugを指定することにしました。