Django projelerinde sadece Python kodu yazmak yeterli değildir. Web uygulamalarının tasarımı için CSS, JavaScript, resim dosyaları, fontlar gibi dosyalar kullanılır. İşte bu dosyalara statik dosyalar (static files) denir.

1️⃣ Statik Dosya Nedir?

Statik dosyalar değişmeyen dosyalardır:

CSS dosyaları
JavaScript dosyaları
Resimler (jpg, png, svg)
Font dosyaları

Örneğin:

style.css
main.js
logo.png

2️⃣ Django’da Statik Dosya Mantığı

Django statik dosyaları özel bir sistemle yönetir. Bunun için:

STATIC_URL
STATICFILES_DIRS
STATIC_ROOT

ayarlarını kullanır.

3️⃣ settings.py Ayarları

settings.py dosyasını açın.

STATIC_URL = 'static/'

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

STATIC_ROOT = BASE_DIR / "staticfiles"

Açıklama:

Ayar	Ne İşe Yarar
STATIC_URL	Tarayıcıya sunulan URL yolu
STATICFILES_DIRS	Geliştirme sırasında kullanılan klasör
STATIC_ROOT	Production ortamında toplanan dosyalar

4️⃣ Proje Dizin Yapısı

Örnek proje yapısı:

proje/
│
├── static/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── main.js
│   └── img/
│       └── logo.png
│
├── templates/
│   └── index.html
│
└── manage.py

5️⃣ Template İçinde Static Kullanımı

HTML dosyasında statik dosya kullanmak için:

{% load static %}

CSS Bağlama

<link rel="stylesheet" href="{% static 'css/style.css' %}">

JavaScript Bağlama

<script src="{% static 'js/main.js' %}"></script>

Resim Kullanımı

<img src="{% static 'img/logo.png' %}" alt="Logo">

⚠ ÖNEMLİ: {% load static %} yazmayı unutursanız hata alırsınız.

6️⃣ Uygulama İçinde Static Kullanımı (App Bazlı)

Her uygulamanın içinde ayrı static klasörü olabilir.

blog/
│
├── static/
│   └── blog/
│       └── style.css

Template içinde kullanım:

<link rel="stylesheet" href="{% static 'blog/style.css' %}">

Django otomatik olarak uygulama içindeki static klasörlerini bulur.

7️⃣ Geliştirme Ortamında Statik Dosyalar

DEBUG=True iken Django statik dosyaları otomatik sunar.

Yani ekstra ayar yapmadan çalışır:

python manage.py runserver

8️⃣ Production Ortamında collectstatic

Canlı sunucuya geçerken Django tüm statik dosyaları tek klasörde toplar.

Komut:

python manage.py collectstatic

Bu komut:

Tüm app içindeki static dosyalarını
STATICFILES_DIRS içindekileri
STATIC_ROOT klasörüne kopyalar

Production ortamda web sunucusu (örneğin Nginx) bu klasörü servis eder.

9️⃣ Örnek Mini Uygulama

style.css

body {
    background-color: #f4f4f4;
    font-family: Arial;
}

h1 {
    color: darkgreen;
}

index.html

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <h1>Django Statik Dosya Örneği</h1>
</body>
</html>

Çalıştırdığınızda CSS uygulanacaktır.

🔟 En Sık Yapılan Hatalar

❌ 1. `{% load static %}` unutmak

Çözüm: Template başına ekleyin.

❌ 2. STATICFILES_DIRS yanlış tanımlamak

BASE_DIR doğru olmalı.

❌ 3. collectstatic çalıştırmamak

Production ortamda mutlaka çalıştırılmalı.

1️⃣1️⃣ Media Dosyaları ile Karıştırmayın

Statik dosya ≠ Kullanıcı yüklemeleri

Static	Media
CSS, JS, Logo	Kullanıcı profil resmi
Değişmez	Dinamik

Media için ayrı ayarlar gerekir (MEDIA_URL, MEDIA_ROOT).

🎯 Özet

Django statik dosya sistemi:

static klasörü oluşturulur
settings.py ayarlanır
Template içinde {% load static %} kullanılır
Production’da collectstatic çalıştırılır

Django'da statik dosyalar (CSS, JavaScript, resimler, fontlar vb.) uygulamanızın "kıyafetleridir". Django'nun statik dosyaları yönetme mantığı ilk başta biraz karmaşık gelebilir, ancak temel yapıyı anladığınızda oldukça mantıklı ve güçlüdür.

Bir web sitesi sadece HTML'den ibaret değildir. Tasarımı güzelleştirmek için CSS'e, etkileşim katmak için JavaScript'e ve görselleştirmek için resimlere ihtiyaç duyarız. Django'da bu tür dosyalara Statik Dosyalar (Static Files) adı verilir.

Bu rehberde, Django projelerinize statik dosyaları nasıl ekleyeceğinizi ve yöneteceğinizi adım adım inceleyeceğiz.

1. Temel Ayarlar (`settings.py`)

İlk olarak Django'ya statik dosyalarımızın nerede olduğunu ve onlara hangi URL üzerinden erişeceğini söylemeliyiz. Projenizin ana dizinindeki settings.py dosyasını açın ve şu ayarları bulun (veya ekleyin):

Python
# settings.py

# Statik dosyalara tarayıcıdan erişmek için kullanılacak URL ön eki.
STATIC_URL = 'static/'

# Django'nun statik dosyaları arayacağı ek klasörler.
# Proje ana dizininde 'static' adında bir klasör oluşturduğumuzu varsayıyoruz.
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

Not: STATIC_URL web sitenizin adres çubuğunda görünecek yoldur (örneğin: site.com/static/css/style.css). STATICFILES_DIRS ise Django'nun dosyaları fiziksel olarak bilgisayarınızda arayacağı yerdir.

2. Klasör Yapısını Oluşturma

settings.py dosyasında belirttiğimiz gibi, proje ana dizininde (manage.py dosyasının bulunduğu yer) static adında bir klasör oluşturun. Düzenli çalışmak için bu klasörün içine alt klasörler eklemeniz iyi bir pratiktir:

Plaintext

benim_projem/
├── manage.py
├── benim_projem/
│   ├── settings.py
│   └── urls.py
├── static/                <-- Burayı oluşturun
│   ├── css/
│   │   └── style.css      <-- CSS dosyanız
│   ├── js/
│   │   └── script.js      <-- JS dosyanız
│   └── images/
│       └── logo.png       <-- Resim dosyanız
└── templates/
    └── index.html

3. Şablonlarda (Templates) Statik Dosyaları Kullanma

Dosyalarımızı yerleştirdikten sonra, sıra onları HTML şablonlarımızda çağırmaya geldi. Django'da statik bir dosyayı çağırmak için özel şablon etiketleri (template tags) kullanırız.

HTML dosyanızın (örneğin index.html) en üstüne şu satırı ekleyerek statik dosya etiketlerini yükleyin:

HTML

{% load static %}

Artık {% static 'dosya_yolu' %} etiketini kullanarak dosyalarınızı çağırabilirsiniz. İşte tam bir örnek:

HTML
{% load static %}
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Django Statik Dosya Eğitimi</title>
    
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>

    <h1>Django'ya Hoş Geldiniz!</h1>
    
    <img src="{% static 'images/logo.png' %}" alt="Site Logosu">

    <script src="{% static 'js/script.js' %}"></script>
    
</body>
</html>

4. Geliştirme (Development) vs. Canlı Ortam (Production)

Statik dosyalar konusunda Django'ya yeni başlayanların en çok kafasını karıştıran nokta burasıdır.

Geliştirme Ortamında (DEBUG = True): Kendi bilgisayarınızda çalışırken python manage.py runserver komutunu kullandığınızda, Django statik dosyaları sizin için otomatik olarak bulur ve sunar.
Canlı Ortamda (DEBUG = False): Sitenizi gerçek bir sunucuya yüklediğinizde Django, güvenlik ve performans nedenleriyle statik dosyaları kendi başına sunmaz. Nginx veya Apache gibi bir web sunucusunun bu işi yapması gerekir.

Canlı Ortam İçin `collectstatic` Komutu

Canlı ortama geçerken tüm uygulamalarınızdaki (örneğin admin panelinin CSS'leri dahil) ve STATICFILES_DIRS içindeki tüm statik dosyaları tek bir yerde toplamanız gerekir.

Bunun için settings.py dosyasına şunu eklersiniz:

Python

# Dosyaların toplanacağı ana dizin (Genellikle canlı sunucuda kullanılır)
STATIC_ROOT = BASE_DIR / 'staticfiles'

Ve ardından terminalde şu komutu çalıştırırsınız:

Bash

python manage.py collectstatic

Bu komut, her yerdeki statik dosyaları alır ve staticfiles adındaki klasöre kopyalar. Sunucunuzu da (Nginx vb.) doğrudan bu klasördeki dosyaları ziyaretçilere gösterecek şekilde yapılandırırsınız.

Özetle; CSS, JS veya resim eklemek istediğinizde:

Proje dizininde static klasörüne dosyanızı koyun.
HTML dosyanızın en üstüne {% load static %} yazın.
Dosyayı {% static 'yol/dosya_adi.uzanti' %} şeklinde çağırın.

🌙 Django – Ramazan Temalı Statik Tasarım Uygulaması

Bu çalışmada Django projen için Ramazan ayına özel modern ve şık bir statik tasarım hazırlıyoruz.

İçerik:

Özel Ramazan arka plan tasarımı
Hilal animasyonu
Altın tonlu başlık stili
Kart tasarımı (İftar – Sahur Bilgisi)
Responsive (mobil uyumlu) yapı

Bu örnek 11. sınıf seviyesine uygun ama görsel olarak profesyonel görünecek şekilde hazırlanmıştır.

📁 1️⃣ Proje Klasör Yapısı

proje/
│
├── static/
│   ├── css/
│   │   └── ramazan.css
│   ├── js/
│   │   └── ramazan.js
│   └── img/
│       └── mosque.png
│
├── templates/
│   └── index.html
│
└── manage.py

⚙ 2️⃣ settings.py Ayarı

STATIC_URL = 'static/'

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

🎨 3️⃣ Ramazan CSS Tasarımı (ramazan.css)

body {
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364);
    font-family: 'Segoe UI', sans-serif;
    color: white;
    text-align: center;
}

/* Üst Başlık */
.header {
    padding: 40px 20px;
}

.header h1 {
    font-size: 40px;
    color: gold;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}

/* Hilal */
.moon {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at 40% 40%, #fff, #ddd);
    border-radius: 50%;
    position: relative;
    margin: 20px auto;
}

.moon::after {
    content: "";
    width: 120px;
    height: 120px;
    background: #203a43;
    border-radius: 50%;
    position: absolute;
    left: 25px;
}

/* Kart Tasarımı */
.card {
    background: rgba(255, 255, 255, 0.1);
    margin: 20px auto;
    padding: 25px;
    width: 300px;
    border-radius: 15px;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    transition: 0.3s;
}

.card:hover {
    transform: scale(1.05);
}

.card h2 {
    color: gold;
}

⚡ 4️⃣ JavaScript (ramazan.js)

document.addEventListener("DOMContentLoaded", function() {
    console.log("Ramazan Temalı Site Hazır 🌙");
});

🖼 5️⃣ HTML Template (index.html)

{% load static %}
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Ramazan Özel</title>
    <link rel="stylesheet" href="{% static 'css/ramazan.css' %}">
</head>
<body>

    <div class="header">
        <h1>🌙 Ramazan Ayı Mübarek Olsun</h1>
        <div class="moon"></div>
    </div>

    <div class="card">
        <h2>🕌 İftar Vakti</h2>
        <p>19:12</p>
    </div>

    <div class="card">
        <h2>🌅 Sahur Vakti</h2>
        <p>05:03</p>
    </div>

    <script src="{% static 'js/ramazan.js' %}"></script>
</body>
</html>

✨ Görsel Sonuç

Bu tasarımda:

Gece mavisi degrade arka plan
Parlayan altın başlık
CSS ile yapılmış hilal şekli
Cam efekti (glassmorphism) kart tasarımı
Hover animasyonu

Profesyonel bir Ramazan teması oluşur.

🌙 Django – Bootstrap 5 ile Modern Ramazan Teması

Şimdi tasarımı bir üst seviyeye taşıyoruz 🚀
Bootstrap 5 kullanarak modern, responsive ve profesyonel bir Ramazan teması hazırlıyoruz.