Prepara tu entorno Django para trabajar con HTML, CSS, javascripts, imágenes y GitHub
Tags: django, python, spanish, github
Published: 2023-02-21 13:34:17

## :checkered_flag:  Tabla de contenido  :checkered_flag:

- [Idea del post](#idea-del-post)
- [Creando entorno](#creando-entorno)
- [Instalacion Django y configuracion del proyecto](#instalacion-django-y-configuracion-del-proyecto)
- [Configuracion de archivos estaticos](#configuracion-de-archivos-estaticos)
- [Configuracion de seguridad basica en django](#configuracion-de-seguridad-basica-en-django)
- [Contenido en el html y css](#contenido-en-el-html-y-css)
- [Creando vista para mostrar index.html](#creando-vista-para-mostrar-indexhtml)
- [Ejecutando servidor django para mostrar contenido](#ejecutando-servidor-django-para-mostrar-contenido)
- [Notas de librerias instaladas](#notas-de-librerias-instaladas)
- [Subir a github](#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 :heart: 

__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


![django visual studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8hdkfrnbfkfcovildwz.png) 

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](https://dev.to/oswald_echeverri/notas-rapidas-git-github-46e8)

![git init en proyecto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/daog10vmnuq5rs57ohni.png)

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` 


![activar entorno virtual](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7c8evw6414ud3rjr3b8g.png)

> - 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`

![pip update conf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7ufqm9h9voe6jt8hwx2.png)



![Install django](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2dgy22xfjjxqdbnfqjs.png)


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' 


![startproject ejemplo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uw9l1p0agtbmtkgekqlb.png)


Configuraremos el documento setting de nuestra startproject el cual es este 


![setting startproject](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlpggqxmqzgmgo73uhhb.png)

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 `,`


![intall app conf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ac6n6ut4nvcc437p08l.png)

## 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 



![archivos staticos ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nx5gxoizkpfgx2cqnmy.png)



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 

![html indexacion ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pnhkc6eh8rxvqt5doil.png)



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 


![Import os ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mg0tewhf6rstwgw1aha1.png)


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


![estructura](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0u9cdi7mqxmnfi5gtahm.png)


![Image 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb9rj5q7hmz71887j5sz.png)


![Image 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/va2t0cdrvprvkgu5ulqf.png)

quedando la estructura de la siguiente manera 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0g7bxs789xj0fu44e5n.png)
> 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


![ignore y readme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94yy1p13vykszc081n4m.png)


## 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](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 


![ignore 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92543twltejsk1qxhedo.png)


![ignore 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9x9qc7riveqbkziv0w5.png)

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 



![ignore 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0kjyft0n9cd8j7kag8x.png)


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


![env conf1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03emfpmtk8es8810w4d3.png)


Instalamos desde el cmd con el entorno (env) activado y en el directorio raiz `pip install django-environ`  
 

![Ienviron 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0eazjcrtph6qun4ssukk.png)

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 


![environ 333](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ril44udkinbfjp03yehu.png)

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
1. El nombre de la variable y la variable que es el key deben estar pegados
2. 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 


![environ configg 4444](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vuuxrm5x19m239z5a6cd.png)

Ahora nos dirigimos al documento setting y remplazamos las variables de la siguiente manera


![cambio variable environ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ysq87lmrdnk3sojwdpt.png)

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


![contenido html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ag5ipf9wnknyx25zd08e.png)


En cambio en el css no se pone nada para dar estilos asi solo le cambiaremos el color al h1 


![css mod h1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xo652um904xpeduyhpqu.png)

## 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


![archivo views py ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdduee4h41ydeotq5p4c.png)

> 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 


![configuracion indes y view ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bvnct5vuna8h77nh5tq.png)

ahora configuramos la url en `urls.py`


![configuracion urls ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sywxq64b83lc2h5d5vzq.png)

## 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 


![ejecucion django](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2uunjvi117oougqc6tc.png)

> - 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`


![Mostrar en pantalla](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxcbaalj7p8rxz82qvbw.png)


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 


![lista de librerias instaladas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvydwxs9v61nht92zu3t.png)

## 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"`


![Git status ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65m4lm0m9p361jgc63o9.png)

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

![git add](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svcvo2kooqja9yh483i4.png)


![Git commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chnxof77q3p87svrm3co.png)

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 


![git log ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0n2ct4zhhtgaxjypkrcp.png)

Como puedes ver usando `git log` vemos los dos commit que realice.

Ahora crearemos un repositorio en github con el nombre `django-template`


![repositorio github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwfajarwl7ss00v1vik8.png)

una vez creado el repositorio vacio nos sale una guia para subir el repositorio


![ayuda github ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxgjxix85jgdc7duuz1z.png)

Copiamos el link http del repositorio 

![imagen repo git ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gyo41chn5vc8lvcthxk2.png)

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`


![git push ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8i9zoplm19rh98kx6hp.png)

Si resfrescamos el navegador en el github podemos ver que todo se ha subido correctamente 


![subido todo correctamente](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6jzolg1ozro3f6migk8.png)

De ahora en adelante cada vez que deses subir actualizaciones a github recuerda 
1. Corregir todos los errores antes de subirlo
2. hacer `git add` y `git commit` en la raiz o en la rama que deses subir 
3. 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`