404 page for github pages
Published in
1 min readJan 12, 2019
When deploying my Angular project on github, I realize the routing wasn’t working. Since we can’t configure github to fallback to index.html, we’ll have to use a 404.html. In the Angular document, it says make a copy of index.html and name it 404.html.
This is not working.
After some research, here’s the right way to display your 404 page on github.
Simply put, you must add the below in the beginning of your 404.html
---
permalink: /404.html
---<The rest of your 404.html>
If you’re using Angular on Mac or Unix, do the below:
GITHUB_USER=<your github user>
PROJECT=<your github project># Build the project first.
ng build --prod --deploy-url=https://$GITHUB_USER.github.io/$PROJECT/ --base-href=/$PROJECT# Instead of copying index.html, echo and cat the content so that `YAML front matter` was added.
echo "---
permalink: /404.html
---
" > "./dist/$PROJECT/404.html"
cat "./dist/$PROJECT/index.html" >> "./dist/$PROJECT/404.html"
This is not just for Angular, all 404.html on github page should follow.
Did you learn something new? If so please:
↓ clap 👏 button below️ so more people can see this
