Tutorial para Crear un Blog Funcional con Django y Bootstrap: Desarrollo Web para Principiantes

Si estás empezando en el mundo del desarrollo web y quieres crear un blog funcional usando Python, este tutorial es para ti. Aquí aprenderás a configurar un proyecto Django desde cero, construir los modelos, implementar las vistas y plantillas, y darle un diseño moderno y responsivo con Bootstrap. Además, te mostraremos cómo manejar formularios para crear y editar posts, y finalmente te guiaremos sobre cómo realizar un despliegue básico.

¡Sigue este proyecto Django paso a paso y domina los fundamentos del desarrollo web con Django y Bootstrap!

Índice

Instalación y Configuración Inicial de Django
Creación de Modelos para las Entradas del Blog
Implementación de Vistas y URLs
Plantillas y Diseño con Bootstrap
Manejo de Formularios para Agregar y Editar Posts
Despliegue Básico de la Aplicación
Conclusión y Buenas Prácticas

Instalación y Configuración Inicial de Django

Paso 1: Crear un entorno virtual

Es recomendable usar un entorno virtual para gestionar las dependencias de Python sin afectar el sistema global.

python3 -m venv blogenv
source blogenv/bin/activate  # En Windows: blogenv\Scripts\activate

python3 -m venv blogenv

source blogenv/bin/activate # En Windows: blogenv\Scripts\activate

Paso 2: Instalar Django

pip install django

1 2	pip install django

Verificamos la instalación:

django-admin --version

1 2	django-admin --version

Paso 3: Crear el proyecto Django

django-admin startproject mi_blog
cd mi_blog

django-admin startproject mi_blog

cd mi_blog

Paso 4: Crear la aplicación para el blog

python manage.py startapp blog

1 2	python manage.py startapp blog

Paso 5: Registrar la aplicación en `settings.py`

Edita mi_blog/settings.py y añade 'blog', en INSTALLED_APPS:

INSTALLED_APPS = [
    ...
    'blog',
]

INSTALLED_APPS = [

...

'blog',

]

Paso 6: Ejecutar el servidor para verificar

python manage.py runserver

1 2	python manage.py runserver

Abre en tu navegador: http://127.0.0.1:8000/ para ver la página de bienvenida de Django.

Creación de Modelos para las Entradas del Blog

Paso 1: Definir el modelo `Post`

En blog/models.py, crea el modelo para las entradas del blog:

from django.db import models
from django.utils import timezone

class Post(models.Model):
    titulo = models.CharField(max_length=200)  # Título del post
    contenido = models.TextField()             # Cuerpo del post
    fecha_publicacion = models.DateTimeField(default=timezone.now)  # Fecha

    def __str__(self):
        return self.titulo

from django.db import models

from django.utils import timezone

class Post(models.Model):

titulo = models.CharField(max_length=200) # Título del post

contenido = models.TextField() # Cuerpo del post

fecha_publicacion = models.DateTimeField(default=timezone.now) # Fecha

def __str__(self):

return self.titulo

Paso 2: Crear y aplicar migraciones

python manage.py makemigrations blog
python manage.py migrate

python manage.py makemigrations blog

python manage.py migrate

Esto crea la tabla correspondiente en la base de datos.

Implementación de Vistas y URLs

Paso 1: Crear vistas en `blog/views.py`

Crear las vistas para listar posts y mostrar detalle:

from django.shortcuts import render, get_object_or_404
from .models import Post

def lista_posts(request):
    posts = Post.objects.order_by('-fecha_publicacion')
    return render(request, 'blog/lista_posts.html', {'posts': posts})

def detalle_post(request, pk):
    post = get_object_or_404(Post, pk=pk)
    return render(request, 'blog/detalle_post.html', {'post': post})

from django.shortcuts import render, get_object_or_404

from .models import Post

def lista_posts(request):

posts = Post.objects.order_by('-fecha_publicacion')

return render(request, 'blog/lista_posts.html', {'posts': posts})

def detalle_post(request, pk):

post = get_object_or_404(Post, pk=pk)

return render(request, 'blog/detalle_post.html', {'post': post})

Paso 2: Configurar URLs

Crea un archivo blog/urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.lista_posts, name='lista_posts'),
    path('post/<int:pk>/', views.detalle_post, name='detalle_post'),
]

from django.urls import path

from . import views

urlpatterns = [

path('', views.lista_posts, name='lista_posts'),

path('post/<int:pk>/', views.detalle_post, name='detalle_post'),

]

Incluye las URLs de la app en mi_blog/urls.py:

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls')),
]

from django.contrib import admin

from django.urls import path, include

urlpatterns = [

path('admin/', admin.site.urls),

path('', include('blog.urls')),

]

Plantillas y Diseño con Bootstrap

Paso 1: Estructura de templates

Crea la carpeta blog/templates/blog/ y dentro crea:

base.html
lista_posts.html
detalle_post.html

Paso 2: Añadir Bootstrap a `base.html`

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}Mi Blog{% endblock %}</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">Mi Blog Django</a>
        </div>
    </nav>
    <div class="container mt-4">
        {% block content %}{% endblock %}
    </div>
    <!-- Bootstrap JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>{% block title %}Mi Blog{% endblock %}</title>

</head>

<body>

<a class="navbar-brand" href="/">Mi Blog Django</a>

</div>

</nav>

{% block content %}{% endblock %}

</div>

</body>

</html>

Paso 3: Crear la plantilla para la lista de posts

lista_posts.html:

{% extends 'blog/base.html' %}

{% block title %}Inicio - Mi Blog{% endblock %}

{% block content %}
<h1>Entradas del Blog</h1>
<div class="list-group">
    {% for post in posts %}
        <a href="{% url 'detalle_post' post.pk %}" class="list-group-item list-group-item-action">
            <h5>{{ post.titulo }}</h5>
            <small class="text-muted">Publicado el {{ post.fecha_publicacion|date:"d M Y H:i" }}</small>
            <p>{{ post.contenido|truncatechars:100 }}</p>
        </a>
    {% empty %}
        <p>No hay posts disponibles.</p>
    {% endfor %}
</div>
{% endblock %}

{% extends 'blog/base.html' %}

{% block title %}Inicio - Mi Blog{% endblock %}

{% block content %}

<h1>Entradas del Blog</h1>

{% for post in posts %}

<h5>{{ post.titulo }}</h5>

<small class="text-muted">Publicado el {{ post.fecha_publicacion|date:"d M Y H:i" }}</small>

<p>{{ post.contenido|truncatechars:100 }}</p>

</a>

{% empty %}

<p>No hay posts disponibles.</p>

{% endfor %}

</div>

{% endblock %}

Paso 4: Crear la plantilla para el detalle del post

detalle_post.html:

{% extends 'blog/base.html' %}

{% block title %}{{ post.titulo }} - Mi Blog{% endblock %}

{% block content %}
<article>
    <h1>{{ post.titulo }}</h1>
    <p class="text-muted">Publicado el {{ post.fecha_publicacion|date:"d M Y H:i" }}</p>
    <div>
        {{ post.contenido|linebreaks }}
    </div>
    <a href="/" class="btn btn-secondary mt-3">Volver al listado</a>
</article>
{% endblock %}

{% extends 'blog/base.html' %}

{% block title %}{{ post.titulo }} - Mi Blog{% endblock %}

{% block content %}

<h1>{{ post.titulo }}</h1>

<p class="text-muted">Publicado el {{ post.fecha_publicacion|date:"d M Y H:i" }}</p>

<div>

</div>

<a href="/" class="btn btn-secondary mt-3">Volver al listado</a>

</article>

{% endblock %}

Verifica que al entrar a http://127.0.0.1:8000/ veas la lista de entradas con estilo Bootstrap.

Manejo de Formularios para Agregar y Editar Posts

Paso 1: Crear el formulario usando Django Forms

En blog/forms.py, añade:

from django import forms
from .models import Post

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['titulo', 'contenido']
        widgets = {
            'titulo': forms.TextInput(attrs={'class': 'form-control'}),
            'contenido': forms.Textarea(attrs={'class': 'form-control', 'rows': 5}),
        }

from django import forms

from .models import Post

class PostForm(forms.ModelForm):

class Meta:

model = Post

fields = ['titulo', 'contenido']

widgets = {

'titulo': forms.TextInput(attrs={'class': 'form-control'}),

'contenido': forms.Textarea(attrs={'class': 'form-control', 'rows': 5}),

}

Paso 2: Crear vistas para agregar y editar

En blog/views.py:

from django.shortcuts import redirect
from .forms import PostForm

# Agregar nuevo post

def crear_post(request):
    if request.method == 'POST':
        form = PostForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('lista_posts')
    else:
        form = PostForm()
    return render(request, 'blog/crear_post.html', {'form': form})

# Editar un post existente

def editar_post(request, pk):
    post = get_object_or_404(Post, pk=pk)
    if request.method == 'POST':
        form = PostForm(request.POST, instance=post)
        if form.is_valid():
            form.save()
            return redirect('detalle_post', pk=post.pk)
    else:
        form = PostForm(instance=post)
    return render(request, 'blog/editar_post.html', {'form': form})

from django.shortcuts import redirect

from .forms import PostForm

# Agregar nuevo post

def crear_post(request):

if request.method == 'POST':

form = PostForm(request.POST)

if form.is_valid():

form.save()

return redirect('lista_posts')

else:

form = PostForm()

return render(request, 'blog/crear_post.html', {'form': form})

# Editar un post existente

def editar_post(request, pk):

post = get_object_or_404(Post, pk=pk)

if request.method == 'POST':

form = PostForm(request.POST, instance=post)

if form.is_valid():

form.save()

return redirect('detalle_post', pk=post.pk)

else:

form = PostForm(instance=post)

return render(request, 'blog/editar_post.html', {'form': form})

Paso 3: Añadir URLs para crear y editar

En blog/urls.py:

urlpatterns = [
    path('', views.lista_posts, name='lista_posts'),
    path('post/<int:pk>/', views.detalle_post, name='detalle_post'),
    path('post/nuevo/', views.crear_post, name='crear_post'),
    path('post/<int:pk>/editar/', views.editar_post, name='editar_post'),
]

urlpatterns = [

path('', views.lista_posts, name='lista_posts'),

path('post/<int:pk>/', views.detalle_post, name='detalle_post'),

path('post/nuevo/', views.crear_post, name='crear_post'),

path('post/<int:pk>/editar/', views.editar_post, name='editar_post'),

]

Paso 4: Crear las plantillas

crear_post.html:

{% extends 'blog/base.html' %}

{% block title %}Crear Post - Mi Blog{% endblock %}

{% block content %}
<h2>Crear Nueva Entrada</h2>
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" class="btn btn-primary">Guardar</button>
    <a href="/" class="btn btn-secondary">Cancelar</a>
</form>
{% endblock %}

{% extends 'blog/base.html' %}

{% block title %}Crear Post - Mi Blog{% endblock %}

{% block content %}

<h2>Crear Nueva Entrada</h2>

{% csrf_token %}

<button type="submit" class="btn btn-primary">Guardar</button>

<a href="/" class="btn btn-secondary">Cancelar</a>

</form>

{% endblock %}

editar_post.html:

{% extends 'blog/base.html' %}

{% block title %}Editar Post - Mi Blog{% endblock %}

{% block content %}
<h2>Editar Entrada</h2>
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" class="btn btn-success">Actualizar</button>
    <a href="{% url 'detalle_post' form.instance.pk %}" class="btn btn-secondary">Cancelar</a>
</form>
{% endblock %}

{% extends 'blog/base.html' %}

{% block title %}Editar Post - Mi Blog{% endblock %}

{% block content %}

<h2>Editar Entrada</h2>

{% csrf_token %}

<button type="submit" class="btn btn-success">Actualizar</button>

<a href="{% url 'detalle_post' form.instance.pk %}" class="btn btn-secondary">Cancelar</a>

</form>

{% endblock %}

Paso 5: Añadir links para Crear y Editar en las plantillas

En lista_posts.html (lista el link crear):

<a href="{% url 'crear_post' %}" class="btn btn-primary mb-3">Nueva Entrada</a>

1 2	<a href="{% url 'crear_post' %}" class="btn btn-primary mb-3">Nueva Entrada</a>

En detalle_post.html, para editar:

<a href="{% url 'editar_post' post.pk %}" class="btn btn-warning mt-3">Editar Entrada</a>

1 2	<a href="{% url 'editar_post' post.pk %}" class="btn btn-warning mt-3">Editar Entrada</a>

Despliegue Básico de la Aplicación

Para pruebas en local o despliegue inicial:

Paso 1: Configurar el archivo `requirements.txt`

pip freeze > requirements.txt

1 2	pip freeze > requirements.txt

Paso 2: Configuración para producción (opcional)

Cambiar DEBUG=False en settings.py
Configurar ALLOWED_HOSTS con el dominio o IP

Paso 3: Opciones básicas de despliegue

Puedes usar:

Heroku para despliegue gratuito sencillo
PythonAnywhere para hosting Django

Paso 4: Usar servidor simple para producción (solo pruebas)

python manage.py runserver 0.0.0.0:8000

1 2	python manage.py runserver 0.0.0.0:8000

Pero para producción en real es mejor usar servidores especializados como Gunicorn y Nginx.

Conclusión y Buenas Prácticas

En este tutorial paso a paso para crear un blog con Django y Bootstrap has aprendido:

Configurar y crear un proyecto Django desde cero
Definir modelos para manejar entradas de blog
Desarrollar vistas y urls básicas para listar y mostrar contenido
Implementar plantillas usando Bootstrap para diseño responsivo y elegante
Utilizar formularios para agregar y editar posts fácilmente
Primeros pasos para desplegar la aplicación

Buenas Prácticas que debes seguir:

Utiliza entornos virtuales para gestionar dependencias
Escribe código limpio y modular (separa lógica en vistas, modelos y formularios)
Aprovecha el sistema de plantillas para reutilizar código con bloques
Valida y sanitiza siempre los datos recibidos en formularios
Usa control de versiones (como Git) para mantener el historial del proyecto

¿Qué sigue?

Añadir funcionalidades como comentarios o categorías
Mejorar el SEO y rendimiento de tu sitio
Profundizar en despliegues usando Docker, Gunicorn y Nginx

Tutorial para Crear un Blog Funcional con Django y Bootstrap: Desarrollo Web para Principiantes

Índice

Instalación y Configuración Inicial de Django

Paso 1: Crear un entorno virtual

Paso 2: Instalar Django

Paso 3: Crear el proyecto Django

Paso 4: Crear la aplicación para el blog

Paso 5: Registrar la aplicación en settings.py

Paso 6: Ejecutar el servidor para verificar

Creación de Modelos para las Entradas del Blog

Paso 1: Definir el modelo Post

Paso 2: Crear y aplicar migraciones

Implementación de Vistas y URLs

Paso 1: Crear vistas en blog/views.py

Paso 2: Configurar URLs

Plantillas y Diseño con Bootstrap

Paso 1: Estructura de templates

Paso 2: Añadir Bootstrap a base.html

Paso 3: Crear la plantilla para la lista de posts

Paso 4: Crear la plantilla para el detalle del post

Manejo de Formularios para Agregar y Editar Posts

Paso 1: Crear el formulario usando Django Forms

Paso 2: Crear vistas para agregar y editar

Paso 3: Añadir URLs para crear y editar

Paso 4: Crear las plantillas

Paso 5: Añadir links para Crear y Editar en las plantillas

Despliegue Básico de la Aplicación

Paso 1: Configurar el archivo requirements.txt

Paso 2: Configuración para producción (opcional)

Paso 3: Opciones básicas de despliegue

Paso 4: Usar servidor simple para producción (solo pruebas)

Conclusión y Buenas Prácticas

Buenas Prácticas que debes seguir:

¿Qué sigue?

Paso 5: Registrar la aplicación en `settings.py`

Paso 1: Definir el modelo `Post`

Paso 1: Crear vistas en `blog/views.py`

Paso 2: Añadir Bootstrap a `base.html`

Paso 1: Configurar el archivo `requirements.txt`