Broken paginator links in production; links work in dev environment

support
1

When using pagination on my development machine, the links produced by Hugo work as expected.

https://www.fws.gov/images/working-pagination.gif(image larger than 4096KB)

As soon as I publish my site to my server I find that the relative links created by the paginator are broken. See the URL bar in the lower right show the incorrect URL: https://www.fws.gov/southeast/southeast/articles/page/2.

An animated gif showing pagination broken with erroneous URLs for page links

I see a slew of recent paginator issues, but mine seems to be slightly different. My config lists HTML first in my output formats for each content type. Not sure if it’s relevant, but I also recently switched from canonifyURLS torelativeURLS.

config.yml

relativeURLS: true

outputs:
  home:
    - html
    - rss
    - js
  page:
    - html
  section:
    - html
    - rss
    - js
2

Do you understand what relativeURLs means?

3

Yes, it rewrites a url like /css/styles.css to the appropriate relative path, e.g. ../../css/styles.css according to the location of the file.

That also doesn’t explain why the same template would yield working links on a dev server and not in production. It seems to be a relativeURL issue given the output URL in production.

4

Try removing southeast from the end of your baseURL, rebuild and redeploy.

5

My mac crashed this morning after an update so I’m doing a restore and will have to wait a while to try anything new…

I can’t imagine removing southeast from my baseURL is the fix here. That value has been constant for the last three years without any issues. None of the other links throughout my site suffer from this issue of duplicative southeast in the URL.

6

What I noticed is that your 404 stopped 404ing when I removed one southeast/ from the URL. So my assumption is that string is also in your base url (since it’s not shown above). When your computer comes back give it a shot. :stuck_out_tongue_winking_eye:

7

That may well be a server configuration rather than something Hugo related.

Anything below /southeast that results in a 404 is redirected to our “Page not found” page. Since we’re only a slice of a larger organization anything other than 404s below /southeast are redirected to a more generic 404 page.

That sounded convoluted as I typed it. I’m not sure how much sense it made :expressionless:

(I’m uploading the output of Hugo to a web server over FTP rather than using Hugo’s server in production.)

1 Like
8

Here’s the working URL:

https://www.fws.gov/southeast/articles/page/2/

This is all making me want to go camping BTW…

9

Haha! I’m glad to hear of your interest in the outdoors!

Correct, the pages are built as expected, it’s the URL output from the .Paginator that seems to be the issue.

Specifically it’s this bit:

<a href="{{ $element.URL }}">{{ $element.PageNumber }}</a>

Full custom paginator partial

{{ $pag := $.Paginator }}
{{ if gt $pag.TotalPages 1 }}
<ul class="pagination">
  {{ with $pag.First }}
  <li {{ if not $pag.HasPrev }}class="disabled"{{ end }}>
    <a href="{{ .URL }}" aria-label="First"><span aria-hidden="true">&laquo;&laquo;</span></a>
  </li>
  {{ end }}
  <li {{ if not $pag.HasPrev }}class="disabled"{{ end }}>
    <a href="{{ if $pag.HasPrev }}{{ $pag.Prev.URL }}{{ end }}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
  </li>
  {{ range $index, $element := $pag.Pagers }}
  {{ $less := lt (sub $pag.PageNumber $index) 4 }}
  {{ $more := gt (sub $pag.PageNumber $index) -4 }}
  {{ if and $less $more }}
  <li {{ if eq $element $pag }}class="active"{{ end }}>
    <a href="{{ $element.URL }}">{{ $element.PageNumber }}</a>
  </li>
  {{ end }}
  {{ end }}
  <li {{ if not $pag.HasNext }}class="disabled"{{ end }}>
    <a href="{{ if $pag.HasNext }}{{ $pag.Next.URL }}{{ end }}" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
    </a>
  </li>
  {{ with $pag.Last }}
  <li {{ if not $pag.HasNext }}class="disabled"{{ end }}>
    <a href="{{ .URL }}" aria-label="Last"><span aria-hidden="true">&raquo;&raquo;</span></a>
  </li>
  {{ end }}
</ul>
{{ end }}
10

Nice that you guys are providing WIA-ARIA (though I’m aware some level of WCAG is mandatory for dot govs). If it was working for three years then stopped I’d look 1) at where specifically you dropped the files then 2) if the issue persists with the Hugo version you’ve been using to build the site previously then 3) cast angry glances at the person managing the server config and demand they fix it.

11

Yes, the U.S. Federal Government in the updated compliance requirements to follow WCAG AA last year.

I’m 3/4 of the way through my restore, only 2 hours to go! I’ll certainly give your suggestions a shot and report back. Thanks again for your time and consideration. The strangest part is I only experience this in production, not on the dev server, which lends credence to your suggestion that this could be related to the baseURL.

1 Like
12

I removed the BaseURL and everything is back in shape. The one thing I was still using it for after moving to relative paths was to include the BaseURL before any social media meta tags. In order for Facebook or Twitter to pull in an image from a page it must be an absolute. I just hard-coded in my production URL rather than using BaseURL.

1 Like
13

Glad you got it working! Hugo on my friend.