All Articles

設定 Gatsby 部落格文章的舊路徑重導向，使用 gatsby-redirect-from 插件

新的 Gatsby 部落格有自己一套路由設定，與原先 Hexo 不同。

例如原先 Hexo 版的 【專案】科幻風造型獎盃 文章的網址是：

https://www.easonchang.com/2018/04/04/scifi-trophy/

而將文章搬移到 Gatsby 後，網址變成了：

https://www.easonchang.com/posts/scifi-trophy/

因為我部落格是在原網址整個重架，若有讀者將原本的網址存為書籤，再次連回來時會找不到那篇文章，因此我需要對舊文章做特殊處理，有兩種方法：

  1. 調整 Gatsby 路由生成設定，讓舊文章維持使用舊網址（依然使用 /2018/04/04/scifi-trophy/）
  2. 設定重導向規則，將舊網址 /2018/04/04/scifi-trophy/ 重導向到新網址 /posts/scifi-trophy/

我選擇走第二條路，因為我覺得新網址的比舊網址簡潔，將文章全集結到 /posts 路由底下，挺順眼的。

而且若我未來要開新專案取名叫 2018 ，想架設在 https://www.easonchang.com/2018/ ，也可以避免路徑衝突。

使用 gatsby-redirect-from 插件實現重導向

我找到了一個 Gatsby 的 plugin，叫做 gatsby-redirect-from 。

它的功用是可以在每篇文章的 .md 原始檔裡設定多個路徑別名，讀者用別的路徑進站時，就會被重導向到正確的文章。

gatsby redirect from

安裝

在終端機指令輸入下面指令安裝相關 node 套件，我使用 yarn 來安裝：

yarn add gatsby-redirect-from gatsby-plugin-meta-redirect

然後修改 gatsby-config.js 檔案，啟動這兩個 plugin：

// ...
plugins: [
  // ...
  // 加入下面兩行
  'gatsby-redirect-from',
  'gatsby-plugin-meta-redirect' // make sure this is always the last one
]
// ...

對每篇文章設定要重導向的路徑

接著修改要設定重導向的文章 .md 檔。

在最上方 yaml 區塊加入 redirect_from key，裡面是一個 array，可以針對一篇文章設定 1 到多個重導向路徑。設定完後會長這樣：

---
title: 【專案】科幻風造型獎盃
redirect_from:
  - /2018/04/04/scifi-trophy/
---

## 簡介
（下略...）

這樣就大功告成了！

重新執行 yarn deploy 更新部落格後，讀者即便連到舊的文章網址，也會自動被重導向到新文章連結了！

原理

我觀察了一下此 plugin 是如何做重導向的，發現他是在 build 完後的靜態檔裡頭，會建立多個類似下面的 index.html 檔，放在要被重導向的舊路徑裡（ /2018/04/04/scifi-trophy/ ）：

<meta http-equiv="refresh" content="0; URL='/posts/scifi-trophy/'" />

用一個帶有 URL 的 refresh meta tag 來做 client-side 的重導向，content 裡的 0 代表 0 秒後要重導向，也就是立刻馬上。挺聰明的！

這個方法的關鍵字是 Meta Refresh ，是滿常用的重導向實作方法，但有些瀏覽器因為安全性考量，會擋掉重導向動作，所以很多網站要做重導向時，才會同時附帶一個按鈕，說「若5秒內沒有重導向的話，請按我」。

感想

這次一次性設定 30 篇舊文章的路徑，滿費工的。要一直從瀏覽器點舊文章，複製舊網址，在切換到編輯器將舊網址貼到 md 檔，並補上 redirect_from key，重複整套動作 30 次。

這套流程應該要是能被自動化的，但我目前功夫還不到家，所以先手動完成了。希望以後做類似事情時，我能更像個工程師寫個小 script 自動完成它！

Published Feb 14, 2021