GitHub Pages 也可以設定屬於你自己的 404 頁面

前言

你知道嗎？其實 GitHub Pages 也可以設定屬於你自己的 404 頁面，而且這個功能是 GitHub Pages 本身就有的，不需要額外的設定，這篇文章就來教你如何設定。

什麼是 404 頁面？

在開始教你如何設定 404 頁面之前，我們要先來了解一下什麼是 404 頁面。

相信有在上網並使用過網站的人，應該加減都有遇過 404 的頁面，當你只要在瀏覽器網址列中輸入了一個「不存在的網址」，或者是點擊了一個「不存在的連結」，這時候你就會看到一個 404 頁面。

通常 404 頁面會搭配一行字，例如：「找不到網頁」、「找不到網頁，請檢查網址是否正確」、「404 Not Found」等等，這些都是 404 頁面的內容。

那麼 404 頁面究竟是幹嘛的呢？其主要目的是在告知使用者一件事情

「你不小心闖到了一個不存在的頁面，請你回去吧。」

而這件事情雖然看似很沒有什麼，但在使用者體驗上卻是非常重要的，因為你無法預知你的使用者是如何進入到你的網站的，有可能是透過搜尋引擎、有可能是透過其他網站的連結、有可能是透過你的網站內部連結，而這些連結都有可能是錯誤的，因此你的網站就需要一個 404 頁面來告知使用者這個網頁不存在，接著引導使用者回到正確的頁面。

當然這不只是針對使用者體驗，對於 SEO 來說也是非常重要的，因為當搜尋引擎爬蟲在爬你的網站時，如果發現了一個不存在的頁面，那麼這個頁面就會被標記為「不存在」，這樣一來搜尋引擎就不會再去索引這個頁面，這樣一來就可以避免一些不必要的問題，像是一個不存在的頁面被索引，這樣一來就會對你的網站造成一些負面的影響。

所以 404 頁面重不重要？非常重要！而且滿多網站都會針對這個 404 頁面去客製化，例如：更好的錯誤提示、公益廣告、失蹤小孩通報等等，這些都是 404 頁面常見的客製化內容。

GitHub Pages 404 頁面

滿多工程師都會使用 GitHub Pages 作為自己作品展示的平台，畢竟身為一名工程師基本上都會持有一個 GitHub 帳號。

但我們在展示作品時，有時候會不小心展示出了一個不存在的頁面，這時候 GitHub Pages 就會顯示出一個預設的 404 頁面

雖然這個預設的 404 頁面並沒有什麼太大問題，但如果你是一個追求完美的人，那麼你可能會想要客製化你自己的 404 頁面，畢竟作品展示時，一個完美的 404 頁面也是一個很重要的部分。

那麼我們該如何在 GitHub Pages 上客製化自己的 404 頁面呢？其實超級無敵簡單，你只需要在你的專案儲存庫根目錄下新增一個 404.html 的檔案，然後在這個檔案中寫入你自己的 404 頁面內容即可（可查看 我的儲存庫 看示範）

以我的部落格為例，我就是這樣客製化我的 404 頁面的，你可以點擊 這個連結 來看看我的 404 頁面。

如果你不想要用 404.html 這個檔案名稱，你也可以使用 404.md，只需要在 md 檔案最前面加上一段 YAML Front Matter 即可，例如：

---
permalink: /404.html
---

這樣也是做到的，這樣子你就可以使用 markdown 語法來寫你的 404 頁面內容囉～

當 GitHub 在部署你的網站時，它會自動去尋找這個檔案，如果找到了，那麼它就會使用這個檔案作為你的 404 頁面，如果沒有找到，那麼它就會使用預設的 404 頁面哩～

有沒有超簡單的呢？你現在就可以去客製化你自己的 404 頁面了囉！