Conociendo las páginas de GitHub Páginas de proyectos estáticos, Rápido

Hablemos de las páginas de GitHub; qué son y cómo puede utilizar el servicio en minutos para implementar páginas estáticas de forma gratuita. Empecemos!


Lo que es

Según GitHub, las páginas de GitHub son:

… Páginas web públicas alojadas libremente y fácilmente publicadas a través de nuestro sitio.

¿Qué significa esto para usted? Significa alojamiento gratuito y confiable de contenido estático. En general, esto fue creado por GitHub para respaldar proyectos de código abierto alojados en GitHub al darles un lugar para ofrecer documentación, demostraciones o cualquier otra experiencia interactiva dada para complementar el código en el repositorio..


Sin embargo, las páginas de GitHub se pueden usar para una variedad de proyectos y ya son compatibles con Jekyll (un potente generador de sitios estáticos basado en Ruby). Entonces, aprendamos a usarlo.!


Antes de que comencemos

Deberá registrarse para obtener una cuenta de GitHub antes de comenzar con las páginas de GitHub. Para obtener el mayor beneficio de GitHub, es muy recomendable que configure sus claves SSH. Básicamente, las instrucciones en este enlace le permiten conectar de forma segura su computadora con su cuenta de GitHub y todos sus repositorios en GitHub. Una vez que haya creado una cuenta de GitHub y haya registrado sus claves, puede descargar fácilmente la aplicación GitHub para Mac o GitHub para Windows, ambas con el respaldo oficial de GitHub.

Copia de seguridad - ¿Qué en el mundo es GitHub?

GitHub es un lugar para que las personas almacenen su código. Git es un potente sistema de control de versiones que permite a los desarrolladores realizar un seguimiento de los cambios realizados en el código en incrementos, llamado cometer, y rastrear diferentes caminos de un proyecto en particular usando ramas.


Hay muchas características de Git, e incluso más poder está bloqueado en GitHub, pero por ahora nos mantendremos enfocados en las páginas de GitHub. Si desea obtener más información sobre GitHub, consulte Git for Designers, así como Git & GitHub: una Guía para principiantes, que incluye más información sobre las claves SSH, así como algunas funciones básicas de Git que están fuera del alcance de Este artículo.


Diferentes maneras de usar las páginas de GitHub

Hay una variedad de formas en que se pueden usar las páginas de GitHub. Comenzaremos con una de las formas más rápidas..

Generador automático de páginas de GitHub

El generador automático de páginas permite a los usuarios crear su página utilizando Markdown, un lenguaje de marcado legible por humanos, diseñado para ayudar a los creadores de contenido a producir documentos con un conjunto consistente de pautas de marcado..

Entonces, ¿cómo se utiliza el generador automático de páginas? Primero, querrás crear un repositorio. Si desea que el repositorio apunte a su nombre de usuario.github.com, cree un repositorio que coincida con ese nombre. Por ejemplo, mi repositorio personal se llama jcutrell.github.com. Para acceder al generador de sitio estático, vaya a la configuración de ese repositorio (accesible en una url que sigue el formato https://github.com/username/projectname/settings). Esto mostrará un editor, que funciona con un editor de texto enriquecido Markdown. Puede copiar automáticamente en el archivo Readme.md estándar, o puede editar su contenido a su elección. Además, el generador automático también tiene un espacio para el seguimiento de Google Analytics..

Una vez que haya agregado todo el contenido relevante, puede avanzar al selector de diseño. Con múltiples temas para elegir, esta es una excelente opción para dar a los usuarios una página de destino DRY sin esfuerzo, basada en su archivo Readme, que simplemente requiere que mantenga su documentación actualizada (algo que ya debería estar haciendo). También puede bajar estas páginas desde su origen, modificarlas localmente y luego presionarlas nuevamente..

Si desea utilizar la aplicación GitHub para controlar su repositorio GitHub, aquí le explicamos cómo podría hacerlo..

Primero, querrá instalar la aplicación desde mac.github.com o windows.github.com, y siga las sencillas instrucciones de configuración..


Luego, elija el repositorio que desea clonar en su computadora seleccionando su nombre de usuario de GitHub a la izquierda y haciendo clic en Clonar a la computadora.


A continuación, configure la ubicación y el nombre que le gustaría clonar el repositorio como.


Luego, elija la pestaña de ramas a la izquierda y seleccione la páginas gh Rama que fue creada por el generador. Luego puede realizar sus ediciones localmente en la ubicación que especificó anteriormente.

Una vez que esté listo para impulsar algunos cambios para estar en vivo, vaya a la cambios pestaña y crear un compromiso con el formulario en la parte superior izquierda.


Finalmente, seleccione la ramas pestaña y haga clic publicar a la derecha de la rama gh-pages. Esto empujará todos tus cambios comprometidos a GitHub.


Si desea usar la línea de comandos para controlar su repositorio de GitHub, aquí le explicamos cómo puede hacerlo..

 git clone [email protected]: nombre de usuario / projectname.git git checkout gh-pages

Si generó una página de usuario (en lugar de un solo proyecto), la rama maestra es Las páginas de GitHub se ramifican. Simplemente clona tu proyecto de usuario para editarlo localmente.

 git clone [email protected]: username / username.github.com.git git checkout master # esto ya debería estar desprotegido de forma predeterminada

Sin embargo, el generador automático puede no ser la solución a su problema. Tal vez usted ya haya creado su sitio de forma estática y simplemente está buscando implementarlo en algún lugar.

Construirlo manualmente

Esta segunda opción es tan simple como parece. Para que las páginas de GitHub funcionen con contenido local arbitrario, primero cree el repositorio en GitHub.

Si has decidido utilizar la aplicación GitHub., Así es como crearías tus propias páginas de manual..

Selecciona el Mis repositorios pestaña de carpeta, y luego haga clic en la flecha en el repositorio con el que desea crear las páginas de GitHub. Si actualmente no tiene ningún repositorio para comenzar, puede crear uno desde dentro de la aplicación..


Si está creando páginas GitHub usando nombre de usuario.github.com, la rama maestra es la rama de las páginas, para que pueda seguir adelante y abrir el proyecto en una carpeta local, omitiendo la creación de la páginas gh rama. Si está creando páginas de GitHub para un proyecto, querrá crear una nueva rama llamada páginas gh; haga clic en el botón en el lado derecho del repositorio, luego simplemente haga clic en el botón + en el lado derecho de la rama actual.


Esto le permitirá ingresar el nuevo nombre de la sucursal.


De forma predeterminada, la nueva rama tendrá todos los archivos del proyecto actual, por lo que querrá eliminar todos los archivos del proyecto mientras se páginas gh se selecciona rama (Para estar seguro, asegúrese de que el indicador de "rama actual" muestre que se encuentra en la rama de gh-pages, a menos que esté creando páginas para nombredeusuario.github.com).


Luego, puede crear un sitio estático directamente en la carpeta de su proyecto.

Una vez que haya creado el sitio estático en la carpeta del proyecto, volverá a la aplicación GitHub y irá a la cambios pestaña a la izquierda. Esto mostrará todos los cambios que haya realizado, incluida la eliminación de los archivos originales. Crea un compromiso rellenando el formulario en la parte superior izquierda. Una vez que haya hecho esto, puede volver a la pestaña de ramas y publicar la rama gh-pages (o la rama maestra, si está creando páginas para username.github.com). Este es el paso que inserta su código en GitHub e inicia el sitio estático en el servidor.

También puede clonar fácilmente el repositorio a través de la línea de comando seleccionando la URL en la parte superior de la página del proyecto y ejecutando el siguiente comando.

 git clone [email protected]: username / projectname.git

A continuación, deberá crear una nueva rama llamada páginas gh; esta rama tiene que estar completamente vacía, también. Ejecute estos comandos:

 git checkout --orphan gh-pages git rm -rf. git commit -am "cometer páginas iniciales"

(Para más información, consulte la documentación oficial)..

Esto bajará el proyecto a una carpeta llamada nombre del proyecto (sea cual sea su proyecto) en su directorio de trabajo actual, y también tendrá automáticamente GitHub como origen remoto. Básicamente, esto significa que puede crear archivos y realizar cambios, luego seguir los siguientes comandos para rastrear esos archivos y cambios, y enviarlos a GitHub.

 git status # recupera y repite el estado actual del repositorio; Esto mostrará nuevos archivos y cambios sin seguimiento git add. # esto agrega todos los archivos nuevos creados git commit -am "Aquí está mi confirmación inicial" # esto crea un commit en su rama actual (por defecto, la rama maestra) git push origin gh-pages # esto empuja la página gh-pages a GitHub.

Este proceso se repetirá en todas las iteraciones de su sitio a medida que realice cambios. Esto funciona muy bien, pero ¿qué pasa si quieres alojar un blog estático? Podría decirse que la plataforma de blogs estática más popular, Jekyll, es compatible con las páginas de GitHub de forma predeterminada. (Jekyll fue construido por un miembro del equipo en GitHub.)

Usa Jekyll con GitHub Pages

Para usar Jekyll con GitHub Pages, primero deberá crear un sitio Jekyll localmente. Puede compilar localmente, o puede permitir que GitHub compile por usted. Para comenzar, puedes seguir esta guía sobre Octopress, un marco que resume algunas de las funciones básicas de Jekyll..

Alternativamente, puede crear un sitio Jekyll crudo. Primero, necesitarás instalar la gema jekyll. En general, esto significa ejecutar el siguiente comando:

 gema instalar jekyll

Si tienes RubyGems instalado, esto debería tirar de la última versión estable.

Eche un vistazo a la guía de uso, así como a esta guía en NetTuts. Deberá crear la estructura de archivos básica antes de que Jekyll pueda generar un sitio. Para ponerse en marcha rápidamente, eche un vistazo a Jekyll-Base de Daniel McGraw, que define la estructura de archivos necesaria para que Jekyll genere un sitio. También me tomé unos minutos para crear un script reutilizable llamado jekyll_structure. Siga las instrucciones de instalación; Si no funciona para usted, simplemente cree manualmente la siguiente estructura.


.
| - .gitignore
| - README
| - _config.yml
| - _layouts
| | - layout.html
| '- post.html
| - _posiciones
| '- 1985-10-26-Test-Post.md
'- index.html

La configuración primaria para Jekyll se pondrá en el _config.yml expediente. _layouts mantendrá los diseños que se utilizarán en la generación.

Una vez que haya creado publicaciones y páginas, y posteriormente las haya editado, simplemente puede agregarlas a su repositorio git y confirmarlas, como se explicó anteriormente:

 git añadir. git commit -am "Agregué una nueva publicación" git push origin gh-pages # o git push origin master para las páginas username.github.com

Nota: es mucho marcos de trabajo más fáciles de usar como Octopress o Jekyll Bootstrap para generar automáticamente publicaciones y páginas para Jekyll, con comandos que se asemejan rake new_post ["Post Name Goes Here"] En lugar de crear manualmente su publicación o archivos de página.


Otras cosas importantes de la nota

Es importante recordar que los repositorios establecidos como privados en GitHub crearán páginas públicas. GitHub creó esta característica para que los proyectos publiquen fácilmente la documentación; Esto se centra en torno a la idea de apertura. Los sitios estáticos alojados en GitHub no se ocultarán a nadie en el corto plazo.

No se limite al diseño o la estructura predefinidos en las páginas generadas automáticamente que proporciona GitHub. Estos son fácilmente editables simplemente bajando el repositorio a su máquina local, haciendo cambios y enviándolos.

Cuanto más aprenda sobre Git y GitHub, más cómodo se sentirá con GitHub Pages. Eche un vistazo a esta publicación en Treehouse, así como a este tutorial de Tutsplus de Jeffrey Way sobre GitHub para diseñadores.

Si desea redirigir su propio dominio a un dominio de GitHub Pages, consulte esta guía en la página de ayuda de GitHub para comenzar. Quién sabe, tal vez usted pueda deshacerse de su proveedor de alojamiento personal y volverse estático.!


Conclusión

GitHub Pages es extremadamente conveniente de usar, especialmente cuando se combina con otras herramientas como Jekyll. Aprender las herramientas de las que depende GitHub Pages lo ayudará a convertirse en un desarrollador y diseñador front-end mejor y más valioso, y es una excelente manera de mostrar sus proyectos. Además, GitHub proporciona esto como un servicio gratuito para todos, por lo que el costo para comenzar se limita al valor del tiempo que dedica a aprender. ¿Que estas esperando? Buceo en!