Issue with redirecting to various blog posts on click in django

Question

I'm trying to create a simple blog which shows various articles on the homepage. The index page as of now holds the title and sub-title of various articles. I want it to display the entire content of the article on click. This is the error that I'm running into on the homepage.

NoReverseMatch at /
Reverse for 'article' with arguments '('',)' not found. 1 pattern(s) tried: ['(?P<article_id>[0-9]+)$']

This is the content of urls.py in the pages app that I've created.

from django.urls import path
from . import views

urlpatterns=[

    path('',views.index,name='index'),
    path('<int:article_id>',views.article,name='article'),
    path('about',views.about,name='about'),

]

This is my views.py

from django.shortcuts import render,get_object_or_404
from django.http import HttpResponse
from . models import Post
# Create your views here.
def index(request):
    post=Post.objects.all()

    context = {
        'post' : post
    }

    return render(request,'pages/index.html',context)

def article(request,article_id):

    article=get_object_or_404(Post,pk=article_id)

    context = {
        'article' : article
    }
    return render(request,'pages/article.html',context)


def about(request):
    return render(request,'pages/about.html')

As you can probably see, I'm referring to the content of the articles through an article_id and the data regarding the particular post is fetched from the database.

This is my index.html, which should redirect to the content of the specific post on click.

    {%extends 'base.html'%}
    {%load static%}
    {%block content%}

    <!-- Page Header -->
    <header class="masthead" style="background-image: url({% static 'img/home-bg.jpg' %})">
      <div class="overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-md-10 mx-auto">
            <div class="site-heading">
              <h1>Clean Blog</h1>
              <span class="subheading">A Blog Theme by Start Bootstrap</span>
            </div>
          </div>
        </div>
      </div>
    </header>

<!-- Posts -->

    {% if post %}
      {% for posts in post %}
        <div class="container">
          <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
              <div class="post-preview">
                <a href="{% url 'article' article.id%}">
                  <h2 class="post-title">
                    {{posts.title}}
                  </h2>
                  {%if posts.subtitle%}
                    <h3 class="post-subtitle">
                      {{posts.subtitle}} 
                    </h3>
                  {%endif%}
                </a>
                <p class="post-meta">Posted by
                  <a href="#">{{posts.postby}}</a>
                  on {{posts.date}}</p>
              </div>
              <hr>
            </div>
          </div>
        </div>


      {% endfor %}
    {%endif%}       
            <!-- Pager -->
          <div class="container">
            <div class="row">
              <div class="col-lg-8 col-md-10 mx-auto">
                <div class="clearfix">
                  <a class="btn btn-primary float-right" href="#">Older Posts &rarr;</a>
                </div>
              </div>
            </div>
          </div>

      <hr>
    {%endblock%} 

However though, I'm getting the required page when I type in localhost:8000/1 or localhost:8000/2 manually just like how I want it. But the problem is that, it does not redirect on click. My best guess is that this

<a href="{% url 'article' article.id%}">

is creating the problem.

All suggestions are welcome!. Thank you.