Dos formas de implementar un sitio público de GitHub Pages desde un repositorio privado de Hugo

Mantenga sus borradores fuera del alcance del público mediante el uso de herramientas de implementación continua para publicar su sitio público de GitHub Pages, desde un repositorio privado separado.

Herramientas como Travis CI y Netlify ofrecen algunas características bastante ingeniosas, como implementar sin problemas su sitio de páginas de GitHub cuando los cambios se envían a su repositorio. Junto con un generador de sitios estáticos como Hugo, mantener un blog actualizado es bastante sencillo.

He usado a Hugo para construir mi sitio durante años, pero hasta la semana pasada nunca había conectado mi repositorio de Pages a ningún servicio de implementación. ¿Por qué? Porque el uso de una herramienta que construyó mi sitio antes de implementarlo parecía requerir tener la receta completa en un solo lugar, y si está usando GitHub Pages con la versión gratuita de GitHub, ese lugar es público. Eso significa que todas mis brillantes ideas de las tres de la mañana y borradores desordenados sin terminar (y poco divertidos) estarían disponibles públicamente, y ninguna cantidad de conveniencia continua me iba a convencer de hacer eso.

Así que mantuve las cosas separadas, con las cosas desordenadas detrás de escena de Hugo en un repositorio local de Git, y la public/carpeta generada empujándola a mi repositorio remoto de GitHub Pages. Cada vez que quería implementar mi sitio, tenía que ponerme en mi computadora portátil y hugoconstruir mi sitio, luego cd public/ && git add . && git commit… etc., etc. Y todo estaba bien, excepto por la molesta sensación de que había una mejor manera de hacer esto.

Hace un tiempo escribí otro artículo sobre el uso de GitHub y Working Copy para realizar cambios en mis repositorios en mi iPad cuando estoy fuera de casa. Me pareció extraño que pudiera hacer todo menos implementar mi sitio desde mi iPad, así que me propuse cambiar eso.

Un par de ideas brillantes de las tres de la mañana y un token de acceso revocado más tarde (oops), ahora no tengo una, sino dos formas de implementar en mi repositorio público de GitHub Pages desde un repositorio privado de GitHub completamente separado. En esta publicación, lo guiaré para lograr esto con Travis CI o usar Netlify y Make.

No tiene nada de pirateado: mi repositorio público de GitHub Pages todavía se ve igual que cuando lo presioné localmente desde mi terminal. Solo ahora, puedo aprovechar un par de excelentes herramientas de implementación para que el sitio se actualice cada vez que accedo a mi repositorio privado, ya sea que esté en mi computadora portátil o fuera de casa con mi iPad.

Este artículo asume que tiene conocimientos prácticos de Git y GitHub Pages. De lo contrario, es posible que desee separar algunas pestañas del navegador de mis artículos sobre el uso de GitHub y Working Copy y la creación de un sitio con Hugo y GitHub Pages primero.

¡Vamos a hacerlo!

Implementación de páginas de GitHub privadas a públicas con Travis CI

Travis CI tiene la capacidad incorporada (♪) para implementar en páginas de GitHub después de una compilación exitosa. Hacen un trabajo decente en la documentación al explicar cómo agregar esta función, especialmente si ha usado Travis CI antes ... lo cual no he hecho. No te preocupes, hice la mayor parte de las cosas por ti.

  • Travis CI obtiene todas sus instrucciones de un archivo de configuración en la raíz de su repositorio llamado .travis.yml
  • Debe proporcionar un token de acceso personal de GitHub como una variable cifrada segura, que puede generar utilizando travisen la línea de comando
  • Una vez que su script termina con éxito de hacer lo que le dijo que hiciera (no necesariamente lo que quiere que haga, pero esa es una publicación de blog completamente diferente), Travis implementará su directorio de compilación en un repositorio que puede especificar con la repovariable de configuración.

Configurar el archivo de configuración de Travis

Cree un nuevo archivo de configuración para Travis con el nombre de archivo .travis.yml(observe el "." Inicial). Estos scripts son muy personalizables y me costó encontrar un ejemplo relevante para usar como punto de partida; afortunadamente, ¡no tienes ese problema!

Aquí está mi básico .travis.yml:

git: depth: false env: global: - HUGO_VERSION="0.54.0" matrix: - YOUR_ENCRYPTED_VARIABLE install: - wget -q //github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_Linux-64bit.tar.gz - tar xf hugo_${HUGO_VERSION}_Linux-64bit.tar.gz - mv hugo ~/bin/ script: - hugo --gc --minify deploy: provider: pages skip-cleanup: true github-token: $GITHUB_TOKEN keep-history: true local-dir: public repo: gh-username/gh-username.github.io target-branch: master verbose: true on: branch: master

Este script descarga e instala Hugo, construye el sitio con la recolección de basura y minimiza los indicadores, luego implementa el public/directorio en el especificado repo, en este ejemplo, su repositorio público de GitHub Pages. Puede leer sobre cada una de las deployopciones de configuración aquí.

Para agregar el token de acceso personal de GitHub como una variable encriptada, no necesita editar manualmente su .travis.yml. Los travissiguientes comandos de gemas cifrarán y agregarán la variable por usted cuando los ejecute en el directorio de su repositorio.

Primero, instale traviscon sudo gem install travis.

Luego genere su token de acceso personal de GitHub, cópielo (¡solo aparece una vez!) Y ejecute los siguientes comandos en la raíz de su repositorio, sustituyendo su token por los besos:

travis login --pro --github-token xxxxxxxxxxxxxxxxxxxxxxxxxxx travis encrypt GITHUB_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxx --add env.matrix

Su token cifrado aparece mágicamente en el archivo. Una vez que se haya comprometido .travis.ymlcon su repositorio privado de Hugo, Travis CI ejecutará el script y, si la compilación tiene éxito, implementará su sitio en su repositorio público de GitHub Pages. ¡Magia!

Travis siempre ejecutará una compilación cada vez que ingrese a su repositorio privado. Si no desea activar este comportamiento con una confirmación en particular, agregue el skipcomando a su mensaje de confirmación.

Eso es genial, pero me gusta Netlify.

Bien vale.

Implementar en un repositorio separado con Netlify y Make

Podemos hacer que Netlify haga nuestra oferta usando un Makefile, que ejecutaremos con el comando de compilación de Netlify.

Así Makefilees como se ve nuestro :

SHELL:=/bin/bash BASEDIR=$(CURDIR) OUTPUTDIR=public .PHONY: all all: clean get_repository build deploy .PHONY: clean clean: @echo "Removing public directory" rm -rf $(BASEDIR)/$(OUTPUTDIR) .PHONY: get_repository get_repository: @echo "Getting public repository" git clone //github.com/gh-username/gh-username.github.io.git public .PHONY: build build: @echo "Generating site" hugo --gc --minify .PHONY: deploy deploy: @echo "Preparing commit" @cd $(OUTPUTDIR) \ && git config user.email "[email protected]" \ && git config user.name "Your Name" \ && git add . \ && git status \ && git commit -m "Deploy via Makefile" \ && git push -f -q //$(GITHUB_TOKEN)@github.com/gh-username/gh-username.github.io.git master @echo "Pushed to remote"

Para preservar el historial de Git de nuestro repositorio de páginas de GitHub separado, primero lo clonaremos, crearemos nuestro nuevo sitio Hugo en él y luego lo enviaremos de regreso al repositorio de Pages. Este script primero elimina cualquier public/carpeta existente que pueda contener archivos o un historial de Git. Luego clona nuestro repositorio de Pages public/, construye nuestro sitio Hugo (esencialmente actualizando los archivos public/) y luego se encarga de enviar el nuevo sitio al repositorio de Pages.

En la deploysección, verá líneas que comienzan con &&. Estos son comandos encadenados. Dado que Make invoca un nuevo sub-shell para cada línea, comienza de nuevo con cada nueva línea de nuestro directorio raíz. Para cdmantener nuestro control y evitar ejecutar nuestros comandos de Git en el directorio raíz del proyecto, estamos encadenando los comandos y usando el carácter de barra invertida para romper líneas largas para facilitar la lectura.

Al encadenar nuestros comandos, podemos configurar nuestra identidad de Git, agregar todos nuestros archivos actualizados y crear una confirmación para nuestro repositorio de páginas.

De manera similar al uso de Travis CI, tendremos que pasar un token de acceso personal de GitHub para enviarlo a nuestro repositorio público de GitHub Pages; solo Netlify no proporciona una forma sencilla de cifrar el token en nuestro Makefile.

En su lugar, usaremos las variables de entorno de compilación de Netlify, que se encuentran de forma segura en la configuración de nuestro sitio en la aplicación Netlify. Luego podemos llamar a nuestra variable token en el Makefile. Lo usamos para enviar (silenciosamente, para evitar imprimir el token en los registros) a nuestro repositorio de páginas pasándolo en la URL remota.

Para evitar imprimir el token en los registros de Netlify, suprimimos el eco de la receta para esa línea con el @carácter principal .

Con su Makefile en la raíz de su repositorio privado de GitHub, puede configurar Netlify para que lo ejecute por usted.

Configuración de Netlify

Configurar Netlify a través de la interfaz de usuario web es sencillo. Una vez que inicie sesión con GitHub, elija el repositorio privado de GitHub donde reside su sitio Hugo. La siguiente página a la que Netlify lo lleva le permite ingresar la configuración de implementación:

Puede especificar el comando de compilación que ejecutará su Makefile ( make allpara este ejemplo). La rama que se va a implementar y el directorio de publicación no importan demasiado en nuestro caso específico, ya que solo nos preocupa enviarlo a un repositorio separado. Puede ingresar a la masterrama de implementación típica y al publicdirectorio de publicación.

En "Configuración avanzada de compilación", haga clic en "Nueva variable" para agregar su token de acceso personal de GitHub como Variable de entorno de compilación. En nuestro ejemplo, el nombre de la variable es GITHUB_TOKEN. Haga clic en "Implementar sitio" para hacer realidad la magia.

Si ya ha configurado previamente su repositorio con Netlify, busque la configuración de Implementación continua en Configuración> Compilar e implementar.

Netlify creará su sitio cada vez que lo envíe al repositorio privado. Si no desea que una confirmación en particular active una compilación, agregue [skip ci]su mensaje de confirmación de Git.

Igual pero diferente

Un efecto de usar Netlify de esta manera es que su sitio se construirá en dos lugares: uno es el repositorio público separado de GitHub Pages al que el Makefile empuja, y el otro es su sitio Netlify que se implementa en su CDN desde su GitHub privado vinculado. repositorio. Este último es útil si vas a jugar con Deploy Previews y otras funciones de Netlify, pero están fuera del alcance de esta publicación.

El punto principal es que su sitio de Páginas de GitHub ahora está actualizado en su repositorio público. ¡Hurra!

Avanza y despliega sin miedo

Espero que el efecto de esta nueva información sea que se sienta más capaz de actualizar sus sitios, dondequiera que se encuentre. Las posibilidades son infinitas: en casa, en el sofá con su computadora portátil, en un café con su iPad o en medio de una primera cita en su teléfono. ¡Sin fin!