Using Hugo, the default pagination template does not produce clickable links

I am using Hugo on my personal website. I want to add pagination to the list of blog posts. When I add the paginator and default template to the code The page is generated but the pagination links are not clickable.

When I view the source of the page I see links to the next page of posts. When I click on one of the paginator links (in the view page source), I am taken to the source code page of the next page.

I am using version

└─(17:09:51 on feature-create-default-post ✹ ✭)──> hugo version
Hugo Static Site Generator v0.80.0/extended darwin/amd64 BuildDate: unknown

Here is my list file for my blog posts:

{{ define "main" }}
<h2>{{ .Title }}</h2>
<div class="posts-list">
    {{ range .Paginator.Pages }}
        <div class="post">
            {{ partial "post_summary.html" . }}
            <p></p>
            <p></p>
        </div>
    {{ end }}
</div>
{{ template "_internal/pagination.html" . }}
{{ end }}

And here is the post_summary.html partial

<article>
    <header>
        <div class="date">
            {{ .PublishDate.Format "Jan. 2, 2006" }}
        </div>
      <h1>
        <a href="{{ .RelPermalink }}">{{ .Title }}</a>
      </h1>
    </header>
    {{ .Summary }}
  </article>

And here is the config.toml file

baseURL = "https://portfolio.novogrodsky.net/"
languageCode = "en-us"
title = "My New Hugo Site"

theme = "hugo-theme-console"

#adding pagination
paginate = 3

[params]
  # Cutting off the page title to two chars for mobile (console-demo -> co)
  titleCutting = true
  twitter = "testing"

  # Making sure my shortcodes can emmit html to the generated page.
  [markup.goldmark.renderer]
  unsafe= true
  
  [[params.navlinks]]
  name = "about/"
  url = "about/"

  [[params.navlinks]]
  name = "posts/"
  url = "posts/"
  
  [[params.navlinks]]
  name = "photos/"
  url = "photos/"

  [[params.navlinks]]
  name = "DesignChallenge/"
  url = "design-challenge/"

[permalinks]
  posts = "posts/:year/:month/:slug"

I use this option to test my site locally

hugo server --disableFastRender --buildDrafts

Here is a screen print of the generated list of posts

The pagination links on the bottom are not clickable.

But the source code of the generated page has the pagination links and they do take me to the source code of the next page of posts.

<!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">
    <title>My New Hugo Site/posts/</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <meta name="googlebot" content="index,follow,snippet,archive">
    
    <link rel="stylesheet" href="http://localhost:1313/hugo-theme-console/css/terminal-0.7.1.min.css">
    <link rel="stylesheet" href="http://localhost:1313/hugo-theme-console/css/animate-3.7.2.min.css">
    <link rel="stylesheet" href="http://localhost:1313/hugo-theme-console/css/console.css">
    
    
      <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
       
      <link href="http://localhost:1313/posts/index.xml" rel="alternate" type="application/rss+xml" title="My New Hugo Site" />
    <meta property="og:title" content="Posts" />
<meta property="og:description" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://localhost:1313/posts/" />


<meta name="twitter:title" content="Posts"/>
<meta name="twitter:description" content=""/>

</head>
<body class="terminal">
    <div class="container">
        <div class="terminal-nav">
          <header class="terminal-logo">
            <div class="logo terminal-prompt">
              
              
              <a href="http://localhost:1313/" class="no-style site-name">My New Hugo Site</a>:~# <a href='http://localhost:1313/posts'>posts</a>/</div></header>
          <nav class="terminal-menu">
            <ul vocab="https://schema.org/" typeof="BreadcrumbList">
                
                <li><a href="http://localhost:1313/about/" typeof="ListItem">about/</a></li>
                
                <li><a href="http://localhost:1313/posts/" typeof="ListItem">posts/</a></li>
                
                <li><a href="http://localhost:1313/photos/" typeof="ListItem">photos/</a></li>
                
                <li><a href="http://localhost:1313/design-challenge/" typeof="ListItem">DesignChallenge/</a></li>
                
            </ul>
          </nav>
        </div>
    </div>

    <div class="container animated zoomIn fast">
        
<h2>Posts</h2>
<div class="posts-list">
    
        <div class="post">
            <article>
    <header>
        <div class="date">
            Jul. 7, 2020
        </div>
      <h1>
        <a href="/posts/2020/07/status-of-design-challenge/">Status of Design Challenge</a>
      </h1>
    </header>
    Hello, I am just giving an update on the design challenge.
It is going well. The ability to publish this site quickly has really helped making the design challenge a reality. I have learned a lot about CSS, HTML5, and Markdown. They work well together.
I look forward to continuing this challenge.
  </article>
            <p></p>
            <p></p>
        </div>
    
        <div class="post">
            <article>
    <header>
        <div class="date">
            Jun. 14, 2020
        </div>
      <h1>
        <a href="/posts/2020/06/content-for-desing-challenge/">Content for Desing Challenge</a>
      </h1>
    </header>
    Summary (h1 header) This is my first experiment with CSS and design. I generated this Ipsum Loren from Lorem Markdownum. The links do not go to live pages.
 O penates includit sunt Graias contemptus rigidoque (h1 header) Tasks
 Bacon ipsum dolor amet shank Pig prosciutto Flank ground round   First Term This is the definition of the first term. Second Term This is one definition of the second term.
  </article>
            <p></p>
            <p></p>
        </div>
    
        <div class="post">
            <article>
    <header>
        <div class="date">
            Jun. 14, 2020
        </div>
      <h1>
        <a href="/posts/2020/06/starting-design-work/">Starting Design Work</a>
      </h1>
    </header>
    My first 100 Day Challenge
I was at the Digital Design Days recently and I was inspired by GMunk&rsquo;s talk. He talked about a 100 day chanllenge. The idea is do something for 100 days consistently. It does not have to be a big thing, just something. GMunk decided to take a photo each day for 100 days.
I have decided to design a page each day for 100 days. I will be learning a lot about CSS and Javascript.
  </article>
            <p></p>
            <p></p>
        </div>
    
</div>

<ul class="pagination">
  <li class="page-item">
    <a href="/posts/" class="page-link" aria-label="First"><span aria-hidden="true">&laquo;&laquo;</span></a>
  </li>
  <li class="page-item disabled">
    <a  class="page-link" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="/posts/">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="/posts/page/2/">2</a>
  </li>
  <li class="page-item">
    <a href="/posts/page/2/" class="page-link" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
  </li>
  <li class="page-item">
    <a href="/posts/page/2/" class="page-link" aria-label="Last"><span aria-hidden="true">&raquo;&raquo;</span></a>
  </li>
</ul>



        <div class="footer">
    Powered by <a href="https://gohugo.io/">Hugo</a> with
    <a href="https://github.com/mrmierzejewski/hugo-theme-console/">Console Theme</a>. 
</div>

    </div>
  </body>
</html>