I made a 404 page on my Hexo site hosted on Netlify and wanted to share the steps. I also made it a little more interesting with a game on it.
The handling of 404 by Netlify’s server is pretty simple: it just goes to the 404.html on your root folder.
On Hexo, you can accomplish that in two ways:
Make your own 404.html in your
sourcefolder, which will automatically get copied to your public folder as an asset. Keep in mind, this means it won’t feature your Hexo theme. But if you’re going for a custom look anyway, that’s your option.
If you want to keep your theme, make it a post! Create a 404.md in your
sourcefolder with some minimal scaffold (just the title, or use
new hexo page). Hexo will create a 404.html out of it.
If we’re already on the subject, I’ll tell you how I used hexo’s cactus theme to embed 2048 into the page.
Disclaimer: I got this great idea from System76’s 404 page. By the way, you can use the it-just-works iframe approach like they did. Here’s how I did it:
First, we have to bring 2048, we can use this package. So
npm i game-2048.
Now to bring the package to cactus:
sudo npm i -g gulpif that isn’t already the case. Then in
gulpfile.jsadd a task to bring 2048 into the libs and add it to the
themes/cactus, and now the package is in cactus’s lib. Now
hexo generateto bring it to the
/lib/game-2048/style/main.csswill probably wreck the Hexo theme because it has properties onto the body. Tweak it.
Finally, write your 404.md and include this HTML into it:
<div id="container" class="container"></div>
- One last
hexo generateto bring it all together and that’s it.
Update: In the end I scrapped most of this and kept just the JS and CSS files directly in my source. It’s not like 2048 will be updated anytime soon anyway. Simplicity > all.