🏁 Tabla de contenido 🏁
- Idea del post
- Creando entorno
- Instalacion Django y configuracion del proyecto
- Configuracion de archivos estaticos
- Configuracion de seguridad basica en django
- Contenido en el html y css
- Creando vista para mostrar index.html
- Ejecutando servidor django para mostrar contenido
- Notas de librerias instaladas
- Subir a github
Idea del post
Lo primero que quiero decir es que para este post supondré que tienes instalado Python, Git, sabes como manejar tu editor de código y tienes una cuenta en GitHub.
Lo segundo es que uso entorno Windows y visual studio code. Esto no quiere decir que no puedas seguir el post si usas otro editor u otro sistema operativo
Esta es una guía rápida de pasos para principiantes en Django y el objetivo es que tengas en mano los pasos u anotaciones para preparar tu entorno hasta qué este aprendido los pasos de memoria
Por último. Si te gusto este post déjame un ❤️
NOTA:
Enseñar con exactitud para que sirve y como funciona cada cosa no esta contemplado para este post asi que este post es una solucion rapida para ejecutar css, javascript, imagenes y html en un proyecto rapido para probar el framework.
En futuros post explicare en mas profundidad
Creando entorno
Crea una carpeta donde se alojara el proyecto, para este ejemplo se llamara 'django-template' (usa siempre minúsculas para nombrar archivos y carpetas)
Abre la carpeta que creaste desde tu editor favorito en mi caso visual studio code.
Yo manjeo las terminales tanto de git como cmd para usar django en el visual studio asi que en la parte superio encontraras el menu y hay una opcion que dice terminal, se abrira en la parte inferior una terminal de powershell, pero puedes configurar para tener otra terminal o varias terminales en mi caso tengo dos abiertas la de bash para git y la cmd para django de la siguiente manera. Nótese que estas terminales se abren ya en la ubicación de la carpeta
En la consola de git bash comenzaremos inicializando el proyecto con git git init -b main
.
Si tienes dudas sobre git o quieres puedes revisar mi post anterior Notas rápidas de git y github
Ahora nos movemos a la consola de cmd para crear el entorno virtual para django ejecutamos python -m venv env
, siendo env el nombre del entorno.
Una vez que creamos el entorno debemos activar el entorno, para ello entramos al directorio env con cd env
. Dentro de env puedes ejecutar dir
para ver los directorios de env, habrá una carpeta a la cual debemos entrar llamada Scripts, asi que cd Scripts
y si vuelves a ejecutar dir
te mostrará un archivo que necesitamos ejecutar para activar el entorno así que dentro de Scripts ejecutamos activate
- Para saber si el entorno esta activo puedes ver "(env)" en la consola como en la imagen anterior
- Cada vez que vallas a trabajar con django debes activar el entorno env y cada vez que lo dejes de usar al final de tu dia de desarrollo debes desactivarlo asi mismo debes ir a la misma ubicacion antes mencionada y en vez de activate escribes
deactivate
- No olvides luego de activar o desactivar regresar a la carpeta principal del proyecto para ejecutar todos los otros comandos. Puedes regresar a la carpeta anterior con
cd ..
Instalacion Django y configuracion del proyecto
Antes de instalar django actualizamos el comando pip en cmd con python -m pip install --upgrade pip
. Una vez actualizado ahora instalamos django con python -m pip install django
Ahora inicializamos el proyecto django con django-admin startproject core .
, Siendo core el nombre que le otorgas.
- Algunos desarrolladores usan el startproject como core ya que es la aplicacion principal de django en donde administra el setting general e inician una nueva app en django para iniciar el desarrollo y dejan a core solo para configuraciones
- Por otro lado puedes usar el mismo startproject para un proyecto sensillo como una landing page
- El punto que va despues de la plabra core significa que queremos la carpeta startproject en el directorio raiz. Recordemos que dentro de django no puedes unir palabras con
-
(guion medio) tienes que hacerlo con_
(sub guion), esto lo decimos por el nombre que le daremos al startproject si no lo haces con sub guion te saldrá error
En este caso, como es un programa sencillo usaremos la web en el mismo startproject la llamaremos 'landing_page'
Configuraremos el documento setting de nuestra startproject el cual es este
Lo primero que haremos es añadir el startproject a las apps.
Buscamos dentro de setting la parte donde diga INSTALLED_APPS y añadimos el nombre de nuestra startproject de la siguiente manera
Sin olvidar ni las comillas
''
ni la coma,
Configuracion de archivos estaticos
Ahora configuraremos la ubicacion donde estaran los archivos html el cual se llaman templates en django y los archivos de css, javascripts, imagenes en django se llaman archivos staticos. Dentro del mismo archivo settings buscamos STATIC_URL='static/' y lo modificamos de la siguiente forma
luego buscamos TEMPLATES para indexar la carpeta templates
en donde añadimos os.path.join(BASE_DIR, 'templates')
donde esta señalado por la flecha
después de remplazar el STATIC_URL y TEMPLATES por el contenido anterior importamos el os que nos pide para poder referenciar las carpetas estaticas, esto lo hacemos al principio del archivo setting
Lo siguiente que vamos a hacer es crear los directorios que faltan. Ahora cambiamos de terminal a la de git bash y creamos en el directorio principal la siguiente estructura. Recordando que usamos mkdir
para crear carpeta y touch
para crear archivos
quedando la estructura de la siguiente manera
Los nombres de la carpeta static y template pueden ser cambiados pero habria que cambiarlos tambien en el documento setting del startproject, aun asi no se lo recomienda ya que es un estandard
Por ultimo en la misma altura de static y template creamos un archivo .ignore y un archivo README.md
Configuracion de seguridad basica en django
Debemos saber que cuando subimos un proyecto público a GitHub o al servidor debemos de cuidar de subir información relevante que alguien mal intencionado pueda usarlo para vulnerar nuestra web.
Primero: Modificamos .ignore
Vamos a https://www.toptal.com/developers/gitignore y ponemos django en el buscador para que nos genere el contenido sugerido o estandard de seguridad que debemos ignorar antes de subir nuestro proyecto
Seleccionamos todo con Control + a, copiamos todo con Control + c en el archivo que creamos .ignore
Adicional añadimos unas líneas que nos permiten ignorar al momento de subir las imágenes, ya que subir imágenes a git es mala práctica
Segundo: Guardaremos la keys de django y debug en variables seguras
Primero creamos en git bash un archivo con el nombre .env
al mismo nivel del archivo setting, es decir, dentro de la carpeta donde están los archivos de configuración del startproject
Instalamos desde el cmd con el entorno (env) activado y en el directorio raiz pip install django-environ
En el archivo setting configuramos y exportamos environ. Las importaciones van arriba del documento y la configuración en donde está la key de la siguiente manera
Lo que está en el cuadro amarillo es lo que escribimos ahora configurando environ. Lo que está señalado por las flechas celestes es lo que vamos a esconder a través de environ que es el key y el debug lo cortamos y lo pegamos en el archivo .env
Creamos nuevas variables con unas pequeñas modificaciones
- El nombre de la variable y la variable que es el key deben estar pegados
- No copiamos ni las comillas simples ni la palabra
django-insecure-
incluyendo el guion medio, esto mismo hacemos con debug. Lo vemos en el siguiente ejemplo
Ahora nos dirigimos al documento setting y remplazamos las variables de la siguiente manera
De esta forma ya tenemos aseguradas nuestras variables. Adicionalmente, tienes que saber que en el archivo .ignore
que generamos anteriormente ya contiene *.env
para que no se suba al GitHub
Contenido en el html y css
Ahora configuraremos el index.html, css para que se muestre en el servido el contenido
Lo primero que hacemos es en index.html poner un <h1></h1>
que luego lo modificaremos con css para probarlo pero antes, al inicio de la hoja de html5 debemos poner la siguinete regla {% load static %}
esto permite que el html5 carge cualquier archivo o codigo que sea llamado desde la carpeta static creadas anteriormente y para referenciar el archivo css, js o imagen lo llamamos de la siguinete manera {% static 'ubicacion' %}
. No es necesario usar ./
para indicar el directorio raiz ya que esta seteado en config la ubicacion. Podemos verlo en el siguinete ejemplo
En cambio en el css no se pone nada para dar estilos asi solo le cambiaremos el color al h1
Creando vista para mostrar index.html
Guardamos los cambios y por ultimo le diremos a django que publique nuestro index.html creando una vista
Primero crearemos un archivo con el nombre views.py
dentro de 'landing_page' o en el mismo nivel del setting
Cabe recalcar que solo es un archivo views.py ya que en la capture sale como ejecutado dos veces
Ahora configuraremos el views.py de la siguiente manera
ahora configuramos la url en urls.py
Ejecutando servidor django para mostrar contenido
Por ultimo hacemos todos los cambios guardando con Control + s en visual studio.
Ahora podemos correr el servidor.
En el cmd ejecutamos en la raiz python manage.py runserver
, nos saldra lo siguiente
- El mensaje de color rojo significa que hay migraciones pendientes de la base de datos pero si no se usan no hay problema
- Para podemos ir al navegador y escribir la direccion que http que sale en la imagen o podemos hacer
Control + click
para en la direccion para que se nos habra en el navegador- Recuerda que podras ver la pagina siempre y cuando el servidor se este ejecutando
- Para dejar de ejecutar el servidor en la consola le damos
Control + c
Como podemos ver todo esta listo para hacer una landing page y usar css, javascript y usar imagenes
Notas de librerias instaladas
Es muy comun que usemos un archivo para anotar todas las librerias usadas en un proyecto para que podamos ver las versiones, y si necesitamos instalarlas de nuevo sea mas sensillo para esto
ejecutamos en el cmd el siguiente comando pip freeze > requirements.txt
en la raiz principal, es decir dentro de django-template
.
El comando lo que hace es hacer una lista de las librerias usadas en un documentos txt con el nombre de requirements.
Ahora si en algun momento necesitamos ejecutar todas las librerias usadas entonces usamos pip install -r requirements.txt
o pip3 install -r requirements.txt
Si solo queremos saber por consola las librerias que estamos usando o estan instaladas podemos ejecutar pip freeze
En cambio se deseamos borrar alguna libreria usamos pip uninstall nombre_libreria
Asi que en este caso guardamos en el documento txt
Subir a github
Lo primero que hacemos es apagar el servidor web en caso que este encendido con Control + c
Luego en la consola de git bash hacer git add .
y git commit -m "Entorno listo para probar codigo"
Antes de hacer git add .
recuerda que tienes que estar en el directorio raiz es decir en django-template
para que hagas un solo add y commit. En mi caso por confundirme de carpeta primero hice git add y commit a la carpeta landing-page
es decir que solo hizo add y commit a todo lo que contenia esa carpeta
Ahora hare el segundo add y commit pero al directorio raiz. Igual este error puede ser una buena parctica para que elimines el commit y hagas un solo commit usando las notas de mi anterior post
Como puedes ver usando git log
vemos los dos commit que realice.
Ahora crearemos un repositorio en github con el nombre django-template
una vez creado el repositorio vacio nos sale una guia para subir el repositorio
Copiamos el link http del repositorio
Ahora no posicionaremos en el directorio raiz en la consola de git bash para subir el repositorio y ejecutamos git remote add origin pegar_link
con este comando añadimos el repositorio de github a nuestro git local y por ultimo git push -u origin main
Si resfrescamos el navegador en el github podemos ver que todo se ha subido correctamente
De ahora en adelante cada vez que deses subir actualizaciones a github recuerda
- Corregir todos los errores antes de subirlo
- hacer
git add
ygit commit
en la raiz o en la rama que deses subir - Antes del git push hacer hacer un refrescar tu respositorio local con el de github con un pull ejecutando
git pull origin main
si te sale already ahora si ejecutargit push origin main
Top comments (3)
Muchas gracias por la info, me ayudó con el problema del
SECRET_KEY
que me aparecía cuando subí un proyecto de Django a Github. Saludos!de nada
Muchas gracias por esta guia, he estado batallando con las vistas en django, y gracias a esto puedo continuar mi proyecto. Un abrazo