My current favorite thing in web dev is a new site generator called Astro. Astro is like Hugo and 11ty, yet contains a few neat tricks r...
Astro SCSS Supabase Frontend Spotify NetlifyRecently a fellow team member challenged me to recreate the new Spotify “Like” button using only CSS. Honestly I’m not sure if he challen...
CSS SCSS UI/UX Frontend AnimationsThe value of Promises in Javascript cannot be overstated. They are used everywhere, helping to navigate the asynchronous maze that comes ...
JavaScript Async PromisesIf you have been working with an icon set and noticed that your icons are not vertically centered, then you are not alone. I was working ...
CSS UI/UXWith the release of our CSS Framework, Platform UI, it might be fun to actually build something with it! At RitterIM, we have an interna...
CSS Frameworks Static SitesIt’s been a few years, several great people, an awesome company, and a cool thing we made 😀 Once upon a time, we had a mixed bag of fram...
CSS Frameworks RIMdevI’m a huge fan of animation on the web, especially when it comes to user interaction. A simple way to include such a thing on webpages is...
CSS SCSS JavaScript UI/UX Frontend AnimationsI dedicate this blog post to all the QA testers that expose all the flaws in my code. For a few years now I thought I had it all figured...
CSS SCSS Mobile UX UI/UX frontendOne of the perks being with Ritter, and on the dev team, is you can choose the hardware that makes you happy and productive! Team members...
macOS RIMdevAs a technical writer, I create software documentation. But many times, I find myself looking at in-product copy and wondering about cont...
Documentation Technical writing UX writing Content designDocs and contextual help We recently started a push towards integrating Docs content into our software platform. The goal is to pull in...
Documentation Hugo XML RSSHave you ever wanted to change the value of a Sass variable based on screen size, a state, or for any other reason that might require cha...
css SassEver been confused about naming a branch with Git? Looking for a good naming convention? Well, I might have an answer for you. I’m not sa...
GitHubWe often use GitHub to create a compare view, and list pull requests (PRs) for releases. However, GitHub limits the number of commits you...
Documentation GitHub GitUsing our Hugo-based documentation site, we typically publish release notes once per week. My usual process includes the following: M...
Documentation Hugo ArchetypesAs someone who basically gets by when it comes to writing Javascript, I tend to look at things from a “I bet I could do this with CSS” st...
CSS SCSS Mobile UX UI/UX frontendThis is an updated post of the original here. Whether you’re new to the frontend at RIMdev or looking for more about our Frontend team...
Team RIMdev FrontendIf you’ve ever worked in Azure Data Studio, you may find tab colors very useful. They allow you to visually separate different connectio...
Documentation Azure Data StudioIf you’re not familiar with Platform UI, it’s a utility rich CSS framework we created. As we look to migrate all of our apps and static ...
UI UX CSS SassGet ready to celebrate because, as of Friday, September 18, 2020, Evan You, creator of Vue.js, announced Vue 3 is officially released. He...
vue3 frontend developmentStatic site hosting is straightforward, and from our experience, less likely to have errors compared to a more dynamic site. While dynamic site problems, like missing pages or internal server errors, are not expected, they can still happen. For us, it is essential to be good internet citizens and set up proper responses to error response. If we are transmitting a 404 Page Not Found page response, we want the HTTP semantics to match what our users are seeing. In this post, I’ll show you what you need to set up your Hugo static site to support proper error pages in Internet Information Services (IIS).
In Hugo, we can treat error pages like any other piece of content on our site. In our use cases, we usually create a file named 404.md under our content folder (/content/404.md).
---
title: Page Not Found
date: 2018-07-20T12:09:05-04:00
type: basic
---
**We're so sorry that you stumbled upon this page!**
After running the hugo command, you should see a generated document under the following structure.
> /public/404/index.html
Create as many error pages as you need for your site.
IIS operates by using configuration files commonly named Web.config. Place a Web.config file under the static directory of your Hugo site.
> /static/Web.config
The file contents should include a httpErrors section that contains some potential status codes.
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.webServer>
<httpErrors errorMode="Custom" existingResponse="Replace">
<remove statusCode="400" />
<remove statusCode="403" />
<remove statusCode="404" />
<remove statusCode="500" />
<error statusCode="400" responseMode="File" path="404\index.html" />
<error statusCode="403" responseMode="File" path="404\index.html" />
<error statusCode="404" responseMode="File" path="404\index.html" />
<error statusCode="500" responseMode="File" path="404\index.html" />
</httpErrors>
<validation validateIntegratedModeConfiguration="false" />
</system.webServer>
</configuration>
Please note, it is vital that you use back-slashes when setting the path attribute. Additionally, we want to set the responseMode to File. The existingRepsonse attribute on the httpErrors element tells IIS to read the file from disk, then immediately overwrite the current response with the contents of the file.
The next time you deploy your Hugo site to Azure running an IIS instance, you should have all the necessary parts required to respond semantically to your users, whether they be human or otherwise.
As a final checklist for those that need it, remember these steps:
static folder. Building the site will place the file at the root of your public folder.Good luck!
