Cómo crear un sitio estático gratuito con páginas de GitHub en 10 minutos

Los sitios estáticos se han puesto de moda y con razón: son increíblemente rápidos y, con un número cada vez mayor de servicios de alojamiento compatibles, bastante fáciles de configurar.

No voy a entrar en todo el quién, qué, cuándo, dónde o por qué de los sitios estáticos aquí. Supongo que tiene al menos una vaga idea de lo que son o simplemente quiere crear su propio sitio y no le importan los demás detalles. De cualquier manera, esta publicación es para ti.

Primero, quiero que sepa que estoy escribiendo esto para una audiencia lo más amplia posible; no necesitas ningún conocimiento de programación para seguir, pero algo de familiaridad con la línea de comandos y Git te ayudará mucho.

Entonces, ¿cómo se puede crear un sitio estático con GitHub en 10 minutos?

Trabajaremos con dos herramientas específicas: GitHub Pages, que está diseñado específicamente para ofrecer contenido estático, y un generador de contenido estático llamado Jekyll.

Jekyll es una joya de Ruby para crear sitios estáticos fácilmente, por lo que necesitará tener Ruby instalado en su computadora si desea utilizar Jekyll. Si tiene OSX, lo más probable es que ya tenga una versión de Ruby (aunque es posible que deba actualizarla). Si no lo tiene, o está en una computadora con Windows, puede obtener más información sobre cómo instalarlo aquí: Instalación de Ruby.

Con eso fuera del camino, abra una nueva viuda terminal y escriba gem install bundler jekyll. Esto instalará Bundler (una herramienta de administración de paquetes Ruby) y Jekyll.

Una vez que esas gemas (paquetes Ruby) se hayan instalado, escriba Jekyll new my-static-site(nómbrelo como desee) que ejecutará el generador de Jekyll para crear su proyecto en un nuevo directorio. Después de crear su sitio, ingrese al directorio de su sitio recién creado escribiendo cd my-static-site(o como haya cdllamado su proyecto).

Abra su proyecto en un editor de texto y verá varios archivos y carpetas que Jekyll creó para usted. En este momento, solo necesita preocuparse por el Gemfile (no Gemfile.lock). El Gemfile es un archivo Ruby que administra todos los paquetes Ruby asociados necesarios para ejecutar un proyecto.

El archivo contendrá una línea con la versión de Jekyll, coméntelo:

#gem "jekyll", "~> 4.0.0" 

Luego agregue esta línea:

gem "github-pages", group: :jekyll_plugins 

Puede haber muchas trampas cuando instalas la gema Páginas de GitHub: a veces las gemas de las que depende están desactualizadas o las gemas que tienes instaladas localmente son demasiado modernas para las páginas de GitHub.

He descubierto que esto puede dificultar la creación y prueba de mi sitio Jekyll localmente. Puede ser más fácil probar su sitio localmente y guardar su construcción hasta que esté listo para implementar. Sin embargo, en el momento de escribir este artículo, puede especificar estas versiones de dependencia en su Gemfile y Jekyll funcionará tanto localmente como con las páginas de GitHub:

gem "jekyll", "~> 3.8.5" gem "github-pages","~> 202" , group: :jekyll_plugins group :jekyll_plugins do gem "jekyll-feed", "~> 0.11.0" end 

Gracias a Alex Waibel en StackOverflow por esa configuración más reciente.

Para ver su sitio en acción, ejecute bundle exec Jekyll servesu línea de comando. Esto iniciará un servidor y podrá ver su sitio escribiendo "localhost: 4000" en la barra de URL de un navegador.

¡Voila! Ha creado un sitio estático con Jekyll y está en el directorio del proyecto. Ha terminado en un 50%.

Consigamos esto en línea

Vaya a GitHub.com y regístrese, o si ya tiene una cuenta, seleccione el botón "nuevo" y cree un repositorio. Es importante que asigne un nombre a su repositorio según el enlace que ofrecerá su cuenta de GitHub Pages, que es your_username.github.io. Por ejemplo, mi nombre de usuario de GitHub es tfantina y mi blog es tfantina.github.io, por lo que mi repositorio de GitHub se llama: "tfantina.github.io".

De vuelta en la ventana de su terminal, envíe su sitio Jekyll desde su computadora a GitHub ejecutando los siguientes comandos:

git init git remote add origin [email protected]:/.git git commit -am “Setting up Jekyll!” git push -u origin master 

(Al sustituir su nombre de usuario y el nombre del proyecto, no necesita la apertura y el cierre).

Una vez que los cambios se hayan enviado a su repositorio, debería tener un sitio estático que funcione. Esto se debe a que estás usando la gema Páginas de GitHub y has nombrado tu repositorio de tal manera que GitHub entiende que quieres servirlo con las páginas de GitHub.

Puede confirmar esto visitando su sitio o yendo a la pestaña de configuración en GitHub y desplazándose a la sección de páginas. Debería ver un cuadro verde que muestra dónde se ha publicado su sitio:

También notará que también puede cambiar fácilmente su tema desde aquí. GitHub proporciona algunos temas predeterminados para Jekyll, pero, por supuesto, también puede crear los suyos propios.

Si su sitio dice que está publicado pero se ve en blanco, es posible que deba realizar una actualización completa o intentar ver su sitio en una ventana privada. Esto puede parecer obvio, pero me afecta casi cada vez que configuro una nueva instancia de Jekyll.

Si todo salió de acuerdo con el plan, su sitio debería verse así:

Ahí lo tienes: en solo unos minutos has creado e implementado un sitio web estático con páginas de GitHub. Pero probablemente quieras poder poner algo de contenido en tu página.

Prometí que esto solo tomaría diez minutos, por lo que no me sumergiré en todos los detalles de las páginas, la portada o el lenguaje de plantillas de Liquid. Esa es una publicación para otro día. Pero compartiré cómo crear tu primera publicación.

De vuelta en su editor de texto, abra la carpeta "_posts". Ya hay una publicación que le da la bienvenida a su nuevo blog. Cree un nuevo archivo de rebajas y guárdelo con un nombre en este formato: AÑO-MES-DÍA-TÍTULO.markdown (ver más abajo):

Una publicación de Jekyll contiene dos secciones: material preliminar y cuerpo.

La parte delantera le da instrucciones específicas a Jekyll, como el título de la publicación, qué diseño usar y cuándo se escribió la publicación.

Front Matter es altamente personalizable. Por ejemplo, quería que mis publicaciones tuvieran imágenes de héroe, así que creé una lead_imageetiqueta y coloqué algo de sintaxis en mi diseño para verificar específicamente las imágenes principales en la portada de cada publicación. El lenguaje de plantillas Liquid facilita la extracción de contenido desde el principio hasta su tema.

Hay mucho más que puede hacer con la materia preliminar, pero comencemos con un ejemplo genérico.

La portada predeterminada se ve así:

— layout: post title: "Welcome to Jekyll!" date: 2019-11-09 18:07:11 -0600 categories: jekyll update — 
  • Diseño le dice a Jekyll en qué diseño desea que se muestre el contenido. Puede tener varios diseños para diferentes páginas o tipos de publicaciones.
  • El título de la publicación
  • La fecha de publicación
  • Categorías, que son esencialmente etiquetas. Puede agregar tantos como desee separados por espacios.

Después de la primera parte, su publicación se puede escribir en Markdown, lo que le brinda mucha flexibilidad para escribir el contenido de su publicación.

Una vez que haya terminado su publicación, guárdela y abra la ventana de su terminal.

git commit -am “Publishes first post git push

Después de un minuto (y tal vez una actualización), podrá ver su publicación.

¡Con suerte, ahora tiene un sitio estático en funcionamiento en las páginas de GitHub creadas con Jekyll! Si tiene algún problema o pregunta, envíe un tweet a @tfantina, o puede enviarme un correo electrónico a [email protected]