index.php not linking to single.php single page post - php

Question

Hello guys I'm working on a wordpress theme/template and I'm having problems when clicking on blog post title in index.html. It will redirect me to correct link on address bar however, single.php is not displaying anything. I'm not sure if the page is getting called or what's actually going on. If you can weight your 2cents thanks here's the link to wordpress blog: http://pctechtips.org/testblog
index.php
<?php get_header(); ?>
<!-- jumbotron -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4"><?php bloginfo('name'); ?></h1>
<p class="lead"><?php bloginfo('description'); ?></p>
</div>
</div>
<!-- /jumbotron -->
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-8">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<!-- Blog Post -->
<div class="mb-4">
<div class="card-body">
<a href="<?php the_permalink(); ?>">
<h2 class="card-title"><?php the_title(); ?></h2>
</a>
<p class="blog-post-meta">
<?php echo Date('M d, Y'); ?> by <?php the_author(); ?>
</p>
<!-- feature image -->
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumb">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<p><?php __('No Post Found!'); ?></p>
<?php endif; ?>
<!-- Pagination -->
<ul class="pagination justify-content-center mb-4">
<li class="page-item">
<a class="page-link" href="#">← Older</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Newer →</a>
</li>
</ul>
</div>
<!-- Sidebar Widgets Column -->
<div class="col-md-4">
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<?php get_footer(); ?>
single.php
<?php get_header(); ?>
<!-- jumbotron -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4"><?php bloginfo('name'); ?></h1>
<p class="lead"><?php bloginfo('description'); ?></p>
</div>
</div>
<!-- /jumbotron -->
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="blog-post col-md-8">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<!-- Blog Post -->
<div class="blog-post-title mb-4">
<h2 class="card-title"><?php the_title(); ?></h2>
<p class="blog-post-meta">
<?php echo Date('M d, Y'); ?> by <?php the_author(); ?>
</p>
<!-- feature image -->
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumb">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<p class="card-text"><?php the_content(); ?></p>
<hr>
<!-- comments -->
<?php comments_templates(); ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<p><?php __('No Post Found!'); ?></p>
<?php endif; ?>
<!-- Pagination -->
<ul class="pagination justify-content-center mb-4">
<li class="page-item">
<a class="page-link" href="#">← Older</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Newer →</a>
</li>
</ul>
</div>
<!-- Sidebar Widgets Column -->
<div class="col-md-4">
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<?php get_footer(); ?>