Hexo 設定 404 頁面

2022年12月21日 Blog

404 頁面，也就是找不到網頁時的暫時頁面。雖然大部分網頁伺服器已經提供預設的 404 頁面，但公版有些蠻醜的。

新增頁面

方法一：使用 md 檔讓 Hexo 生成

簡單省事的做法就是在 source 資料夾內新增 404.md ，依照一般貼文的寫法，寫完讓 Hexo 產生頁面就好。

方法二：使用一般 html 檔

事先準備好 404.html 的靜態網頁，放到 source 資料夾內。

例如使用範本 https://freefrontend.com/html-css-404-page-templates/

放入後修改 _config.yml 設定跳渲染 404.html (可參考 Hexo 指定文件跳過渲染)

...

skip_render:
- 404.html

一般檔案如 css 與 js 可以直接放著在 source 就好，Hexo 渲染網頁時會回直接搬到 public 資料夾內。

套用 404 頁面

我們的網站有提供 404 頁面，但設定重導向就是網頁伺服器的工作了。

靜態網頁服務

GitHub Page, CloudFlare Page 等免費的靜態網站服務，預設都會抓 source 資料夾下的 404.html 檔案作為 404 頁面。

nginx

預設網站設定檔通常是 /etc/nginx/conf.d/default.conf

# The default server.
server {
  listen       80 default_server;
  server_name  everythingelse;

  error_page 404 /404.html;

  # Everything is a 404
  location / {
    return 404; #return the code 404
  }

  # link the code to the file
  location = /404.html {
    # 可以把頁面位置改成這樣，Hexo 部署時的對應位置就是 public 資料夾
    root  /var/www/nginx/www/;
  }
}

apache

在網站資料夾內的 /var/www/html/.htaccess 檔案內加入

ErrorDocument 404 /404.html

或是編輯 /etc/apache2/sites-enabled/000-default.com 修改 VirtualHost

<VirtualHost>
   ...
   ErrorDocument 404 /404.html
   ...
</VirtualHost>

關於 SEO

Google, Bing 等搜尋引擎，會將較合適的網站優先推到搜尋結果上。
為了讓排名靠前一些， SEO（搜尋引擎優化）就變得十分重要，尤其是要增加曝光度。
SEO 其中一項是需使用自訂的 404 頁面，也因此網站就會影響到網站的~~廣告費~~。

參考資料

github page 404 setting
apache custum 404 page
nginx 404 page