¿Cómo construir tu propio blog? (Post N° 1)

Desde hace algún tiempo, he tenido el deseo de crear mi propio contenido y finalmente me animé a hacerlo a través de un blog donde pueda compartir mis proyectos y experiencias. En este espacio, me enfocaré en temas relacionados con la inteligencia artificial y la ciencia de datos. Inicialmente pensé en crear este blog de la opción más sencilla: comprando un dominio y utilizar WordPress u otra herramienta de formato pre-armados para construirlo. Si bien esa ruta podría haber sido una excelente elección debido a la facilidad de crear un blog como un sitio web, tenía un interés personal en aprender más sobre HTML y CSS. Debido a esto, decidí tomar un camino más desafiante, construyéndolo desde una plantilla de html y utilizando diversas herramientas (Python, HTML, Docker) u entre otros.

¿Cómo empecé?

Para ser honesto, durante este proyecto he tenido que recurrir constantemente a dos fuentes principales: el ChatGPT y YouTube. A continuación, les explicaré por qué las he utilizado.

• - ChatGPT: El ChatGPT es una herramienta sumamente poderosa para consultar temas de programación. Aunque ocasionalmente puede cometer errores, me ha proporcionado código muy valioso que, con algunas modificaciones, ha sido fundamental para avanzar en el proyecto. La gran mayoría de los códigos relacionados con la creación de elementos en HTML fueron proporcionados por el ChatGPT.

• - Youtube: He utilizado mucho YouTube para aprender información sobre HTML y CSS. De hecho, el diseño del front es una plantilla que compré por 8 dólares en la web. El vídeo de YouTube al que hago referencia es: https://www.youtube.com/watch?v=Tkp3FDgOueM.

¿Planilla en Youtube?

Tal como mencioné anteriormente, la mayor parte del diseño del front proviene de una plantilla adquirida a través del enlace proporcionado en YouTube. Esta plantilla incluye todos los formatos, colores y elementos necesarios, por lo que principalmente tuve que realizar algunos ajustes en ciertos aspectos, como el texto, las imágenes o la edición de secciones específicas más que otra cosa. Dicha plantilla contiene la siguiente información:

• - Style.css: Incluye todos los formatos y diseños necesarios para darle formato al HTML
• - Imagenes: Carpeta que contiene las imágenes utilizadas en la página.
• - Script.Js: Es un archivo en JavaScript con las distintas funciones.
• - Index.html: Es el HTML del diseño frontal de la página..

En cuanto al inicio de la página, realicé algunas modificaciones en el archivo index.html, conservando las secciones de inicio, sobre mí y artículos. Las demás secciones se eliminaron del HTML. Para este primer artículo fue necesario crear un diferente html, el cual fue llamado first.html, y sigue el mismo formato que el anterior, pero incluye principalmente elementos de texto para el blog.

¿Cómo vincular todo?

En Python, existen diversos frameworks que se pueden emplear para crear aplicaciones web o plataformas, como Streamlit, Flask o Django. En este caso, dado que se trata de una página web sencilla, opté por utilizar Flask, empleando un código bastante simple para enlazar todos los componentes del codigo. Se creó un archivo App.py, con el siguiente código:

from flask import Flask
from markupsafe import Markup
from flask import render_template

app = Flask(__name__,
template_folder='template/')

@app.route('/')
def index():
return render_template('index.html')

@app.route('/first.html')
def firsr():
return render_template('first.html')

if __name__ == '__main__':
    app.run(debug=True,host="0.0.0.0"
    ,port=8000)

Un aspecto importante a destacar utilizando Flask es que, para poder utilizar tanto imágenes como el archivo style.css (HTML), es necesario crear una carpeta llamada "static" que contenga toda esta información. En mi caso, dentro de esta carpeta, almacené el archivo style.css y las imágenes del proyecto.

Por otra parte, encapsulé todo el código en un contenedor Docker para facilitar su alojamiento en la nube. Para ello, creé el archivo requirements.txt y el Dockerfile, que contienen el siguiente código:

FROM python:3.10

ENV APP_HOME /app
WORKDIR $APP_HOME
COPY . ./

RUN pip install -r requirements.txt

EXPOSE 8080

CMD python App.py

¿Cómo publicar la web?

Finalmente, hemos llegado a la última parte de este breve artículo sobre cómo poner en producción este proyecto. Dado mi interés en aprender más sobre el uso de Azure por mi trabajo personal como laboral, decidí implementar este proyecto en los servicios en la nube de Microsoft, utilizando mi cuenta personal con ese fin. A continuación, se presentan los principales pasos que seguí para lograrlo:

• - Paso 1: Se debe crea una cuenta en Azure a través del siguiente enlace https://azure.microsoft.com/en-us/free/ (Como cualquier servicio cloud, se debe añadir una tarjeta de crédito a la cuenta)

• - Paso 2: Dentro de la consola, se debe crear un servicio de App Services, que servirá para ejecutar el Dockerfile del Github del proyecto. Este servicio se puede encontrar escribiendo en el buscador de la consola “App Services”. Se debe seleccionar la opción “Contenedor” al momento de crear el servicio.

• - Paso 3: Después de crear el servicio, ingresa a él y selecciona "Centro de Implementación" para vincular tu repositorio de GitHub con el servicio de Docker que has creado en Azure. A continuación, se detallan las principales opciones que debes configurar:

• - Origen del repositorio: Elige la opción "GitHub" como origen del repositorio

• - Autorización: Haz clic en "Autorizar" para permitir que Azure acceda a tu cuenta de GitHub y pueda obtener los detalles del repositorio.

• - Repositorio: Selecciona el repositorio de GitHub que deseas vincular con el servicio de Docker en Azure

• - Rama: Elige la rama específica de tu repositorio que deseas utilizar para la implementación en Azure..

• - Configuración de implementación: Selecciona las opciones adecuadas para tu proyecto, como la configuración de compilación y despliegue continuo. Esto dependerá de las necesidades y características de tu aplicación.

• - Guardar configuración: Finalmente, guarda la configuración realizada en el "Centro de Implementación" para vincular exitosamente tu repositorio de GitHub con el servicio de Docker en Azure.

• - Paso 4: Dominio personalizado: Después de implementar el servicio, es común que los servicios en la nube proporcionen una URL relacionada con sus servidores. En el caso de Azure, se entrega una URL como proyecto.azurewebsites.net.

Claramente, la URL proporcionada (proyecto.azurewebsites.net) no es común ni ampliamente utilizada en los sitios web convencionales. Para el desarrollo de esta pagina, se compro un dominio en GoDaddy, y se vinculo el desarrollo de este proyecto en el dominio comprado, para así, tener una URL con un dominio más normal.

Después de adquirir el dominio, regresa a las opciones del servicio de App Service creado y selecciona "Dominio Personalizado". Haz click en "Agregar dominio personalizado", y completa la información requerida, donde lo unico que deberas preocuparte es que debes registrar los registros DNS en el proveedor de dominio. Para ello, debes ingresar a tu cuenta de GoDaddy, y en la sección de DNS, debes agregar los registros que te entrega Azure.

Si logras realizar todos estos pasos, deberías tener tu proyecto en producción en la nube de Azure. En mi caso, el GitHub de todo el proyecto se encuentra en el siguiente enlace:

El enlace de Github es: FocoAnalytics

Espero poder compartir más analisis, mi ideas o otros proyecto en el futuro en este sitio personal. Tambien, me gustaría poder implementarle un Chatbot, que seria algo muy entetenido de hacer en este mismo sitio web.