Django Blog App With Administration Panel
Django Blog App With Administration Panel

https://github.com/cansugunn/django-personal-web

Django Blog With Dockerization, External Storage And Administration Panel

Architecture overview

  • Project layout: blogapp is the Django project (settings, URL configuration, WSGI/ASGI entrypoints), while blog is the primary application containing models, URLs, views, and app-scoped templates/static assets.
  • MVT flow: Requests are routed via blog/urls.py to function-based views in blog/views.py, which query ORM models (Blog, Category) and render templates under blog/templates/blog/. Templates extend a shared base layout in templates/base.html, and partials under templates/partials/ keep shared UI fragments (navbar, category list) DRY.
  • Static and media handling: Static assets are served from the project-level static/ directory configured in STATICFILES_DIRS, while uploaded media (e.g., blog images) are stored under upload/ and exposed through MEDIA_URL via django.conf.urls.static.static in development.

Domain model (OOP)

  • Category: Represents a logical grouping for posts with a user-friendly slug generated on save for URL stability (slugify). Categories are linked to blogs through a many-to-many relation, allowing each post to appear in multiple categories.
  • Blog: Encapsulates post metadata (title, hero image, HTML-rich description via RichTextField) plus publication toggles (is_active, is_home). Slugs are generated from titles, giving each blog a canonical, human-readable URL.

Request lifecycle and patterns

  1. Routing: URL patterns in blog/urls.py map semantic paths (/, /blogs, /blogs/<slug>, /category/<slug>) to dedicated view functions.
  2. View composition: Views in blog/views.py use the QuerySet API to fetch only active/home posts where appropriate and pass context dictionaries to templates, separating data retrieval from presentation.
  3. Template rendering: Templates extend base.html to inherit common head, scripts, and navbar content, illustrating the Template Method pattern within Django's templating engine. Partials (blog/partials/_blog.html, templates/partials/_navbar.html, templates/partials/_categories.html) demonstrate composition and DRY principles.
  4. Dynamic slugs and links: Slug fields allow clean URLs; template links are built with {% url %} tags so navigation remains stable if URL patterns change.

UI structure

  • Base shell: templates/base.html defines the document head, shared styles (Bootstrap + custom CSS), navbar include, and blocks for page-specific CSS/JS. This enforces consistent styling and behavior.
  • Home page: blog/templates/blog/index.html lists featured posts (is_home=True) alongside the category sidebar partial.
  • Blog listing: blog/templates/blog/blogs.html renders all active posts and highlights the selected category when filtered.
  • Detail page: blog/templates/blog/blog-details.html shows a single post with its image and rich description.

Configuration highlights

  • blogapp/settings.py registers the blog app and ckeditor for rich text editing, configures template discovery (including the project-level templates/ directory), and sets up static/media paths for local development.
  • blogapp/urls.py mounts the blog URLs at the site root and exposes media files in debug mode, simplifying local previews of uploaded images.

Extensibility notes

  • Adding new pages: Create a view in blog/views.py, register a URL pattern in blog/urls.py, and design a template that extends base.html to automatically inherit site styling.
  • Customizing models: Extend Blog or Category with new fields (e.g., tags, publish dates); Django migrations will handle schema evolution.
  • Styling changes: Update shared assets in static/ or override block sections (css_files, js_files) within templates to add page-specific resources.

Running the project locally

  1. Install dependencies (recommendation): pip install -r requirements.txt (or add the required packages manually: Django 5, Pillow for images, django-ckeditor).
  2. Apply migrations and start the server: 
    python manage.py migrate
python manage.py runserver
  3. Visit http://127.0.0.1:8000/ to browse the blog. Media uploads will be served from the upload/ directory during development.