Oswaldo Echeverría

Posted on Feb 21, 2023 • Edited on Feb 26, 2023

Prepara tu entorno Django para trabajar con HTML, CSS, javascripts, imágenes y GitHub

#django #python #spanish #github

🏁 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 y git 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 ejecutar git push origin main