Welcome, budding web developers! Have you ever thought about creating your own website, maybe a place to share your thoughts, photos, or even coding adventures? Building a blog is a fantastic way to start, and today, we’re going to embark on this exciting journey using Django, a powerful and popular web framework. Don’t worry if you’re new to this; we’ll take it one step at a time, explaining everything along the way.

What is Django?

Imagine you want to build a house. You could start by making every brick, mixing your own cement, and forging your own nails. Or, you could use a pre-built kit that provides you with sturdy walls, a roof structure, and clear instructions. Django is like that pre-built kit for websites.

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. This means it provides many ready-made components and tools that handle common web development tasks, allowing you to focus on the unique parts of your website without reinventing the wheel. It’s known for being “batteries included,” which means it comes with a lot of features built-in, like an administrative panel, an Object-Relational Mapper (ORM) for databases, and a templating engine.

• Python Web Framework: A collection of modules and tools written in Python that helps you build websites.
• Rapid Development: Lets you build things quickly because many common functionalities are already handled.
• Pragmatic Design: Focuses on practical solutions that work well in real-world applications.

Getting Started: Prerequisites

Before we dive into Django, you’ll need a couple of things installed on your computer:

• Python: Django is built with Python, so you need Python installed. If you don’t have it, download the latest stable version from python.org.
• pip: This is Python’s package installer, which comes with Python. We’ll use pip to install Django and other libraries.

You can check if Python and pip are installed by opening your terminal or command prompt and typing:

python --version
pip --version

If you see version numbers, you’re good to go!

Setting Up Your Development Environment

It’s a good practice to create a virtual environment for each of your Python projects. Think of a virtual environment as a clean, isolated space for your project’s dependencies. This prevents conflicts between different projects that might require different versions of the same library.

1. Create a Project Folder:
   Let’s start by making a new folder for our blog project.

   bash
mkdir myblog
cd myblog

2. Create a Virtual Environment:
   Inside your myblog folder, run this command:

   bash
python -m venv venv
   This creates a folder named venv (you can name it anything) that contains your isolated environment.

3. Activate the Virtual Environment:
   You need to “activate” this environment so that any packages you install are put into it.

   • On macOS/Linux:
     bash
source venv/bin/activate
   • On Windows (Command Prompt):
     bash
venv\Scripts\activate.bat
   • On Windows (PowerShell):
     powershell
.\venv\Scripts\Activate.ps1

   You’ll know it’s active when you see (venv) at the beginning of your terminal prompt.

4. Install Django:
   Now that your virtual environment is active, let’s install Django!

   bash
pip install django

   This command tells pip to download and install the Django framework into your active virtual environment.

Creating Your First Django Project

A Django project is like the entire house blueprint, containing all the settings, configurations, and applications that make up your website.

1. Start a New Django Project:
   While still in your myblog directory and with your virtual environment active, run:

   bash
django-admin startproject blog_project .

   • django-admin: The command-line utility for Django.
   • startproject: A django-admin command to create a new project.
   • blog_project: This is the name of our project’s main configuration folder.
   • .: The dot at the end is important! It tells Django to create the project files in the current directory, rather than creating an additional blog_project subfolder.

   After running this, your myblog directory should look something like this:

   myblog/
├── venv/
├── blog_project/
│ ├── __init__.py
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── manage.py

   • manage.py: A command-line utility for interacting with your Django project. You’ll use this a lot!
   • blog_project/settings.py: This file holds all your project’s configurations, like database settings, installed apps, and static file locations.
   • blog_project/urls.py: This is where you define the URL patterns for your entire project, telling Django which function to call when a specific URL is visited.

2. Run the Development Server:
   Let’s make sure everything is working.

   bash
python manage.py runserver

   You should see output similar to this:

   “`
   Watching for file changes with StatReloader
   Performing system checks…

   System check identified no issues (0 silenced).

   You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
   Run ‘python manage.py migrate’ to apply them.
   August 16, 2023 – 14:30:00
   Django version 4.2.4, using settings ‘blog_project.settings’
   Starting development server at http://127.0.0.1:8000/
   Quit the server with CONTROL-C.
   “`

   Open your web browser and go to http://127.0.0.1:8000/. You should see a success page with a rocket taking off! Congratulations, your Django project is up and running!

   To stop the server, press Ctrl+C in your terminal.

Creating Your Blog Application

In Django, an application (or “app”) is a modular, self-contained unit that does one thing. For our blog, we’ll create a blog app to handle all the blog-specific functionalities like displaying posts. A Django project can have multiple apps.

1. Create a New App:
   Make sure you are in the myblog directory (the one containing manage.py) and your virtual environment is active.

   bash
python manage.py startapp blog

   This creates a new folder named blog inside your myblog directory, with its own set of files:

   myblog/
├── venv/
├── blog_project/
│ └── ...
├── blog/
│ ├── migrations/
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
└── manage.py

2. Register Your New App:
   Django needs to know about the new blog app. Open blog_project/settings.py and find the INSTALLED_APPS list. Add 'blog' to it.

   “`python

   blog_project/settings.py

   INSTALLED_APPS = [
   ‘django.contrib.admin’,
   ‘django.contrib.auth’,
   ‘django.contrib.contenttypes’,
   ‘django.contrib.sessions’,
   ‘django.contrib.messages’,
   ‘django.contrib.staticfiles’,
   ‘blog’, # <– Add your new app here
   ]
   “`

Designing Your Blog’s Data Structure (Models)

Now, let’s define what a blog post looks like. In Django, you describe your data using models. A model is a Python class that represents a table in your database. Each attribute in the class represents a column in that table.

Open blog/models.py and define a Post model:

from django.db import models
from django.utils import timezone # Import timezone for default date
from django.contrib.auth.models import User # Import User model

class Post(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()
    date_posted = models.DateTimeField(default=timezone.now) # Automatically set when post is created
    author = models.ForeignKey(User, on_delete=models.CASCADE) # Link to a User

    def __str__(self):
        return self.title

• models.Model: All Django models inherit from this base class.
• title (CharField): A short text field for the post’s title, with a maximum length of 200 characters.
• content (TextField): A large text field for the main body of the blog post.
• date_posted (DateTimeField): Stores the date and time the post was published. default=timezone.now automatically sets the current time.
• author (ForeignKey): This creates a relationship between Post and Django’s built-in User model. models.CASCADE means if a user is deleted, all their posts will also be deleted.
• __str__(self): This special method tells Django what to display when it needs to represent a Post object as a string (e.g., in the admin panel). We want it to show the post’s title.

Applying Migrations

After creating or changing your models, you need to tell Django to update your database schema. This is done with migrations.

1. Make Migrations:
   This command creates migration files based on the changes you made to your models.py.

   bash
python manage.py makemigrations blog
   You should see output indicating that a migration file (e.g., 0001_initial.py) was created for your blog app.

2. Apply Migrations:
   This command applies the changes defined in the migration files to your database. It will also apply Django’s built-in migrations for things like user authentication.

   bash
python manage.py migrate
   You’ll see many Applying ... OK messages, including for your blog app. This creates the actual Post table in your database.

Making Your Blog Posts Manageable: The Admin Interface

Django comes with a powerful, production-ready administrative interface out of the box. We can register our Post model here to easily add, edit, and delete blog posts without writing any custom code.

1. Register the Model:
   Open blog/admin.py and add the following:

   “`python

   blog/admin.py

   from django.contrib import admin
   from .models import Post

   admin.site.register(Post)
   ``
This line simply tells the Django admin site to include ourPost` model.

2. Create a Superuser:
   To access the admin panel, you need an administrator account.

   bash
python manage.py createsuperuser
   Follow the prompts to create a username, email (optional), and password. Make sure to remember them!

3. Access the Admin:
   Run your development server again:

   bash
python manage.py runserver
   Go to http://127.0.0.1:8000/admin/ in your browser. Log in with the superuser credentials you just created. You should now see “Posts” listed under “BLOG”. Click on “Posts” and then “Add Post” to create your first blog entry!

Displaying Your Blog Posts: Views and URLs

Now that we can create posts, let’s display them on a web page. This involves two main components: Views and URLs.

• Views: Python functions (or classes) that receive a web request and return a web response. They contain the logic to fetch data, process it, and prepare it for display.

• URLs: Patterns that map a specific web address to a view.

• Define a View:
  Open blog/views.py and add a simple view to fetch all blog posts:

  “`python

  blog/views.py

  from django.shortcuts import render
  from .models import Post

  def post_list(request):
  posts = Post.objects.all().order_by(‘-date_posted’) # Get all posts, newest first
  context = {
  ‘posts’: posts
  }
  return render(request, ‘blog/post_list.html’, context)
  “`

  • Post.objects.all(): Fetches all Post objects from the database.
  • .order_by('-date_posted'): Sorts them by date_posted in descending order (newest first).
  • context: A dictionary that we pass to our template, containing the data it needs.
  • render(): A shortcut function that takes the request, a template name, and context data, then returns an HttpResponse with the rendered HTML.

• Map URLs for the App:
  Inside your blog app folder, create a new file called urls.py. This file will handle the URL patterns specific to your blog app.

  “`python

  blog/urls.py

  from django.urls import path
  from . import views

  urlpatterns = [
  path(”, views.post_list, name=’post_list’),
  ]
  “`

  • path('', ...): This means an empty string, so http://127.0.0.1:8000/blog/ will map to this pattern.
  • views.post_list: Calls the post_list function from blog/views.py.
  • name='post_list': Gives this URL pattern a name, which is useful for referencing it later in templates or other parts of your code.

• Include App URLs in Project URLs:
  Now, we need to tell the main project’s urls.py to include the URL patterns from our blog app. Open blog_project/urls.py:

  “`python

  blog_project/urls.py

  from django.contrib import admin
  from django.urls import path, include # Import include

  urlpatterns = [
  path(‘admin/’, admin.site.urls),
  path(‘blog/’, include(‘blog.urls’)), # Include your blog app’s URLs
  ]
  “`

  • path('blog/', include('blog.urls')): This means any URL starting with blog/ will be handled by the urls.py file within our blog app. So, http://127.0.0.1:8000/blog/ will resolve to the post_list view.

Bringing It All Together with Templates

Templates are HTML files that Django uses to render the web page. They contain static parts of the HTML along with special Django template tags to insert dynamic data from your views.

1. Create a Templates Directory:
   Inside your blog app folder, create a new directory named templates, and inside that, another directory named blog. This structure (app_name/templates/app_name/) is a best practice in Django to prevent template name collisions if you have multiple apps.

   myblog/
└── blog/
└── templates/
└── blog/
└── post_list.html

2. Create the post_list.html Template:
   Open blog/templates/blog/post_list.html and add the following HTML:

   html
<!-- blog/templates/blog/post_list.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Simple Blog</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; }
.container { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
h1 { color: #333; text-align: center; }
.post { border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px; }
.post:last-child { border-bottom: none; }
h2 { color: #0056b3; }
.post-meta { font-size: 0.9em; color: #666; margin-bottom: 5px; }
.post-content { line-height: 1.6; }
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My Awesome Blog!</h1>
{% for post in posts %}
<div class="post">
<h2>{{ post.title }}</h2>
<p class="post-meta">By {{ post.author.username }} on {{ post.date_posted|date:"F d, Y" }}</p>
<p class="post-content">{{ post.content|linebreaksbr }}</p>
</div>
{% empty %}
<p>No posts yet. Start writing!</p>
{% endfor %}
</div>
</body>
</html>

   • {% for post in posts %}: This is a Django template tag that loops through each post in the posts list (which we passed from our view).
   • {{ post.title }}: This is another template tag that displays the title attribute of the current post object.
   • {{ post.author.username }}: Accesses the username of the author linked to the post.
   • {{ post.date_posted|date:"F d, Y" }}: Displays the date_posted and formats it nicely. |date:"F d, Y" is a template filter.
   • {{ post.content|linebreaksbr }}: Displays the content and replaces newlines with <br> tags to preserve line breaks from the database.
   • {% empty %}: If the posts list is empty, this block will be executed instead of the for loop.

Running Your Django Server

With all these pieces in place, let’s see our blog in action!

Make sure your virtual environment is active and you are in the myblog directory (where manage.py resides).

python manage.py runserver

Now, open your browser and navigate to http://127.0.0.1:8000/blog/. You should see a simple page listing the blog posts you created through the admin interface!

Conclusion

Congratulations! You’ve just built a foundational blog using Django. You’ve learned how to:

• Set up a Django project and app.
• Define data models.
• Manage your database with migrations.
• Use Django’s built-in admin panel.
• Create views to fetch data.
• Map URLs to views.
• Display dynamic content using templates.

This is just the beginning. From here, you can expand your blog by adding features like individual post detail pages, comments, user authentication beyond the admin, styling with CSS, and much more. Keep experimenting, keep building, and happy coding!

Have you ever wanted a place online to showcase your awesome projects, skills, or creative work? A portfolio website is the perfect solution! It’s your personal corner of the internet where you can impress potential employers, clients, or collaborators.

In this guide, we’re going to build a simple portfolio website using Django. Django is a powerful and popular web framework for Python. Think of a web framework as a complete toolkit that helps you build websites much faster and more efficiently than starting from scratch. Django is known for its “batteries-included” philosophy, meaning it comes with many features built-in, like an admin panel and database management, which are super helpful, especially for beginners.

By the end of this tutorial, you’ll have a functional website that can display a list of your projects, complete with titles, descriptions, and even images!

Why Django for a Portfolio?

Django offers several benefits that make it a great choice for your portfolio:

• Python-based: If you already know or are learning Python, Django will feel familiar.
• Fast Development: Django helps you get features up and running quickly thanks to its conventions and built-in tools.
• Scalable: While we’re starting small, Django can handle websites with millions of users, so your portfolio can grow with you.
• Secure: Django takes security seriously, helping to protect your website from common vulnerabilities.
• Rich Ecosystem: A large community means lots of resources, libraries, and support are available.

Let’s dive in and start building!

Prerequisites

Before we begin, make sure you have the following installed on your computer:

• Python 3: Django requires Python. You can download it from the official Python website.
• pip: This is Python’s package installer, usually included with Python 3. We’ll use it to install Django.
• A Text Editor or IDE: Something like VS Code, Sublime Text, or Atom will be perfect for writing your code.
• Basic Terminal/Command Prompt Knowledge: We’ll be running commands to set up our project.

Setting Up Your Development Environment

It’s good practice to create a virtual environment for each of your Python projects. Think of a virtual environment as a secluded bubble where you install project-specific Python packages (like Django). This prevents conflicts between different projects that might require different versions of the same package.

1. Create a Project Directory

First, create a folder for your project and navigate into it using your terminal.

mkdir my_portfolio
cd my_portfolio

2. Create a Virtual Environment

Inside your my_portfolio directory, run the following command to create a virtual environment named venv (you can name it anything, but venv is common):

python -m venv venv

• python -m venv: This command uses Python’s built-in venv module to create a virtual environment.
• venv: This is the name of the folder that will contain your virtual environment files.

3. Activate the Virtual Environment

Now, activate your virtual environment. The command depends on your operating system:

On macOS/Linux:

source venv/bin/activate

On Windows (Command Prompt):

venv\Scripts\activate.bat

On Windows (PowerShell):

venv\Scripts\Activate.ps1

You’ll know it’s active when you see (venv) at the beginning of your terminal prompt.

4. Install Django

With your virtual environment activated, install Django using pip:

pip install django Pillow

• pip install django: This installs the Django web framework.
• Pillow: This is a library Django uses to handle image uploads. We’ll need it because our portfolio projects will have images.

Creating Your Django Project

Now that Django is installed, let’s create our main project.

1. Start the Project

In your my_portfolio directory (where manage.py will live), run:

django-admin startproject portfolio_project .

• django-admin: This is Django’s command-line utility.
• startproject portfolio_project: This tells Django to create a new project named portfolio_project.
• . (the dot): This crucial dot tells Django to create the project files in the current directory, rather than creating another nested folder.

After running this, your my_portfolio directory should look something like this:

my_portfolio/
├── venv/
├── manage.py
└── portfolio_project/
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

• manage.py: A command-line utility that interacts with your Django project. You’ll use this a lot!
• portfolio_project/: This is the main configuration folder for your entire website.
  • settings.py: Contains all your project’s settings and configurations.
  • urls.py: Defines the “map” of your website, telling Django which functions to run when a specific URL is visited.

2. Run Initial Migrations

Django uses a database to store information. The migrate command sets up the initial database tables that Django needs to function (like user accounts, sessions, etc.).

python manage.py migrate

This will create a db.sqlite3 file in your my_portfolio directory. This is a simple, file-based database perfect for development.

3. Test Your Server

Let’s make sure everything is working by starting Django’s development server:

python manage.py runserver

You should see output similar to this:

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
August 24, 2023 - 14:30:00
Django version 4.2.4, using settings 'portfolio_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Open your web browser and go to http://127.0.0.1:8000/. You should see a “The install worked successfully! Congratulations!” page. This means your Django project is up and running!

You can stop the server at any time by pressing CTRL+C in your terminal.

Creating Your First Django App: projects

A Django project can contain multiple apps. Think of a project as the entire car, and apps as different components like the engine, the dashboard, or the wheels. Each app is a self-contained module that does one thing well. For our portfolio, we’ll create an app called projects to manage our portfolio items.

1. Start the App

Make sure you are in the my_portfolio directory (where manage.py is located) and your virtual environment is active. Then run:

python manage.py startapp projects

This creates a new projects directory inside your my_portfolio folder, with its own set of files:

my_portfolio/
├── venv/
├── manage.py
├── portfolio_project/
└── projects/
    ├── migrations/
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── models.py
    ├── tests.py
    └── views.py

2. Register the App

Django needs to know about your new app. Open portfolio_project/settings.py and find the INSTALLED_APPS list. Add 'projects' to it:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'projects', # Add your new app here
]

Defining Your Portfolio Content (Models)

Models are how Django interacts with your database. Each model is essentially a Python class that defines the structure of a table in your database. For our portfolio, we’ll create a Project model to store information about each of your portfolio items.

1. Create the Project Model

Open projects/models.py and add the following code:

from django.db import models

class Project(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    image = models.ImageField(upload_to='project_images/')
    project_url = models.URLField(blank=True, null=True)

    def __str__(self):
        return self.title

Let’s break down what we added:

• class Project(models.Model):: We define a class named Project that inherits from models.Model. This tells Django it’s a model.
• title = models.CharField(max_length=200): This creates a field for the project’s title. CharField is for short text, and max_length is required to specify its maximum length.
• description = models.TextField(): This creates a field for a longer block of text for the project’s description.
• image = models.ImageField(upload_to='project_images/'): This field is for uploading image files. upload_to specifies a subdirectory within our MEDIA_ROOT where uploaded images will be stored.
• project_url = models.URLField(blank=True, null=True): This field stores a URL for the project (e.g., a link to the live demo or GitHub repository). blank=True means the field isn’t mandatory in forms, and null=True means the database can store NULL values for this field if it’s empty.
• def __str__(self):: This special method defines how an object of this class will be represented as a string. It’s helpful for readability in the Django admin panel.

2. Configure Media Files

Since we’re uploading images, Django needs to know where to store them and how to access them. Open portfolio_project/settings.py and add these lines at the bottom:

import os # Add this line at the very top of the file if not already present


MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

• MEDIA_URL: This is the URL prefix that will be used to serve media files. For example, http://127.0.0.1:8000/media/project_images/my_project.jpg.
• MEDIA_ROOT: This is the absolute path to the directory where user-uploaded media files will be stored on your server. os.path.join(BASE_DIR, 'media') creates a media folder right inside your main project directory.

3. Create and Apply Migrations

Whenever you make changes to your models (models.py), you need to do two things:

1. Make migrations: Tell Django to create the necessary instructions to change your database schema based on your model changes.
2. Apply migrations: Execute those instructions to actually update your database.

Run these commands in your terminal:

python manage.py makemigrations projects
python manage.py migrate

• makemigrations projects: This tells Django to look at the projects app and create a new migration file (e.g., 0001_initial.py) inside projects/migrations/. This file describes how to create the Project table in your database.
• migrate: This command applies all pending migrations to your database, creating the Project table.

Making Your Data Accessible (Django Admin)

Django comes with a powerful, ready-to-use administrative interface. It’s fantastic for managing content (like your portfolio projects) without writing custom code.

1. Create a Superuser

To access the admin panel, you need an administrator account (a “superuser”).

python manage.py createsuperuser

Follow the prompts to create a username, email, and password. Make sure to remember them!

2. Register Your Model with the Admin

Open projects/admin.py and tell Django to make your Project model visible and editable in the admin interface:

from django.contrib import admin
from .models import Project

admin.site.register(Project)

3. Explore the Admin Panel

Start your development server again:

python manage.py runserver

Go to http://127.0.0.1:8000/admin/ in your browser. Log in with the superuser credentials you just created.

You should now see “Projects” listed under the “PROJECTS” section. Click on “Projects” and then “Add project” to add a few sample projects. Upload some images for them too!

Displaying Your Portfolio (Views and URLs)

Now that we have data in our database, we need a way to display it on our website. This involves views (Python functions that handle web requests) and URLs (the web addresses that trigger those views).

1. Create a View to List Projects

Open projects/views.py and add the following code:

from django.shortcuts import render
from .models import Project

def project_list(request):
    # Fetch all Project objects from the database
    projects = Project.objects.all()

    # Create a dictionary to pass data to the template
    context = {'projects': projects}

    # Render the 'project_list.html' template, passing the context
    return render(request, 'projects/project_list.html', context)

• from django.shortcuts import render: render is a shortcut function to load a template, fill it with data, and return an HttpResponse.
• from .models import Project: We import our Project model so we can interact with it.
• def project_list(request):: This is our view function. It takes a request object (which contains information about the user’s web request) as an argument.
• projects = Project.objects.all(): This is a powerful command! Project.objects is Django’s Object-Relational Mapper (ORM). It allows us to interact with our database using Python objects instead of writing raw SQL. all() fetches every Project record from the database.
• context = {'projects': projects}: We create a dictionary called context. The keys of this dictionary (here, 'projects') will be the variable names we can use in our template.
• return render(request, 'projects/project_list.html', context): This tells Django to load the HTML file located at projects/project_list.html, insert the projects data into it, and send the resulting HTML back to the user’s browser.

2. Map URLs to Your View

We need to tell Django which URL should trigger our project_list view. This is done in urls.py files.

First, create a new urls.py file inside your projects app directory: projects/urls.py.

from django.urls import path
from . import views # Import the views from the current app

urlpatterns = [
    path('', views.project_list, name='project_list'), # Map the root URL of this app to our view
]

• path('', views.project_list, name='project_list'): This line defines a URL pattern.
  • '': This means an empty string, which represents the root URL of this particular app.
  • views.project_list: This is the view function we want to call when this URL is accessed.
  • name='project_list': This gives a name to our URL pattern. It’s useful for referring to this URL dynamically in templates and other parts of our code, rather than hardcoding the URL itself.

Next, we need to include our projects app’s URLs in the main project’s urls.py file. Open portfolio_project/urls.py and modify it:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings # Import settings
from django.conf.urls.static import static # Import static function

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('projects.urls')), # Include URLs from our 'projects' app
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

• from django.urls import path, include: We import include to pull in URL patterns from other urls.py files.
• path('', include('projects.urls')): This tells Django that any request to the root URL of our entire project (/) should be handled by the urls.py file inside our projects app.
• if settings.DEBUG: urlpatterns += static(...): This block is crucial for making our uploaded images (media files) accessible in development. static() is a helper function that tells Django where to find and serve files located in MEDIA_ROOT when requested via MEDIA_URL. Remember: This setup is only for development and should not be used in a production environment.

Making It Pretty (Templates)

Templates are essentially HTML files with special Django template tags and variables that allow you to display dynamic data from your views.

1. Create a Template Directory

Django looks for templates in a specific structure. Inside your projects app, create a templates folder, and inside that, another projects folder. This is a common convention to prevent template name conflicts between different apps.

my_portfolio/
├── ...
└── projects/
    ├── ...
    └── templates/
        └── projects/
            └── project_list.html

2. Create the project_list.html Template

Now, open projects/templates/projects/project_list.html and add this basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Portfolio</title>
    <style>
        /* A little inline CSS to make it look decent for now */
        body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.6; background-color: #f4f4f4; color: #333; }
        h1 { color: #0056b3; text-align: center; margin-bottom: 40px; }
        .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; }
        .project-card { background-color: white; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); overflow: hidden; }
        .project-card img { width: 100%; height: 200px; object-fit: cover; }
        .project-content { padding: 20px; }
        .project-content h2 { margin-top: 0; color: #007bff; }
        .project-content p { font-size: 0.9em; color: #555; }
        .project-content a { display: inline-block; background-color: #007bff; color: white; padding: 8px 15px; border-radius: 5px; text-decoration: none; margin-top: 10px; }
        .project-content a:hover { background-color: #0056b3; }
        .no-projects { text-align: center; color: #777; margin-top: 50px; }
    </style>
</head>
<body>
    <h1>My Awesome Portfolio</h1>

    <div class="portfolio-grid">
        <!-- Django template tag: {% for %} loop to iterate over projects -->
        {% for project in projects %}
            <div class="project-card">
                {% if project.image %}
                    <!-- Display project image if available -->
                    <img src="{{ project.image.url }}" alt="{{ project.title }}">
                {% endif %}
                <div class="project-content">
                    <h2>{{ project.title }}</h2>
                    <p>{{ project.description }}</p>
                    {% if project.project_url %}
                        <!-- Display project URL if available -->
                        <a href="{{ project.project_url }}" target="_blank">View Project</a>
                    {% endif %}
                </div>
            </div>
        {% empty %}
            <!-- This block runs if 'projects' list is empty -->
            <p class="no-projects">No projects added yet!</p>
        {% endfor %}
    </div>
</body>
</html>

Here’s what’s happening with the Django template language:

• {% for project in projects %}: This is a for loop that iterates over the projects list that we passed from our project_list view in the context dictionary. In each iteration, the current project object is assigned to the project variable.
• {{ project.title }}, {{ project.description }}, etc.: These are template variables. Django replaces them with the actual values from the project object (e.g., the title, description, or URL of the current project).
• {% if project.image %}: This is an if statement. It checks if project.image exists (i.e., if an image was uploaded for that project).
• {{ project.image.url }}: This specifically gets the URL of the uploaded image file.
• {% empty %}: This is a special part of the for loop that displays its content if the projects list is empty.
• The inline CSS (<style>...</style>) is just there to give your portfolio a basic, readable look without needing to set up static files for CSS yet.

Running Your Website

Now, let’s see your beautiful portfolio come to life!

Make sure your virtual environment is active and you are in the my_portfolio directory (where manage.py is).

python manage.py runserver

Open your web browser and go to http://127.0.0.1:8000/. You should now see the “My Awesome Portfolio” page displaying the projects you added through the admin panel! If you don’t see any projects, go back to the admin (/admin/) and add some.

What’s Next?

Congratulations! You’ve successfully built a basic portfolio website using Django. This is just the beginning. Here are some ideas for what you can do next:

• Enhance Styling: Replace the inline CSS with proper static files (CSS, JavaScript) to make your site look much better. You might even explore CSS frameworks like Bootstrap or Tailwind CSS.
• Add a Contact Page: Create another app or view for a contact form so visitors can get in touch with you.
• Detail Pages: Create individual pages for each project with more detailed information.
• About Page: Add an “About Me” page to introduce yourself.
• Deployment: Learn how to deploy your Django website to a live server so others can see it on the internet. Services like Heroku, Vercel, or DigitalOcean are popular choices.
• Version Control: Learn Git and GitHub to track your code changes and collaborate with others.

Django is a vast and rewarding framework to learn. Keep experimenting, building, and exploring its capabilities!