2021.01.03

[Gatsby] slug をハッシュにする

Gatsby

いま (この記事を書く前) はディレクトリ構成がそのまま slug になっているのだけど、

https://tech.notti.link/memo/golang/exercise-fibonacci-closure/

ディレクトリ構成を気軽に変えられないのがネックだった (まだ決まりきってないから)。そこで slug をハッシュにすることにした。こんなイメージ

https://tech.notti.link/xxxxxxx

SEO 的には意味のある英単語のほうがいいのかもしれないけど、検索上位にならなくてもいいし、管理コストを減らすほうが大切だったので問題なし

Q. URL でどのページがみられているか確認していたから、URL でページを判別できなくなったら困るんだけど？

A. 実はページタイトルを表示できるから問題ない 🙆‍♂️

slug を変えるには

gatsby-node.js の createNodeField() で任意の slug を指定できる

gatsby-node.js

const value = createFilePath({ node, getNode });

// valueがslug
createNodeField({
  name: `slug`,
  node,
  value,
});

ref: GatsbyJS で記事の URL をカスタマイズする

なにを key にするか

同じ記事であれば同じ slug になってくれないと、デプロイするたびに slug が変わってしまう。それを防ぐには、記事固有の key を用意する必要がある

ディレクトリ構成を変えても変化しない値 (ファイルパスは使えない)
記事を編集しても変化しない値 (タイトルやタグ、本文も使えない)

How can I generate URL of my Gatsby blog post automatically like “blog/{ID}“? · Issue #17308 · gatsbyjs/gatsby で記事の created_at が使われていたので、それを真似することにする

hash を生成する

node の crypto パッケージを使う。いろんなハッシュ関数が使えるみたい

const crypto = require(`crypto`);
console.log(crypto.getHashes())[
  // result
  ("RSA-MD4",
  "RSA-MD5",
  "RSA-MDC2",
  "RSA-RIPEMD160",
  "RSA-SHA1",
  "RSA-SHA1-2",
  "RSA-SHA224",
  "RSA-SHA256",
  "RSA-SHA3-224",
  "RSA-SHA3-256",
  "RSA-SHA3-384",
  "RSA-SHA3-512",
  "RSA-SHA384",
  "RSA-SHA512",
  "RSA-SHA512/224",
  "RSA-SHA512/256",
  "RSA-SM3",
  "blake2b512",
  "blake2s256",
  "id-rsassa-pkcs1-v1_5-with-sha3-224",
  "id-rsassa-pkcs1-v1_5-with-sha3-256",
  "id-rsassa-pkcs1-v1_5-with-sha3-384",
  "id-rsassa-pkcs1-v1_5-with-sha3-512",
  "md4",
  "md4WithRSAEncryption",
  "md5",
  "md5-sha1",
  "md5WithRSAEncryption",
  "mdc2",
  "mdc2WithRSA",
  "ripemd",
  "ripemd160",
  "ripemd160WithRSA",
  "rmd160",
  "sha1",
  "sha1WithRSAEncryption",
  "sha224",
  "sha224WithRSAEncryption",
  "sha256",
  "sha256WithRSAEncryption",
  "sha3-224",
  "sha3-256",
  "sha3-384",
  "sha3-512",
  "sha384",
  "sha384WithRSAEncryption",
  "sha512",
  "sha512-224",
  "sha512-224WithRSAEncryption",
  "sha512-256",
  "sha512-256WithRSAEncryption",
  "sha512WithRSAEncryption",
  "shake128",
  "shake256",
  "sm3",
  "sm3WithRSAEncryption",
  "ssl3-md5",
  "ssl3-sha1",
  "whirlpool")
];

Git で使われている SHA-1 の最初の 7 文字を記事 ID として使うことにする。短いコミットハッシュが 7 文字だったので合わせてみた

const value = crypto
  .createHash("sha1")
  // node.frontmatterで記事のメタデータを取得できる
  // 今回は date が作成日にあたる
  .update(node.frontmatter.date)
  .digest("hex")
  .substr(0, 7);

createNodeField({
  name: `slug`,
  node,
  value,
});

こんな URL が生成された

https://tech.notti.link/1b81ff3

おわり 🏄