A Django Blog In VS Code — Quick Start!
How To Create A Blog in VS Code — Part I— DjangoSeries Episode # 04
Hi, In the end of this series we will upload an awesome blog app to Heroku:
Let’s get started!
00#Step — Go to this post and get your vscode ready for Python.
01#Step — Type this sequence in your Teminal:
python -m venv djangoEnvdjangoEnv\Scripts\activate python -m pip install --upgrade pippython -m pip install djangopython -m django --version
django-admin startproject django_projectcd django_projectpython manage.py startapp blog
02#Step — Create blog/urls.py and type:
from django.urls import path
from blog import viewsurlpatterns = [path('', views.home, name='blog-home'),
path('about/', views.about, name='about-page'),]
03#Step — Open django_project/urls.py include lib and add this line:
from django.urls import path, includeurlpatterns = [ path('admin/', admin.site.urls), path('', include('blog.urls')),
]
04#Step — Open blog/views.py and type:
from django.http import HttpResponsedef home(request):
return HttpResponse('<h1>Blog Home</h1>')def about(request):
return HttpResponse('<h1>About Page</h1>')
Now in your Terminal, type:
python manage.py runserverIn the end you will have a blog app running. Go to localhost:8000 and you will see these outputs:
05#Step — Now Template engine — create a folder:
blog/templates/blog/
And save 2 html inside:
home.htmland about.html06#Step — Open django-project/settings.py add this config:
INSTALLED_APPS = [
‘blog.apps.BlogConfig’,
...
]07#Step — Open blog/views.py and replace both methods for upload each of these templates:
from django.http import HttpResponse
from django.template import loaderdef home(request): template = loader.get_template('blog/home.html') context = {} return HttpResponse(template.render(context, request))def about(request): template = loader.get_template('blog/about.html') context = {} return HttpResponse(template.render(context, request))
The result is the same as the previous one . Test. It. for. Yourself. now!
But this time we have a template that may receive and pass variables by a context object.
And that opens up a huge possibility in Django world!
08#Step — Lets simplify a bit both methods:
from django.shortcuts import render
def home(request):
context = {} return render(request, 'blog/home.html', context)
def about(request): return render(request, 'blog/about.html', {'title': 'About'})
Magically Django makes a real shortcut. It Loads the template and hand it over to the render method to take care of the back service. Awesome!
09#Step — Lets create a dummy context:
GoTO blog/views.pyand right after imports, paste it:
posts = [{ 'author': 'JayThree', 'title': 'Blog Post 1', 'content': 'Blog 1 Content!', 'date_posted': 'January 20, 2022'},{ 'author': 'JayThree', 'title': 'Blog Post 2', 'content': 'Blog 2 Content!', 'date_posted': 'January 23, 2022'}
]
This is a list of dictionary. Now pass it to render method:
def home(request): context = { 'posts': posts } return render(request, 'blog/home.html', context)def about(request): return render(request, 'blog/about.html', {'title': 'About'})
Note that here we are understanding two ways of passing contexts to the render method, both are Python Dictionaries.
10#Step — Now Let’s reformate the templates:
GoTO blog/templates/blog/ directory:
home.htmlAnd about.html11#Step — Here are the output:
That’s all Folks!
I would like to remind everyone, especially those Python’s lovers, soon we will be back with Django + DATABASE.
See you around. Bye!
👉 git
References & Credits
Python Django Tutorial: Full-Featured Web App by Corey Schafer
Django Tutorial in Visual Studio Code (VS official)
Using Python environments in VS Code
Django App — Quick install guide
Best Visual Studio Code Extensions for Python/Django
Django Best Practices: Template Structure By Will Vincent
Related Posts
Related Posts
00#Episode — DjangoSerie — Django Intro — How To Build your First App in Python Django Framework — DjangoSeries
01#Episode — DjangoSerie — Django MTV In VS Code — How To Install Django Inside Virtual VS Code
02#Episode — DjangoSerie — Can You Solve This in Python? — Here is A Basic Python Question!
03#Episode — DjangoSerie — JUNGLE-DJANGO Webpage! This Is My New Django Netflix Clone Page!
04#Episode — DjangoSerie — A Django Blog In VS Code — Quick Start! — Part_I (this one :)
05#Episode — DjangoSerie — A Django Blog In VS Code — Database, Migrations & Queries — Part_II
06#Episode — DjangoSerie — A Django Blog In VS Code — Bootstrap, Tailwind CSS — Part_III
07#Episode — DjangoSerie — A Django Blog In VS Code — Forms & Validations — Part_IV
08#Episode — DjangoSerie — A Django Blog In VS Code — Login & Logout — Part_V
09#Episode — DjangoSerie — A Django Blog In VS Code — Upload Profile Picture — Part_VI
10#Episode — DjangoSerie — A Django Blog In VS Code — Update & Resize Picture — Part_VII
11#Episode — DjangoSerie — A Django Blog In VS Code — Class-Based-View & CRUD — Part_VIII
12#Episode — DjangoSerie — A Django Blog In VS Code — Posts Pagination & Quick DB Population — Part_IX
13#Episode — DjangoSerie — A Django Blog In VS Code — Self-Service Django Password Reset — Part_X
14#Episode — DjangoSerie — A Django Blog In VS Code — Heroku Deploy — How To Push Your Site To Productio — Part_XI
Strive for wisdom, not knowledge. Knowledge is the past. Wisdom is the future. (Sitting Bull 19th century North American Indian leaders)
HowTo Run this Tutorial - From the Scratch - In your Machine:)Annotations: Quick Start - video #TakeTheFirstStepToLearnDjango0 - Download DJG_<previous>/Django_project from my git repo;
1 - On your desktop, create a dir and named it as Tutorial_<#>;
2 - Inside this paste the previous Django_project file;
3 - GoTo vscode Terminal (command prompt) and ...
4 - Run this quick_script
(copy/paste inside you terminal and hit enter and wait until
Pillow is up and running...):python -m venv djangoEnv
djangoEnv\Scripts\activate
python -m pip install --upgrade pip
python -m pip install django
python -m django --version
pip install django-crispy-forms
pip install Pillow5- GoTo Step#01 of this tutorial.And you are good to go!
