Configure 404 page for Jekyll hosted on Azure Static Web Apps
In this post I will show you how to add a 404 not found page to Jekyll, and how to configure an Azure Static Web App to use it, to replace the default Azure not found page.
Configuring redirect_from
First of all, add this line to the end of your .gemspec file, inside Gem:Specification:
1
2
3
4
5
6
7
Gem::Specification.new do |spec|
# ...
spec.add_runtime_dependency "jekyll-redirect-from", "~> 0.16"
end
This will allows us to redirect from other pages. Then create an assets folder if you do not have one already, and create a new HTML file named 404.html. The styling and needs of this page may greatly vary from case to case, since most probably you are using an unique layout and style for your page, but it should have something like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---
layout: inner
title: Not found
permalink: /404.html
redirect_from:
- /norobots/
- /assets/
- /posts/
---
<h1>Page not found</h1>
<p>
The page you have requested has been moved or doesn't exist.
</p>
<a href="/">Homepage</a>
The most important bit here is what is between the pair of three dashes. permalink is the path that this page will use, it’s important later on when configuring the Azure Static Web Page, and the redirect_from, which can be used to redirecting from other pages. You can check the GitHub page of the jekyll-redirect-from Gem to know more about it.
Configuring Azure Static Web App
Replacing the Azure Static Web App default not found page is quite easy, all you have to do is to place a file named staticwebapp.config.json at the root of your project with the following content:
1
2
3
4
5
6
7
{
"responseOverrides": {
"404": {
"rewrite": "/404.html"
}
}
}
This is where the permalink part from the previous section is important, the rewrite parameter should match that permalink. You can commit, push and merge your changes, Azure Static Web Apps should automatically pick this file up and replace the default not found page. If it doesn’t, check that this file is in the correct directory, and that your 404.html page is configured correctly.