hernandezblasantonio/braindump/env/gitlab

GitLab

Gitlab es un servicio web de control de versiones y desarrollo de software colaborativo basado en Git. Además de gestor de repositorios, el servicio ofrece también alojamiento de wikis y un sistema de seguimiento de errores, todo ello publicado bajo una Licencia de código abierto. - Wikipedia

GitLab nos servirá como servicio gratuito para el alojamiento de código fuente de los programas-proyectos que realicemos, de manera pública.

Para lo anterior de forma general llevarás a cabo lo siguiente:

  1. Obtendrás una cuenta en GitLab.
  2. Configurarás tu entorno con los datos de tu cuenta en GitLab.

Creación de cuenta en GitLab

Crea una cuenta de usuario en GitLab accediendo a https://gitlab.com/users/sign_in#registster-pane, tomando en cuenta lo siguiente:

  1. Name: tu nombre personal.
  2. Username: será tu nombre de usuario para acceder a GitLab.
  3. Email y Email confirmation: tu correo electrónico.
  4. Password: será tu contraseña para acceder a GitLab.

Da click al botón Create an account. Ante la opción Choose your personal plan selecciona Unlimited public repositories for free y da click al botón Continue.

IMPORTANTE:

  • Tu nombre de usuario (username) de GitLab debe seguir el siguiente patrón: ApellidoPaternoApellidoMaternoNombres

    Como ejemplo mi nombre de usuario sería HernandezBlasAntonio.

  • Al momento de ser creada tu cuenta GitLab te hará llegar un correo electrónico para confirmar la creación de la misma, verificando tu correco electrónico (Verify my email address).

  • Accede a GitLab con tu cuenta de usuario, dirigete a Settings (menu desplegable ubicado en la parte superior derecha con una imagen en blanco) y en la sección Public avatar modifica tu avatar con una foto personal tamaño infantil, la más reciente que encuentres.

  • Si todo ha salido bien contarás con una página de perfil, igual que en el punto anterior pero accede a Profile.

    Como ejemplo mi página de perfil sería https://gitlab.com/HernandezBlasAntonio

Trabajando con GitLab y Git

A continuación se darán los pasos para hospedar una página web personal en GitLab (https://pages.gitlab.io), todo esto conlleva que se configure nuestro entorno de trabajo (línea de comandos en el sistema operativo). Por otro lado también servirá para plantear la forma de trabajar con un sistema de control de revisiones como Git.

Al finalizar se dan las instrucciones para integrar el servicio de comentarios ofrecido por Disqus a tu página web personal creada en GitLab.

Realiza los siguientes pasos en GitLab:

  1. Accede con tu cuenta de GitLab a https://gitlab.com/projects/new para crear un repositorio.

  2. Rellena el formulario que se te presenta tomando en cuenta lo siguiente:

    • Project name: es el nombre de tu repositorio. El valor aquí ingresado es tu nombre de usuario en GitLab seguido de gitlab.io, todo en minúsculas.

      Por ejemplo, mi nombre de usuario en GitLab es HernandezBlasAntonio y el valor ingresado ha sido: hernandezblasantonio.gitlab.io.

    • Project description: (opcional) una descripción de tu página web personal.

    • Visibility Level: selecciona la opción Public para que sea un repositorio público.

    Una vez que hayas dado clic en Create proyect se te enviará a la página principal de tu repositorio (Overview):

    • https://gitlab.com/NombreDeUsuario/nombredeusuario.gitlab.io

  3. Crea el directorio $HOME/www y dentro de él ejecuta lo siguiente para clonar (copiar) el repositorio remoto, el repositorio que creaste en el 2o. paso:

    alumno@servidor:~ $ mkdir $HOME/www
alumno@servidor:~ $ cd $HOME/www
alumno@servidor:~/www $ git clone https://gitlab.com/NombreDeUsuario/nombredeusuario.gitlab.io
Cloning into 'nombredeusuario.gitlab.io'...
Checking connectivity... done

En este momento tu directorio local $HOME/www/nombredeusuario.gitlab.io es una copia exacta del directorio remoto (https://gitlab.com/NombreDeUsuario/nombredeusuario.gitlab.io). Realmente nunca les llamaremos directorios si no más bien repositorios, local o remoto según sea el caso.

Ahora bien, realiza lo siguiente para agregar contenido a tu página web personal:

  1. Accede a $HOME/www/nombredeusuario.gitlab.io(de aquí en adelante solo le llamaré repositorio local) y crea el directorio public y dentro de él al archivo index.html con el siguiente contenido:

     <!DOCTYPE html>
   <head>
     <meta charset="UTF-8">
     <title>Inicio</title>
   </head>
   <body>
     <h1>Bienvenido</h1>
   </body>
 </html>

  2. Crea el archivo .gitlab-ci.yml dentro de tu repositorio local con el siguiente contenido:

    image: alpine:latest
pages:
  stage: deploy
  script:
  - echo 'Nothing to do...'
  artifacts:
    paths:
    - public
  only:
  - master

    En este momento tu repositorio local tendrá la siguiente estructura:

    alumno@servidor:~/www/nombredeusuario.gitlab.io $ pwd && tree -aL 1
/home/alumno/www/nombredeusuario.gitlab.io
.
├── .git
├── .gitlab-ci.yml
└── public

2 directories, 1 file

  3. Indicale a Git que determine las modificaciones hechas dentro del repositorio local con el comando git add -A.

    alumno@servidor:~/www/nombredeusuario.gitlab.io $ git add -A

  4. Identifica tus últimas modificaciones con un mensaje realizando un commit con el comando git commit -a -m "MENSAJE":

    alumno@servidor:~/www/nombredeusuario.gitlab.io $ git commit -a -m "Primer commit :)"
[master (root-commit) 21b82c5] Primer commit :)
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 index.html

    En caso de que no uses la opción -m de Git el editor de texto nano se abrirá para que escribas el mensaje.

    Nota: los mensajes que escribas podrás visualizarlos en la página principal de tu repositorio por lo que te será de ayuda escribir un mensaje claro y descriptivo de las modificaciones.

  5. Envía tus ultimas modificaciones hechas en tu repositorio local a tu repositorio remoto con el comando git push:

    alumno@servidor:~/www/nombredeusuario.gitlab.io $ git push -u origin master
Username for 'https://gitlab.com': NombreDeUsuario
Password for 'https://NombreDeUsuario@gitlab.com': 
Counting objects: 3, done.
Writing objects: 100% (3/3), 228 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://gitlab.com/NombreDeUsuario/nombredeusuario.gitlab.io
 * [new branch]      master -> master
Branch master set up to track remote branch master from origin.

    Nota: en este paso se te solicitará tu usuario (Username) y contraseña (Password) de GitLab.

Al finalizar tanto tu repositorio local como tu repositorio remoto se encuentran sincronizados por lo que puedes acceder a tu página web personal en: http://nombredeusuario.gitlab.io. Por otro lado recomiendo que visites la página principal de tu repositorio y navegues en ella.

Actualizaciones

A partir de este momento para actualizar tu página web personal en GitLab realizas los siguientes pasos:

  1. Modificas tu repositorio local: agregando/editando/borrando archivos (de HTML, CSS, ímagenes, etc).
  2. Determinas las últimas modificaciones con Git: comando git add.
  3. Identificas tus últimas modificaciones con un mensaje: comando git commit.
  4. Envias tus modificaciones a tu repositorio remoto: comando git push.
  5. Regresas al paso 1.

Como puedes observar te encuentras en un ciclo de trabajo: del 5o. paso regresas al 1o.

Disqus

DISQUS es una plataforma con la que vamos a poder integrar en nuestra web un sistema de comentarios con el que permitir una mejor participación de nuestros usuarios. - Alvaro Martínez Guaita

  1. Obten una cuenta de usuario en Disqus accediendo a https://disqus.com/profile/signup/.

    Ante el formulario obtenido ingresa tu nombre personal (Name), tu correo electrónico (Email) y una contraseña (Password) a usar para tu cuenta de usuario en Disqus.

    Disqus te hará llegar al correo electrónico dado un mensaje solicitando que verifiques la existencia de tu correo electrónico.

  2. Accede a https://disqus.com/admin/create/ y ante el formulario obtenido ingresa tu nombre de usuario de GitLab en los campos Website Name y Shortname. Si tu página web personal se encuentra en http://nombredeusuario.gitlab.io ingresa nombredeusuario-gitlab-io en los campos anteriormente mencionados.

    Al terminar da click en el botón Next y serás llevado a https://nombredeusuario-gitlab-io.disqus.com/admin/setup/, da click al botón Got it. Let's get started! y serás llevado a https://nombredeusuario-gitlab-io.disqus.com/admin/settings/install/

  3. Ante las opciones bajo What platform is your site on? da click sobre Universal Code (al final).

    Serás llevado a https://nombredeusuario-gitlab-io.disqus.com/admin/settings/universalcode/

  4. Bajo el texto Place the following code where you'd like Disqus to load: encontrarás código de HTML y JavaScript.

    IMPORTANTE: el código de HTML y JavaScript dado en esta parte es pegado en los documentos de HTML en los cuales se quiere ofrecer la oportunidad a terceras personas que dejen algún comentario dentro de tu página web personal.

    Dejo a continuación lo dado por Disqus:

     <div id="disqus_thread"></div>
 <script>
   (function() {
     var d = document, s = d.createElement('script');
     s.src = '//nombredeusuario-gitlab-io.disqus.com/embed.js';
     s.setAttribute('data-timestamp', +new Date());
     (d.head || d.body).appendChild(s);
   })();
 </script>
 <noscript>
   Please enable JavaScript to view the
   <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a>
 </noscript>

    OBSERVACIÓN: el código de HTML y JavaScript aún contiene nombredeusuario-gitlab-io, modifica esto de acuerdo a tu situación.

El código de HTML y JavaScript puedes integrarlo en cada uno de los documentos de HTML que formen parte de tu página web personal, dentro del elemento <body>.