Usar github para alojar archivos externos.
En este tutorial, enseñaré cómo usar Github (Pages) para alojar archivos de fuentes, CSS, JS, e incluso imágenes.
Primero que nada, por supuesto, regístrate en Github. Una vez estés dentro, verás a la izquierda un botón verde que dice "Create repository". Haz click en él.
Ahora verás un formulario; lo único que tienes que editar es el "Repository name". Puedes ponerle el que quieras; este saldrá en la url del enlace. En mi caso, he creado una cuenta nueva para mi foro privado, y voy a llamar al repository "skin". Ahora, clickamos abajo en "Create repository" otra vez.
Ahora verás un panel grandito con un montón de info. Busca un link de texto que pone "creating a new file" y haz click. En "Name your file…" ponle "readme.md" y en el "Enter file contents here", pon lo que quieras, como si pones un punto. Yo uso esta sección para poner los créditos de un skin. Después, haz click en "Commit changes" (y de nuevo en el popup).
A continuación, en la barra de tabs, le vas a dar a "Settings" (al lado de "Insights", y ahí, le vas a dar a "Pages", dentro de "Code and automation". En "Branch", dale al dropdown que pone "None" y selecciona "main". Entonces, dale a "Save".
Volvemos a la pestaña de "Code". Ahora, en "Add file", puedes poner manualmente tus archivos (igual que hemos hecho con el readme.md) o puedes subirlos.
-> Si quieres hacer carpetas, crea un file como hemos creado el de readme, y cuando estés escribiendo el nombre, pon el nombre de la carpeta, un slash (/), y el nombre de tu archivo. Si quieres subir un archivo a la carpeta, puedes crear un archivo readme.md (que luego una vez subas tu archivo, puedes borrar).
[!!] Un pequeño addendum de cómo subir fuentes. Primero que nada, sube tus archivos de fuente (woff, woff2, ttf, svg…) a tu carpeta preferida dentro del repositorio. Tienen que estar en la misma carpeta donde vayas a subir el .css de tu fuente. Ahora, a la hora de crear una fuente, normalmente tiene esta pinta (sin el / después del arroba):
@/font-face { font-family: 'FUENTE'; src: url('/FUENTE.woff2') format('woff2'), url('/FUENTE.woff') format('woff'); font-weight: regular; font-style: normal; font-display: swap; }
Pues bien, lo único que tienes que hacer es asegurarte de que tus src están puestos así, con un puntito delante (y, lógicamente, poner los nombres de archivo correctamente, igual que se llamen en tu repositorio):
@/font-face { font-family: 'FUENTE'; src: url('./FUENTE.woff2') format('woff2'), url('./FUENTE.woff') format('woff'); font-weight: regular; font-style: normal; font-display: swap; }
Ahora, para vincular un .css, o una imagen, o whatever, ¿cómo lo hacemos? Sencillo. Tus links tienen que tener esta pinta:
https://USERNAME.github.io/REPOSITORY/…/FILE.ext
-> USERNAME: Tu nombre en github. -> REPOSITORY: El nombre del repositorio. -> …: Si tu archivo está dentro de carpetas, deberán salir aquí (mira el ejemplo si tienes dudas). -> FILE: El nombre de tu archivo. -> .ext: Extensión de tu archivo.
Un ejemplo de link podría ser, usando mi ejemplo de repositorio inicial: https://USERNAME.github.io/skin/fonts/Roboto/roboto.css
Así de sencillo. Además, para archivos de texto (como .css o .js), puedes editarlos directamente en github y (tras un pequeño periodo en el que se actualice el archivo), el link se actualizará solo, sin necesidad de volver a linkearlo.
Y eso es todo. Si me he dejado algo por el camino, algo no ha quedado claro, o cualquier otra duda, mis asks y dms están abiertos.
Se agradecen los reblogs para que llegue esta publicación a posibles afectados por la caída de Dropbox 💞
