djangoの{% load static %}が読み込めず、そのまま画面に表示されてしまいます。

前提・実現したいこと

{% load static %}で静的ファイルを読み込みたい。

発生している問題

{% load static %}が上手くできず、画面にそのまま表示されてしまいます。考えられる原因は何でしょうか？

初めてフレームワーク？を触るのですが、課題で丸投げされて困っています。
お手数ですが、解決方法を詳細まで教えていただけると助かります。

該当のソースコード

HTML
1!DOCTYPE html>
2{% load static %}
3
4<html lang="ja">
5
6    <head>
7        <meta charset="utf-8" />
8        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
9        <meta name="description" content="" />
10        <meta name="author" content="" />
11
12        <title>{% block title %}{% endblock %}</title>
13
14        <!-- Bootstarp core CSS -->
15        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
16
17        <!-- Custom fonts for this remplate -->
18        <link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet" />
19        <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet" />
20
21        <!-- Custom styles for this template -->
22        <link rel="stylesheet" href="{% static 'css/styles.css' %}">
23        
24        <!-- My style -->
25        <link rel="stylesheet" type="text/css" href="{% static 'css/mystyle.css' %}">
26        {% block head %}{% endblock %}
27    </head>

###settings.pyの設定

python
1BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
2
3INSTALLED_APPS = [
4    'django.contrib.admin',
5    'django.contrib.auth',
6    'django.contrib.contenttypes',
7    'django.contrib.sessions',
8    'django.contrib.messages',
9    'django.contrib.staticfiles',
10
11    'diary.apps.DiaryConfig',
12]
13
14STATIC_URL = '/static/'
15
16# STATIC_DIR = os.path.join(BASE_DIR, "static")
17
18STATICFILES_DIRS = [
19    os.path.join(BASE_DIR,'static')
20]
21