Custom 404 page with content from md file #809

py20555sti · 2024-12-14T20:10:27Z

py20555sti
Dec 14, 2024

I use ananke through module import and set it as my theme, which works great.

I wanted to be able to customise the 404 page, so I've created a content/404.md file, that contains:

---
title: "404"
description: ""
featured_image: "/images/home.jpg"
---
Sorry, the page you're looking for doesn't exist.

but that results in a "Page Not Found" error (not the default 404 page):

This is surprising, as I can see that the custom 404 page was created in public/404/index.html and contains the information from the md file:

<!DOCTYPE html>
<html lang="en-us">
  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <title>404 | PY20555STI</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <meta name="description" content="Sorry, the page you&rsquo;re looking for doesn&rsquo;t exist.">
    <meta name="generator" content="Hugo 0.139.3">
    
    
    
    
      <meta name="robots" content="noindex, nofollow">
    
    

    
<link rel="stylesheet" href="/ananke/css/main.min.css" >



    

    
      
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


    

    

    
      <link rel="canonical" href="http://localhost:1313/404/">
    

    <meta property="og:url" content="http://localhost:1313/404/">
  <meta property="og:site_name" content="PY20555STI">
  <meta property="og:title" content="404">
  <meta property="og:description" content="Sorry, the page you’re looking for doesn’t exist.">
  <meta property="og:locale" content="en_us">
  <meta property="og:type" content="article">

  <meta itemprop="name" content="404">
  <meta itemprop="description" content="Sorry, the page you’re looking for doesn’t exist.">
  <meta itemprop="wordCount" content="8">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="404">
  <meta name="twitter:description" content="Sorry, the page you’re looking for doesn’t exist.">

	
  </head><body class="ma0 avenir bg-near-white development">

    

  
  
  
  <header class="cover bg-center" style="background-image: url('http://localhost:1313/images/home.jpg');">
    <div class="bg-black-60">
      <nav class="pv3 ph3 ph4-ns" role="navigation">
  <div class="flex-l justify-between items-center center">
    <a href="/" class="f3 fw2 hover-white no-underline white-90 dib">
      
        PY20555STI
      
    </a>
    <div class="flex-l items-center">
      

      
        <ul class="pl0 mr3">
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/" title="Home page">
              Home
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/about/" title="About page">
              About
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/posts/" title="Posts page">
              Posts
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/contact/" title="Contact page">
              Contact
            </a>
          </li>
          
        </ul>
      
      <div class="ananke-socials"></div>

    </div>
  </div>
</nav>

      <div class="tc-l pv6 ph3 ph4-ns">
        
          <div class="f2 f1-l fw2 white-90 mb0 lh-title">404</div>
          
        
      </div>
    </div>
  </header>


    <main class="pb7" role="main">
      
  <div class="flex-l mt2 mw8 center">
    <article class="center cf pv5 ph3 ph4-ns mw7">
      <header>
        <h1 class="f1">
          404
        </h1>
      </header>
      <div class="nested-copy-line-height lh-copy f4 nested-links mid-gray">
        <p>Sorry, the page you&rsquo;re looking for doesn&rsquo;t exist.</p>

      </div>
    </article>
  </div>

    </main>
    <footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
  <div class="flex justify-between">
  <a class="f4 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="http://localhost:1313/" >
    &copy;  PY20555STI 2024 
  </a>
    <div><div class="ananke-socials"></div>
</div>
  </div>
</footer>

  </body>
</html>

Furthermore, I am able to override the default 404 page, by placing a custom file in layouts/404.html, but if I try to include the content of md file in that custom 404, the same "Page Not Found" error happens.

Answered by davidsneighbour

Dec 17, 2024

I would hard code that image into 404.html - or is this template a theme you re-use? Then use a config variable in site.Params to define that image.

I think it's not possible to have individual images for various errors each. The 404 implementation of GoHugo is quite inflexible. You could use Javascript to evaluate what the current URL is and then build dynamic parts based on the path-elements. But everything else is a very static thing and I would just put it into 404.html and put everything you want to configure into data or i18n (depending on the re-use of the theme).

Now try to build a 403 error page ;)

View full answer

davidsneighbour · 2024-12-15T05:27:25Z

davidsneighbour
Dec 15, 2024
Maintainer

GoHugo does not support a content file for 404 errors (it's not planned to my knowledge). What you can do is something called a "headless page" for your content (option 3) or (what you already started) add the content to your custom 404 template (either directly or via one of these three options):

you could have a data/my/files/404.toml with variables and content and then load it in your 404.html via site.Data.my.files.404.variablename,
you could have a i18n/en.toml with language blocks and then use them in your 404.html via {{ i18n "language-particle" }}, or
you could have a content/headless/404.md (or any other path) and then use getPage to load it's page content and use build options to hide that headless page from being included anywhere on your site.

The first one is the easiest, the last one the most work. But the last one puts your content into the content directory, if you do anything else with it (like linting).

0 replies

davidsneighbour · 2024-12-15T05:29:32Z

davidsneighbour
Dec 15, 2024
Maintainer

In general: The page you created is available at yourdomain.com/404.html, so maybe all that you need to do, depending on your used webserver, is telling the webserver what page to use for a 404 error.

See this page for a list of common server configs.

1 reply

py20555sti Dec 16, 2024
Author

thank you for a prompt response @davidsneighbour.

In general: The page you created is available at yourdomain.com/404.html, so maybe all that you need to do, depending on your used webserver, is telling the webserver what page to use for a 404 error.

See this page for a list of common server configs.

I think this will not be possible in my setup, as I host it on github pages, and "Redirection to is automatic and not configurable".

However your first suggestion works well. I am able to connect the content of a file stored in data/files/404.yaml

- title: "PY20555STI"
  featured_image: "/images/home.jpg"
  Content: "This is content"

with the layout and render it correctly using the custom layout in layouts/404.html

{{ define "header" }}{{ partial "page-header.html" . }}{{ end }}
{{ define "main" }}
    <article class="center cf pv5 measure-wide-l">
      <h1>
        {{ range $category, $404data := .Site.Data.files }}
        <p>{{ $category | title }}</p>

          {{ range $404data }}
            title: {{ .title }}
            </br>
            featured_image: {{ .featured_image }}
            {{ $featured_image := .featured_image }}
            </br>
            Content: {{ .Content }}
          {{ end }}
        {{ end }}
      </h1>
    </article>
{{ end }}

The missing link is how to use the value of feature_image as specified in the yaml file so that it's picked up by the theme.

So far the site renders as:

Interestingly, the removal of page-header macro ({{ define "header" }}{{ partial "page-header.html" . }}{{ end }}) makes the layout look correct (title background has the expected size, and the footer is at the bottom of the page):

thank you

py20555sti · 2024-12-17T07:52:51Z

py20555sti
Dec 17, 2024
Author

I've spent some time playing around with the layout file and now can get the image to display with:

{{ define "header" }}{{ partial "page-header.html" . }}{{ end }}
{{ define "main" }}
  <!-- Banner image at the top -->
  {{ range $category, $404data := .Site.Data.files }}
    {{ range $404data }}
      {{ if .featured_image }}
        <!-- Add the image above the main content, before the header -->
              <div class="cover bg-top">
                <img src="{{ .featured_image }}" alt="Featured Image" style="width: 100%; height: auto;">
              </div>
      {{ end }}
    {{ end }}
  {{ end }}
    <article class="center cf pv5 measure-wide-l">
      <h1>
        {{ range $category, $404data := .Site.Data.files }}
        <p>{{ $category | title }}</p>

          {{ range $404data }}
            {{ if .featured_image }}
            {{ end }}
            title: {{ .title }}
            </br>
            featured_image: {{ .featured_image }}
            {{ $featured_image := .featured_image }}
            </br>
            Content: {{ .Content }}
          {{ end }}
        {{ end }}
      </h1>
    </article>
{{ end }}

It's not part of the top menu background (neither is the 404 text):

This is very much that dog in a lab coat moment, but I think I need to find a way to modify the header class, as now it is:

  <header>
    <div class="bg-black">
      <nav class="pv3 ph3 ph4-ns" role="navigation">
  <div class="flex-l justify-between items-center center">
    <a href="/" class="f3 fw2 hover-white no-underline white-90 dib">
      
        PY20555STI
      
    </a>
    <div class="flex-l items-center">
      

      
        <ul class="pl0 mr3">
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/" title="Home page">
              Home
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/about/" title="About page">
              About
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/posts/" title="Posts page">
              Posts
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/contact/" title="Contact page">
              Contact
            </a>
          </li>
          
        </ul>
      
      <div class="ananke-socials"></div>

    </div>
  </div>
</nav>

    </div>
  </header>

but looking at the source of other pages, they have an image embedded in them:

 <header class="cover bg-top" style="background-image: url('http://localhost:1313/images/about.jpg');">

Similarly, the title comes from:

      <div class="tc-l pv4 pv6-l ph3 ph4-ns">
        <h1 class="f2 f-subheadline-l fw2 white-90 mb0 lh-title">
          404 Page not found
        </h1>
        
      </div>

which doesn't exist in my custom 404.

0 replies

davidsneighbour · 2024-12-17T08:11:43Z

davidsneighbour
Dec 17, 2024
Maintainer

Again, you might have better results with a data/i18n solution for the contents of a 404 page. Mostly because the 404 page is not your 404-content, but the page that could not be loaded, with some 404 content. This topic comes up often on the Gohugo discourse.

My own 404 pages are the template and then either site.Data or i18n setups and specific content loaded via getpage.

The 404.html is a template just for the 404 page, so it's easy to put content in there instead.

3 replies

py20555sti Dec 17, 2024
Author

My understand is that using data/i18n will help with modifying the text of the 404, do you think it will also make the background image tweaks easier. I should have stated it at the beginning, my main motivation when embarking on this quest, was to be able to display a custom image for page not found.

Thank you.

davidsneighbour Dec 17, 2024
Maintainer

I would hard code that image into 404.html - or is this template a theme you re-use? Then use a config variable in site.Params to define that image.

I think it's not possible to have individual images for various errors each. The 404 implementation of GoHugo is quite inflexible. You could use Javascript to evaluate what the current URL is and then build dynamic parts based on the path-elements. But everything else is a very static thing and I would just put it into 404.html and put everything you want to configure into data or i18n (depending on the re-use of the theme).

Now try to build a 403 error page ;)

Answer selected by py20555sti

py20555sti Dec 17, 2024
Author

OK, hard-coded html it is and it does the trick. Thank you for your help!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom 404 page with content from md file #809

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Custom 404 page with content from md file #809

py20555sti Dec 14, 2024

Replies: 4 comments · 4 replies

davidsneighbour Dec 15, 2024 Maintainer

davidsneighbour Dec 15, 2024 Maintainer

py20555sti Dec 16, 2024 Author

py20555sti Dec 17, 2024 Author

davidsneighbour Dec 17, 2024 Maintainer

py20555sti Dec 17, 2024 Author

davidsneighbour Dec 17, 2024 Maintainer

py20555sti Dec 17, 2024 Author

py20555sti
Dec 14, 2024

Replies: 4 comments 4 replies

davidsneighbour
Dec 15, 2024
Maintainer

davidsneighbour
Dec 15, 2024
Maintainer

py20555sti Dec 16, 2024
Author

py20555sti
Dec 17, 2024
Author

davidsneighbour
Dec 17, 2024
Maintainer

py20555sti Dec 17, 2024
Author

davidsneighbour Dec 17, 2024
Maintainer

py20555sti Dec 17, 2024
Author