How to customize your 404 page in hexo blog?

FOREWORD

Today I checked the keyword 长ping in google, my page ranks number one, so amazing! But I click the page, it’s a 404 page. It suddenly occured to me that I had changed all of my URLs! So Google has not indexed my new URLs yet. It’s so weird that the top one search result is a blank page without any tip guides the users back to home page. This article recorded how to customize the 404 page and guide the users back to home page.

STEPS

The following steps are applicable to any themes of your hexo blog. No matter the theme is NEXT or others, you can follow these steps.

Create a 404.html file on the theme folder. The html file is to customize your 404 page.
For example, my theme is NEXT, I need to create a 404.html file on this directory: \themes\next\source.
Then you can edit the html, and write your code to customize the page. I choose Tencent 404 page as my 404 page. The code below is for your reference.

Note!! Please replace https://dana5haw.com with your homePageUrl. And replace 返回主页（您可以进入首页继续搜索） with your own words to guide the users back to home page.

The javascript may be updated by Tencent, please refer to Tencent’s official code.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="https://dana5haw.com" homePageName="返回主页（您可以进入首页继续搜索）"></script>
</body>
</html>

Deploy and update your website by inputing this command: hexo g -d.
Test your 404 page. You can input a non-existed URL in browser to test if your 404 page is successfully updated. For example, my domain is dana5haw.com, so I may input this non-existed URL https://dana5haw.com/111 to test my 404 page.
Look what the final 404 page!

CONCLUSION

You can make the 404 page look more fantastic, since you have known the steps to customize it.

REFERRENCE

https://www.zhihu.com/question/21650209

https://dana5haw.com/posts/ZH-CN/how-to-customize-404-page-in-hexo-blog.html

FOREWORD

STEPS

CONCLUSION

REFERRENCE

RELATED POST