Customize 404 page and add search box

[VictorZakharov]

A likely scenario is migrating to Hugo from another platform. I already mapped the URLs from old to new and tested redirects. But let's suppose some of the URLs were missed. I would like to give my users a chance to search content when they arrive at 404 page, rather than simply leaving (which many would do otherwise).

I tried modifying 404.html template and add partial search result.

{{ define "main" }}
<main class="main">  
  <div class="not-found">
    {{ partial "search/site-search" . }}
    <h1 class="h1 title">404</h1>
    <h6 class="h6 subtitle">Page not found</h6>
  </div>
</main>
{{ partial "script/home-script" . }}

And got this:

Doesn't look great, but it works. Problem is with mobile view where it shows up but doesn't do anything (which might be by design, users should use search icon at the top). Is there a clean way to remove this search box on mobile and display mobile specific hint to use search? Or have a working search on both mobile and desktop. Last option is better for consistent UX.

[VictorZakharov]

I did a workaround using custom SCSS. Added the following at the end of \assets\scss\custom.scss:

.not-found {
  .single__contents {
    padding-left: 10%;
    padding-right: 10%;
    p {
      text-align: center;
    }
  }  

  @media only screen and (max-width: 769px) {
    .search {
      display: none;
    }
  }
}

Content of themes\zzo\layouts\404.html

{{ define "main" }}
<main class="main">
  <div class="not-found">
    {{ partial "search/site-search" . }}
    <h1 class="h1 title">404</h1>
    <h6 class="h6 subtitle">Page not found</h6>
    <article class="single__contents">
      <p>I am sorry, the page you were looking for was not found.</p>
      <!-- More content here specific to my site -->
    </article>
  </div>
</main>
{{ partial "script/home-script" . }}
{{ end }}

Demo: neolisk.blog.

[khannzxc]

Hey i am using netlify to build my site but my searchbox is not working there what i am missing?

my netlify.toml code is

[build]
    publish = "exampleSite/public"
    command = "cd exampleSite && hugo --gc --themesDir ../.."

[build.environment]
    HUGO_VERSION = "0.84.4"
    HUGO_THEME = "repo"
    HUGO_BASEURL = "/"

In local host the search is working fine as seen below