Hexo 設定 404 頁面

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 指定文件跳過渲染](/2021/12/15/hexo-skip/)\)

</> yml 📄 _config.yml

1
2
3
4


...

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

📄 default.conf

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


# 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 檔案內加入

📄 .htaccess

1

ErrorDocument 404 /404.html

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

📄 000-default.com

1
2
3
4
5


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

關於 SEO

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