Ejercicio: publicación del repositorio

  • 5 minutos

En la empresa de juguetes, los desarrolladores del sitio web se han ofrecido a ayudarle a escribir la plantilla de Bicep. Les ha dicho que mantiene el código de Bicep en un repositorio, y le han pedido que publique el repositorio. En este ejercicio va a publicar el repositorio de Git para que los compañeros puedan ver los archivos y colaborar con usted.

Durante el proceso, hará lo siguiente:

  • Crear un nuevo repositorio remoto.
  • Configurar el repositorio de Git local para que se integre con el repositorio remoto.
  • Insertar los cambios del repositorio local en el repositorio remoto.
  • Comprobar que los cambios aparecen en el repositorio remoto.

Creación de un repositorio en GitHub

  1. En un explorador, vaya a GitHub. Inicie sesión con la cuenta de GitHub o cree una si no la tiene.

  2. Seleccione el icono más (+) de la esquina superior derecha de la ventana y, a continuación, seleccione Nuevo repositorio.

    Captura de pantalla de la interfaz de GitHub que muestra el menú para crear un nuevo repositorio.

  3. Escriba los detalles del nuevo repositorio:

    • Propietario: seleccione el nombre de usuario de GitHub en el menú desplegable. En la captura de pantalla, mygithubuser es el nombre de la cuenta de GitHub del propietario del repositorio. Usará el nombre de la cuenta más adelante en este módulo.
    • Nombre del repositorio: escriba un nombre breve pero descriptivo. En este módulo, use toy-website-workflow.
    • Descripción: incluya una descripción para ayudar a otros usuarios a comprender el propósito del repositorio.
    • Privado: puede usar GitHub para crear repositorios públicos y privados. Cree un repositorio privado, ya que solo las personas de dentro de la organización deben acceder a los archivos del sitio web de juguetes. Puede conceder acceso a otros usuarios más adelante.

    Cuando haya terminado, la configuración del repositorio debe ser como la de la siguiente captura de pantalla:

    Captura de pantalla de la interfaz de GitHub que muestra la configuración del repositorio que se va a crear.

  4. Seleccione Create repository (Crear repositorio).

  5. En la página de confirmación que aparece, anote la dirección URL del repositorio. Puede usar el botón de copia para copiar la URL. La va a usar en breve.

    Captura de pantalla de la interfaz de GitHub que muestra los detalles del nuevo repositorio, con la dirección URL del repositorio resaltada.

Creación de un repositorio en Azure Repos

  1. En un explorador, vaya a Azure DevOps. Inicie sesión o cree una cuenta nueva.

  2. Si va a crear una nueva cuenta, siga las indicaciones para crear una organización de Azure DevOps. Azure DevOps le pide que cree un nuevo proyecto. Continúe con el paso siguiente.

    Si ha iniciado sesión en una organización existente de Azure DevOps, seleccione el botón Nuevo proyecto para crear un nuevo proyecto.

    Captura de pantalla de la interfaz de Azure DevOps que muestra el botón para crear un nuevo proyecto.

  3. Escriba los detalles del nuevo proyecto:

    • Nombre del proyecto: escriba un nombre breve pero descriptivo. En este módulo, use toy-website.
    • Descripción: incluya una descripción para ayudar a otros usuarios a comprender el propósito del repositorio.
    • Visibilidad: puede usar Azure DevOps para crear repositorios públicos y privados. Cree un repositorio privado, ya que solo las personas de dentro de la organización deben acceder a los archivos del sitio web. Puede conceder acceso a otros usuarios más adelante.

    Cuando haya terminado, la configuración del proyecto debe ser como la de la siguiente captura de pantalla:

    Captura de pantalla de la interfaz de Azure DevOps que muestra la configuración del proyecto que se va a crear.

  4. Seleccione Crear.

  5. En la página del proyecto que aparece, seleccione el elemento de menú Repositorios.

    Captura de pantalla de la interfaz de Azure DevOps que muestra el menú en la página del proyecto, con el elemento Repositorios resaltado.

  6. Anote la dirección URL del repositorio. Puede usar el botón de copia para copiar la URL. La va a usar en breve.

    Captura de pantalla de la interfaz de Azure Repos que muestra los detalles del repositorio, con la dirección URL del repositorio resaltada.

Generación de una contraseña de Git

Si trabaja con Azure Repos desde Visual Studio Code en macOS, debe usar una contraseña especial diferente a la que usa para iniciar sesión.

Nota:

Si usa Windows, vaya a la sección siguiente, Configuración del repositorio de Git local.

  1. Seleccione el botón Generar credenciales de Git.

    Azure Repos crea una contraseña aleatoria para que la use.

  2. Anote el valor de Contraseña. La va a usar en breve.

Mantenga el explorador abierto. Volverá al repositorio más adelante en este ejercicio.

Configuración del repositorio de Git local

  1. Para asegurarse de que está en la rama main, escriba el siguiente comando en el terminal de Visual Studio Code:

    git checkout main

  2. Escriba el siguiente comando para integrar el repositorio local con el repositorio remoto que ha creado. Reemplace YOUR_REPOSITORY_URL por la dirección URL que ha guardado anteriormente.

    git remote add origin YOUR_REPOSITORY_URL

    Observe que está usando el comando git remote add para crear una nueva referencia a un repositorio remoto. Asigne el nombre origin, que es el estándar, a la referencia.

  3. Compruebe que se ha creado el control remoto.

    git remote -v

    La salida tendrá un aspecto similar al del ejemplo.

    origin  https://github.com/mygithubuser/toy-website.git (fetch)
origin  https://github.com/mygithubuser/toy-website.git (push)

    origin https://myuser@dev.azure.com/myuser/toy-website/_git/toy-website (fetch)
origin https://myuser@dev.azure.com/myuser/toy-website/_git/toy-website (push)

Inserción de los cambios mediante la CLI de Git

  1. Escriba el siguiente comando en el terminal de Visual Studio Code:

    git push -u origin main

    Dado que la rama local actual es main, este comando indica a Git que la rama main local realiza un seguimiento de la rama main del repositorio remoto. También inserta las confirmaciones del repositorio local en el remoto.

  2. Esta es la primera vez que usa este repositorio remoto, por lo que el terminal le pide que seleccione cómo autenticarse. Elija la opción para usar el explorador.

  3. Siga las instrucciones del explorador para iniciar sesión y autorizar a Visual Studio Code a acceder al repositorio de GitHub.

  4. En la ventana del terminal, Git muestra una salida similar a la del ejemplo siguiente:

    Enumerating objects: 16, done.
Counting objects: 100% (16/16), done.
Delta compression using up to 8 threads
Compressing objects: 100% (11/11), done.
Writing objects: 100% (16/16), 2.30 KiB | 785.00 KiB/s, done.
Total 16 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), done.
To https://github.com/mygithubuser/toy-website.git
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

    Estos resultados indican que Git ha insertado correctamente el contenido del repositorio en el repositorio remoto.

  1. Escriba el siguiente comando en el terminal de Visual Studio Code:

    git push -u origin main

    Dado que la rama local actual es main, este comando indica a Git que la rama main local realiza un seguimiento de la rama main del repositorio remoto. También inserta las confirmaciones del repositorio local en el remoto.

  2. Esta es la primera vez que usa este repositorio, por lo que se le pide que inicie sesión.

    Si usa Windows, escriba las mismas credenciales que ha usado para iniciar sesión en Azure DevOps anteriormente en este ejercicio.

    Si usa macOS, pegue la contraseña que ha generado anteriormente en este ejercicio.

  3. En la ventana del terminal, Git muestra una salida similar a la del ejemplo siguiente:

    Enumerating objects: 16, done.
Counting objects: 100% (16/16), done.
Delta compression using up to 8 threads
Compressing objects: 100% (11/11), done.
Writing objects: 100% (16/16), 2.30 KiB | 785.00 KiB/s, done.
Total 16 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Analyzing objects... (16/16) (5 ms)
remote: Storing packfile... done (165 ms)
remote: Storing index... done (75 ms)
To https://dev.azure.com/myuser/toy-website/_git/toy-website
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

    Estos resultados indican que Git ha insertado correctamente el contenido del repositorio en el repositorio remoto.

Incorporación de un archivo LÉAME

Ahora que los compañeros van a usar el repositorio, es importante crear un archivo LÉAME.md para ayudarles a comprender para qué es el repositorio y cómo pueden empezar a trabajar con él.

  1. Abra el Explorador de Visual Studio Code.

  2. Agregue un nuevo archivo en la raíz de la estructura de carpetas actual y asígnele el nombre LÉAME.md.

  3. Copie el texto siguiente en el archivo:

    # Toy company's website

This repository contains the website for our toy company.

## How to use

The Azure infrastructure is defined using [Bicep](/azure/azure-resource-manager/bicep).

To deploy the website's Azure resources, use the _deploy/main.bicep_ file.

    Sugerencia

    Se trata de un archivo LÉAME de marcador de posición, por lo que no tiene mucho contenido útil. Cuando trabaje con sus propios repositorios de Git, cree un archivo LÉAME que ayude a cualquiera a comprender cómo empezar a trabajar con el código. Imagíneselo como un manual ligero para el proyecto.

  4. Guarde el archivo.

  5. Almacene provisionalmente y confirme el archivo en el repositorio de Git local. Puede elegir si confirma mediante la CLI de Git o mediante Control de código fuente de Visual Studio Code.

Reinserción mediante Visual Studio Code

Ahora que ha confirmado un nuevo archivo, debe insertar los cambios de nuevo para que el repositorio remoto tenga los archivos más recientes. Esta vez va a usar Visual Studio Code para insertar en el repositorio remoto.

  1. Abra Control de código fuente de Visual Studio Code.

  2. Seleccione el icono con tres puntos del lado derecho de la barra de herramientas Control de código fuente y luego Insertar.

    Captura de pantalla de Visual Studio Code que muestra el menú Control de código fuente, con el elemento de menú Insertar resaltado.

    Observe que no se le pide que vuelva a iniciar sesión. Las credenciales se comparten entre la CLI de Git y Visual Studio Code.

Comprobación de los cambios en GitHub

Ahora que ha insertado los cambios en el repositorio remoto, puede inspeccionar el contenido del repositorio en GitHub.

  1. En el explorador, actualice la página del repositorio.

  2. Observe que los archivos que ha creado ahora aparecen en la lista, también el archivo LÉAME.md.

    Captura de pantalla de la interfaz de GitHub que muestra el repositorio, incluida la estructura de archivos y carpetas.

  3. Examine la interfaz de GitHub para explorar los archivos, y observe que se muestran todos los cambios. Dado que GitHub tiene la lista completa de cambios en cada archivo, incluso puede ver el historial de un archivo, igual que cuando trabaja en Visual Studio Code.

Comprobación de los cambios en Azure Repos

Ahora que ha insertado los cambios en el repositorio remoto, puede inspeccionar el contenido del repositorio en Azure Repos.

  1. En el explorador, actualice la página Repositorios.

  2. Observe que los archivos que ha creado ahora aparecen en la lista, también el archivo LÉAME.md.

    Captura de pantalla de la interfaz de Azure DevOps que muestra el repositorio, incluida la estructura de archivos y carpetas.

  3. Examine la interfaz de Azure Repos para explorar los archivos, y observe que se muestran todos los cambios. Dado que Azure Repos tiene la lista completa de cambios en cada archivo, incluso puede ver el historial de un archivo, igual que cuando trabaja en Visual Studio Code.