MT01 - Introducción a Herramientas Digitales
El módulo de Introducción a Herramientas Digitales es fundamental para familiarizarse con herramientas esenciales en el ámbito de la informática proporcionando las habilidades necesarias para trabajar de manera eficiente en entornos de desarrollo de webs, gestionar proyectos con Git y colaborar con otros utilizando GitHub, además de crear documentación legible con Markdown y MkDocs.
Para ello vimos diferentes herramientas como lo son:
Git
Git es un sistema de control de versiones distribuido ampliamente utilizado. Permite a los desarrolladores realizar un seguimiento de los cambios en el código fuente durante el tiempo, coordinar el trabajo entre múltiples personas, revertir a versiones anteriores del código y mucho más. En este módulo, los estudiantes generalmente aprenden conceptos básicos como inicializar un repositorio, realizar confirmaciones (commits), crear y fusionar ramas, resolver conflictos y colaborar en proyectos con otros desarrolladores.
GitHub
GitHub es una plataforma de alojamiento de código basada en la web que utiliza Git para el control de versiones. Permite a los desarrolladores alojar repositorios Git, colaborar con otros, realizar seguimientos de problemas (issues) y realizar solicitudes de extracción (pull requests), entre otras funciones. En este módulo, los estudiantes aprenden a crear y clonar repositorios, colaborar en proyectos, realizar seguimiento de problemas y contribuir a proyectos de código abierto. Dentro de GitHub utilizamos también una tecnología llamada GitHub Pages.
GitHub Pages
GitHub Pages es un servicio que ofrece GitHub que permite a los usuarios alojar sitios web directamente desde sus repositorios de GitHub. Esencialmente, te permite convertir tu repositorio de GitHub en un sitio web público accesible a través de un dominio proporcionado por GitHub o un dominio personalizado en caso que lo tengas.
Markdown
Markdown es un lenguaje de marcado ligero que se utiliza comúnmente para formatear texto de manera simple y rápida. Permite agregar formato básico, como encabezados, listas, enlaces e imágenes, utilizando una sintaxis sencilla y fácil de leer. MkDocs es una herramienta que permite generar sitios web estáticos a partir de archivos Markdown, lo que facilita la creación de documentación legible y bien formateada para proyectos de software. En este módulo, los estudiantes aprenden a escribir y formatear texto utilizando Markdown, así como a generar documentación con MkDocs.
Proceso Realizado
Primero se solicitaba crear una cuenta en GitHub, en mi caso ya la tenía desde hace mucho tiempo:
Luego necesitaba instalar git en mi computadora, que, otra vez, ya lo tenía instalado:
Lo que sí realicé es la configuración del nombre de manera correcta, ya que los que estaba utilizando nicolas.duarte y para la especialización lo cambié por nicolas_duarte. Para ello ejecuté el comando git config –global user.name “nicolas_duarte” para asignar dicho nuevo valor y luego git config –global –list para verificar el cambio realizado:
Posteriormente realicé la generación de una ssh key nueva para establecer una conexión segura entre mi computadora y GitHub, para ello ejecuté ssh-keygen -t rsa -C “nicolas.duarte@utec.edu.uy“ Para chequear que la key está generada ejecuté cat ~/.ssh/id_rsa.pub
Luego de generar la key la copié ejecutando (para Windows) clip <~/.ssh/id_rsa.pub
Luego la copié en mi cuenta de GitHub primero yendo a Settings dentro de mi perfil y luego a SSH and GPT Keys
Fuí a New SSH key y luego cuando se despliega el menu para agragarla la pegué dandole un nombre en el espacio correspondiente:
Luego cuando todo está completado Add SSH key
Resultando (en mi caso) lo siguiente:
Ahora con todo configurado, necesitaba realizar un fork del proyecto efdi-template del repositorio https://github.com/fablabbcn/efdi-template para ello, fui al repositorio y en la opcion fork Create new fork
Una vez realizado el fork, tengo un repositorio remoto con un template del sitio web listo para editar, resultando:
Luego cree una carpeta en mi computadora, donde cree el repositorio local al cual clone el proyecto ejecutando git clone git@github.com:NicoDQ/nicolas-duarte-efdi-2024.git creándome así la carpeta nicolas-duarte-efdi-2024 que es donde están todos los archivos correspondientes al repositorio.
Finalmente una vez con el repositorio clonado, realicé la activación del link de GitHub para utilizar GitHubPages, para ello abri con VSCode la carpeta donde está el proyecto (nicolas-duarte-efdi-2024) edite el mkdocs.yml modificando mi nombre y algnos parámetros más en el código y guarde los cambios:
(No recuerdo si realicé el link del remote con GitHub, pero si lo realicé es aquí, con el comando git remote https://github.com/NicoDQ/nicolas-duarte-efdi-2024 )
Una vez guardados los cambios, ejecute git add . para agregar todos los cambios al stage, git status para verificar los cambios realizados, luego git commit -m para realizar el primer commit y finalmente git push -u origin main para “pushear” los cambios locales al repositorio remoto de GitHub.
Luego de un minuto, se verán los cambios realizados en el link de GitHubPages, esto se debe a que por cada push se realiza un Action de GitHub para compilar y publicar hacia GitHubPages la página web.
Un punto importante aquí es la configuración necesaria de pages en el proyecto luego del primer push, es ir a Settings dentro del repositorio y luego a la opción Pages para allí seleccionar en Branch la rama de gh-pages, este proceso basta hacerlo una vez.
Ahora para cada cambio realizado en mi repositorio local unicamente debo repetir el proceso de guardar los archivos que edito con VSCode y luego una vez guardados los cambios, ejecute git add . para agregar todos los cambios al stage, git status para verificar los cambios realizados, luego git commit -m para realizar el primer commit y finalmente git push -u origin main para “pushear” los cambios locales al repositorio remoto de GitHub, luego de un minuto o menos que es lo que le lleva al Action terminar con el Job, ya puedo ver los cambios en mi web: https://nicodq.github.io/nicolas-duarte-efdi-2024/
En la sección de Recursos Utilizados encontrarás todos los recursos que utilicé para realizar esta página web con sus links correspondientes junto con una muy breve explicación de para qué me fueron útiles.