Создадим новую папку templates в папке приложения blog. В ней создадим 3 файла: blog_category.html, blog_detail.html и blog_index.html.

blog_category.html

Добавим в файл blog_category.html следующее содержимое:

{% extends "base.html" %}
{% block page_content %}
<div class="col-md-8 offset-md-2">
    <h1>{{ category | title }}</h1>
    <hr>
    {% for post in posts %}
        <h2><a href="/{% url 'blog_detail' post.pk%}">{{ post.title }}</a></h2>
        <small>
            {{ post.created_on.date | date:"d.m.Y" }} |&nbsp;
            Категории:&nbsp;
            {% for category in post.categories.all %}
            <a href="/{% url 'blog_category' category.name %}">
                {{ category.name }}
            </a>&nbsp;
            {% endfor %}
        </small>
        <p>{{ post.body | slice:":400" }}...</p>
    {% endfor %}
</div>
{% endblock %}

В строчке 4 выводим название категории через фильтр title, который заставляет название категории выводиться с большой буквы.

В строчке 17 фильтр slice обрезает текст поста до 400 символов.

blog_detail.html

Добавим в файл blog_detail.html следующее содержимое:

{% extends "base.html" %}
{% block page_content %}
<div class="col-md-8 offset-md-2">
    <h1>{{ post.title }}</h1>
    <small>
        {{ post.created_on.date | date:"d.m.Y" }} |&nbsp;
        Категории:&nbsp;
        {% for category in post.categories.all %}
        <a href="/{% url 'blog_category' category.name %}">
            {{ category.name }}
        </a>&nbsp;
        {% endfor %}
    </small>
    <p>{{ post.body | linebreaks }}</p>
    <h3>Оставьте свой комментарий</h3>
    <form action="/blog/{{ post.pk }}/" method="post">
        {% csrf_token %}
        <div class="form-group">
            {{ form.author }}
        </div>
        <div class="form-group">
            {{ form.body }}
        </div>
        <button type="submit" class="btn btn-primary">Отправить</button>
    </form>
    <h3>Комментарии:</h3>
    {% for comment in comments %}
    <p>
        {{comment.created_on.date | date:"d.m.Y" }}&nbsp;
        <b>{{ comment.author }}</b> добавил:
    </p>
    <p>{{ comment.body }}</p>
    <hr>
    {% empty %}
    <p>Пока нет комментариев</p>
    {% endfor %}
</div>
{% endblock %}

blog_index.html

Добавим в файл blog_index.html следующее содержимое:

{% extends "base.html" %}
{% block page_content %}
<div class="col-md-8 offset-md-2">
    <h1>Блог</h1>
    <hr>
    {% for post in posts %}
    <h2><a href="/{% url 'blog_detail' post.pk%}">{{ post.title }}</a></h2>
    <small>
        {{ post.created_on.date | date:"d.m.Y" }} |&nbsp;
        Категории:&nbsp;
        {% for category in post.categories.all %}
        <a href="/{% url 'blog_category' category.name %}">
            {{ category.name }}
        </a>&nbsp;
        {% endfor %}
    </small>
    <p>{{ post.body | slice:":400" }}...</p>
    {% endfor %}
</div>
{% endblock %}

Изменим содержимое файла base.html (папка my-portfolio\personal_portfolio\templates), чтобы добавить ссылку на блог и добавить класс active для ссылок на страницу проектов и страницу блога (строки 11, 14 и 15):

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="/{% url 'project_index' %}">Мое персональное портфолио</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item {% if request.path == '/projects/' %}active{% endif %}">
              <a class="nav-link" href="/{% url 'project_index' %}">Проекты</a>
            </li>
            <li class="nav-item {% if request.path == '/blog/' %}active{% endif %}">
              <a class="nav-link" href="/{% url 'blog_index' %}">Блог</a>
            </li>
          </ul>
        </div>
    </div>
</nav>
<div class="container">
    {% block page_content %}{% endblock %}
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>