GitHub

GitHub es una forja (plataforma de desarrollo colaborativo) para alojar proyectos utilizando el sistema de control de versiones Git. Desde enero de 2010, GitHub opera bajo el nombre de GitHub, Inc. - Wikipedia

GitHub 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 GitHub.
  2. Configurarás tu entorno con los datos de tu cuenta en GitHub.

Creación de cuenta en GitHub

Crea una cuenta de usuario en GitHub accediendo a https://github.com/join, tomando en cuenta lo siguiente:

  1. Username: será tu nombre de usuario para acceder a GitHub.
  2. Email Address: tu correo electrónico.
  3. Password: será tu contraseña para acceder a GitHub.

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 GitHub debe seguir el siguiente patrón: ApellidoPaternoApellidoMaternoNombres

    Como ejemplo mi nombre de usuario sería HernandezBlasAntonio.

  • Al momento de ser creada tu cuenta GitHub 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 GitHub 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 profile modifica tu Profile picture 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 Your profile.

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

Trabajando con GitHub y Git

A continuación se darán los pasos para hospedar una página web personal en GitHub (https://pages.github.com), 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 GitHub.

Realiza los siguientes pasos en GitHub:

  1. Accede con tu cuenta de GitHub a https://github.com/new para crear un repositorio.

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

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

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

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

    • Public: activa esta opción para que sea un repositorio público.

      Una página web personal hospedada en Github siempre es pública aún cuando el repositorio sea creado como privado (Private).

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

    • https://github.com/NombreDeUsuario/nombredeusuario.github.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://github.com/NombreDeUsuario/nombredeusuario.github.io
    Cloning into 'nombredeusuario.github.io'...
    Checking connectivity... done
    

En este momento tu directorio local $HOME/www/nombredeusuario.github.io es una copia exacta del directorio remoto (https://github.com/NombreDeUsuario/nombredeusuario.github.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.github.io(de aquí en adelante solo le llamaré repositorio local) y crea el 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. Indicale a Git que determine las modificaciones hechas dentro del repositorio local con el comando git add -A.

    alumno@servidor:~/www/nombredeusuario.github.io $ git add -A
    
  3. Identifica tus últimas modificaciones con un mensaje realizando un commit con el comando git commit -a -m "MENSAJE":

    alumno@servidor:~/www/nombredeusuario.github.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.

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

    alumno@servidor:~/www/nombredeusuario.github.io $ git push -u origin master
    Username for 'https://github.com': NombreDeUsuario
    Password for 'https://NombreDeUsuario@github.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://github.com/NombreDeUsuario/nombredeusuario.github.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 GitHub.

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.github.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 GitHub 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 GitHub en los campos Website Name y Shortname. Si tu página web personal se encuentra en http://nombredeusuario.github.io ingresa nombredeusuario-github-io en los campos anteriormente mencionados.

    Al terminar da click en el botón Next y serás llevado a https://nombredeusuario-github-io.disqus.com/admin/setup/, da click al botón Got it. Let's get started! y serás llevado a https://nombredeusuario-github-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-github-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-github-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-github-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>.