5.3 KiB
| title | localeTitle |
|---|---|
| Use Github Static Pages to Host Your Front End Projects | Use las páginas estáticas de Github para hospedar sus proyectos front-end |
Beneficios
Me encanta Codepen.io, es una herramienta maravillosa y fácil de usar para la simple experimentación de front-end. Pero a medida que los proyectos de fcc se volvieron más complejos, me di cuenta de que la codificación local me iba a ahorrar muchos dolores de cabeza. Mi editor de texto y mi combo codekit son simplemente más rápidos.
- Autocompletar
- Compila todo (codepen realmente estaba arrastrando tratando de compilar Jade)
- Mejor auto-actualización
- Construido en la glorieta
- Versiones de Git
- Mejora de la experiencia inmobiliaria en pantalla.
Git a Github
Ya que estoy guardando localmente, y usando git para el control de versiones, pensé que también podría subir a Github. Además, Github tiene un servicio fantástico y gratuito para proyectos front-end llamado Github Pages . Solo actualiza tu repositorio y tus cambios están en vivo.
El funcionamiento es simple. Github comprueba si su repositorio tiene una rama llamada gh-pages y sirve cualquier código que se encuentre en esa rama. Aquí no hay cosas de back-end, pero HTML, CSS y JS funcionan como un encanto.
Lo primero es lo primero
Hagamos una nueva carpeta para tu proyecto. Usaré el proyecto Camper News como mi ejemplo.
Llegue a su directorio de trabajo y haga uno nuevo. Puedes hacer esto en la terminal (o no).
Ahora, vaya al directorio del proyecto, y (seguramente en el terminal esta vez) use el comando git init . Nota, este tutorial asume que tienes git instalado .
Esta bien impresionante Ahora estamos listos para trabajar.
Próximos pasos
Crea algunos archivos en tu directorio campNews. No sé, tal vez un index.html y probablemente app.css y app.js, o cualquier convención de nomenclatura que prefieras. Pon tu código en estos archivos. Bien, ahora estamos listos para nuestro primer compromiso. Lleva dos pasos .
git add -Apreparará todos estos nuevos archivos y el nuevo código dentro de ellosgit commit -m 'relevant message'comprometerá todo el trabajo que haya realizado en la sucursal en la que se encuentra actualmente ('maestro' de forma predeterminada)
La clave de todo esto.
OK, hasta ahora seguimos siendo locales. Hay algunas cosas que debemos hacer para tomar nuestro trabajo y trasladarlo a Github. Es en este punto que me gusta cambiar de ramas. Recuerde: github solo sirve desde páginas gh, y si ha seguido hasta ahora, su rama se llama 'maestro'. Vamos a hacer una nueva rama (local) de gh-pages.
git checkout -b gh-pages lo creará, copiará todo el trabajo de master a gh-pages y me cambiará a la rama. Uf.
git branch -d master se librará de la rama master. Suena loco, lo sé, pero ¿para qué lo necesitamos? Solo piensa en gh-pages como tu NUEVA rama maestra.
Ahora, git add -A y git commit -m 'relevant message' nuevo, por si acaso. Y prepárese para dejar su editor y terminal y conectarse en línea por primera vez.
Ve a tu perfil de github y crea un nuevo repositorio. Nombre algo relevante, como campNews.
Una vez que se haya creado, ingrese y capture la URL de clonación HTTPS. (Ignore los archivos en mi captura de pantalla, su repo estará vacío en este punto).
Poniendolo todo junto
Y puedes dejar el mundo online. ¡De vuelta a la terminal! Vamos a conectar nuestro proyecto local a este repositorio github. Todo lo que necesita es un comando.
git remote add origin <server> Simplemente reemplace el servidor con la URL HTTPS que acaba de copiar. Así que mi orden se ve así:
git remote add origin https://github.com/gkobilansky/campNews.git .
OK, hasta ahora hemos:
- Creó nuestro proyecto
- Versión en git
- Se comprometieron algunos cambios.
- Lo cambié a la rama 'gh-pages'
- Conectado a github
¡Último paso!
Empuje su proyecto a github. De nuevo, simple:
git push origin gh-pages
Ese comando se asegurará de que tus últimas confirmaciones se carguen en github. Una vez que haya hecho esto al menos una vez, su proyecto debería estar disponible en http: // nombre de usuario .github.io / repository , así que para mí es http://gkobilansky.github.io/campNews .
Una vez que todo esto está hecho, el proceso simplemente se repite:
git add -Agit commit -m 'relevant message'git push origin gh-pages
Concedido, curva de aprendizaje más pronunciada que codepen.io, pero más rápido y más flexible una vez que aprendas a hacerlo.
¡Feliz codificación!
PD. Gracias a esta guía de Roger Dudler por mantener las cosas simples.