Skip to content

Home

Jump to bottom
Manu edited this page Nov 1, 2017 · 7 revisions

Taller club robótica wiki!

GitHub es un sistema de control de versiones basado en Git, Wikipedia.

  • Es un repositorio gratuito y un espacio colaborativo.
  • Contiene todas las versiones de los cambios realizados
  • Puede descargarse toda la historia de un proyecto
  • Pueden recuperarse versiones anteriores
  • Pueden crearse ramas branch diferentes, hacer cambios y subirlos al repositorio
  • Está pensado para trabajar con código
  • Es gratuito
  • Es escalable, no tiene problemas de espacio
  • Facilidad de colaborar con cualquier proyecto
  • Utiliza Markdown
  • Tiene una wiki, está
  • Tiene la opción de comentarios y aperturas de problemas issues
  • Gran comunidad de usuarios y mucha documentación
  • GitHub Pages para crear y albergar (hosting) un sitio web estático a partir de los documentos del repositorio.

Comenzamos creando una cuenta en GitHub.

  • Y un repositorio, por ejemplo username.github.io con el nombre que hayamos puesto a nuestra cuenta.

Introducción a crear una web con github pages

¿Qué es un template?

  • Un template es un archivo que contiene etiquetas HTML y etiquetas especiales definidas por un motor de plantillas, necesarias para conformar una página web.

  • Las etiquetas del motor de plantillas permiten realizar ciertas operaciones como obtener datos de fuentes externas para inyectarlos dentro del código HTML y controlar la manera en que diversos elementos de la página van a ser mostrados, por ejemplo creamos en el repo username.github.io un index.html y copiamos lo siguiente:

<!DOCTYPE html>
<html>
  <head>
<title>Mi web</title>
  </head>
  <body>
    <h1>Hola makinas</h1>
    <h2>El primer post</h2>
    <p>Esto es un parráfo de lo que quieras</p>
  </body>
</html>

  • Con esto ya tendríamos una web estática, se acabo la charla, nos vemos en la siguiente ;-)

  • Es un espacio gratuito para albergar los ficheros que van a constituir una página web estática. Se trata de un conjunto de páginas web públicas albergadas gratuitamente en GitHub bajo el dominio github.io (o cualquier otro dominio que se escoja). La misma página de GitHub Pages está creada y es mantenida a través de Jekyll.

  • Los repositorios de origen de las Páginas GitHub tienen un límite recomendado de 1 GB.

  • Limitaciones

  • Los sitios publicados de GitHub Pages no pueden tener más de 1 GB.

  • Los sitios de Páginas GitHub tienen un límite de ancho de banda de 100 GB por mes.

  • Los sitios de Páginas GitHub tienen un límite de 10 compilaciones por hora.

Algunos comandos básicos

  • Comandos para crear una rama y copiar los cambios de Master a gh-pages git checkout -b gh-pages

git push -u origin gh-pages git checkout

  • Trabajando en la rama Master y subir los cambios a gh-pages git push origin master

  • Ahora cambiamos a la rama gh-pages git checkout gh-pages

  • Mezclamos los cambios de la rama Master sobre la rama gh-pages git merge master

  • Subimos los cambios a la rama gh-pages git push origin gh-pages

  • Y volvemos a la rama Master git checkout master

  • Por si en algún momento queremos eliminar o despublicar o simplemente debemos de borrar la rama gh-pages git push origin --delete gh-pages

  • Para que veamos todo el contenido git add A

  • Y ahora lo visualizamos, muy importante este comando para saber como esta todo git status

  • Más los de siempre git pull git add . git commit -a -m "Cambios realizados" git push

  • Pero todo esto es muy bonito pero desde una consola y en local, si queremos algo más visible se puede hacer todo en la misma web de GitHub con cualquier navegador o desde programas (GUI clients) como estos: para Windows, Mac o Linux.

Pero que web más sosa que acabo de hacer

  • Pues para esto tenemos plantillas (Templates) y a Jekyll entre otros, cómo son Hugo, Boosttrap, Pelican.

  • Pero nos vamos a quedar con Jekyll por su desarrollo y facilidad de uso.

¿Qué es Jekyll?

  • Jekyll es un software de creación de blogs estáticos, escrito en Ruby por Tom Preston-Werner, uno de los creadores de Github, por lo que está perfectamente integrado con este. No es muy flexible, pero eso es precisamente una de sus mejores características si nuestro objetivo es simplemente escribir y no preocuparnos por nada más. El usar herramientas más potentes hace que perdamos el tiempo en cosas mucho menos importantes y no nos centremos en lo esencial, que es escribir.

Ventajas de tener un link estático

  • Sencillez y simplicidad Jekyll reduce todo al mínimo, eliminando una gran cantidad de complejidad:

    Sin base de datos A diferencia de WordPress y otros sistemas de gestión de contenido (CMS), Jekyll no tiene una base de datos. Todas las publicaciones y páginas se convierten a HTML estático antes de la publicación. Esto es excelente para la velocidad de carga y porque no se realizan llamadas a la base de datos cuando se carga una página.

    Sin CMS Simplemente escriba todo su contenido en Markdown, y Jekyll lo ejecutará a través de plantillas para generar su sitio web estático. GitHub puede servir como un CMS si es necesario porque puede editar contenido en él.

    Rápido Jekyll es rápido porque, al ser desmantelado y sin una base de datos, solo está publicando páginas estáticas. Mi tema base, Jekyll Now, solo hace tres solicitudes HTTP, ¡incluida la imagen de perfil y los íconos sociales!.

    Mínimo Su sitio web Jekyll no incluirá absolutamente ninguna funcionalidad o características que no esté utilizando.

    Control de diseño Pase menos tiempo luchando con plantillas complejas escritas por otras personas, y más tiempo creando su propio tema o personalizando un tema base sin complicaciones.

    Seguridad La gran mayoría de las vulnerabilidades que afectan plataformas como WordPress no existen porque Jekyll no tiene CMS, base de datos o PHP. Por lo tanto, no tiene que perder tanto tiempo instalando actualizaciones de seguridad.

    Alojamiento conveniente Conveniente si ya usas GitHub, eso es. GitHub Pages compilará y alojará su sitio web Jekyll sin cargo, mientras maneja simultáneamente el control de versiones.

Vamos a intentarlo

  • Hay varias formas de comenzar con Jekyll, cada una con sus propias variaciones. Aquí hay algunas opciones:

  • Instale Jekyll localmente a través de la línea de comando, cree un nuevo sitio web repetitivo utilizando jekyll new, compile localmente con la compilación de jekyll y luego visualizalo. (El sitio web de Jekyll muestra este flujo de trabajo).

  • Clona un reposiotio en tu ordenador personal, instala Jekyll localmente a través de la línea de comandos, realiza actualizaciones en tu sitio web, compila localmente y luego visualizalo.

  • Forkea un repositorio, realiza cambios y luego visualízalos.

Empezaremos con la opción más rápida y fácil: hacer un fork. Esto nos pondrá en funcionamiento en unos minutos y no tendremos que instalar dependencias. Esto es lo que vamos a hacer directamente en GitHub.com en el navegador:

  1. Crea nuestro sitio web potenciado por Jekyll.
  2. Crealo gratis en GitHub Pages.
  3. Personalízalo para incluir nuestro nombre, avatar y enlaces sociales.
  4. ¡Publica tu primer post en el blog!
  • Ya no hace falta configurar ninguna rama a parte, antes se hacía otra rama con gh-pages, y ahora todo es en la rama master.

Se puede cambiar los archivos de tu blog de aquí en adelante de una de las tres formas. Elije la que más te conviene:

  • Edita archivos en tu nuevo repositorio nombre_repositorio.github.io directamente en el navegador en GitHub.com (como explico a continuación).

  • Use un editor de contenido de GitHub de terceros, como Prose para desarrollo. Está optimizado para Jekyll, lo que hace que sea más fácil editar Markdown, escribir borradores y cargar imágenes.

  • Clona tu repositorio y haz actualizaciones localmente, y luego empújalas git push a tu repositorio de GitHub.

Configura el blog

  • Para ello necesitas editar el archivo _config.yml, así que pulsa sobre él y después selecciona el icono del lapicero para editarlo. En él podrás configurar:

  • Nombre del blog (name): Escribe aquí el nombre del sitio, o simplemente tu nombre.

  • Descripción (description): Una breve explicación sobre lo que vas a hablar en el blog.

  • Avatar (avatar): la url de tu avatar. Puedes simplemente copiar la url del avatar de github, de algún otro sitio donde lo tengas alojado, o alojarlo en este mismo repositorio arrastrado la imagen desde tu propio ordenador a la carpeta images del repo.

  • Enlaces a tus redes (footer-links): aquí puedes configurar los iconos que aparecerán en la parte inferior de tu blog, y que enlazarán con información extra, como tu email, facebook, tu github, twitter, Google+ y un largo etcétera.

  • Comentarios (disqus): Si tienes una cuenta en disqus, puedes activar los comentarios en tu blog.

  • Google Analytics (google-analytics): puedes incluso medir las visitas a tu blog y qué hacen en él de forma muy sencilla con Google Analytics. Sólo tendrás que añadir el identificador correspondiente en este campo.

Sobre Markdown

Un poco de historia sobre Markdown

Esta herramienta fue creada en 2004 por [John Gruber](https://es.wikipedia.org/w/index.php? title=John_Gruber&action=edit&redlink=1), y se distribuye de manera gratuita bajo una licencia BSD.

Aunque en realidad Markdown también se considera un lenguaje que tiene la finalidad de permitir crear contenido de una manera sencilla de escribir, y que en todo momento mantenga un diseño legible, así que para simplificar puedes considerar Markdown como un método de escritura.

¿Para qué sirve Markdown?

Markdown será perfecto para ti sobre todo si publicas de manera constante en Internet, donde el lenguaje HTML está más que presente: WordPress, Squarespace, Jekyll…

Además, Markdown está cada vez más extendido en el mundo “offline”. Nada te impedirá utilizar este lenguaje para tomar notas y apuntes de tus clases o reuniones en una determinada aplicación.

Incluso podrías escribir un libro con él, ya que puedes exportar fácilmente el resultado final a un formato ePub.

  • Ir creando en el mismo taller, negritas, cursivas negritas en cursiva y más...

Esto es un H1

Esto es un H1

Esto es un H2

Esto es un H2

Esto es un H3

Esto es un H3

Esto es un H4

Esto es un H4

Esto es un H5

Esto es un H5

Clone this wiki locally