Hospedar web en Github


En el articulo Probando Phaser: 3 en raya, aproveche la oportunidad para probar como crear una pagina web en Github. Una de las primeras cosas que aprendí es que en GitHub podemos hacer dos tipos de paginas: pagina de usuario, cuya dirección quedaría "http://<tu_nombre_de_usuario>.github.io", o pagina de proyecto, que quedaría "http://<tu_nombre_de_usuario>.github.io/<nombre_de_proyecto>". Esta es su primera ventaja, con respecto a hospedar una web en Dropbox, unas URLs mas amigables. Es importante saber que mientras paginas de usuario solo podemos hacer una, se pueden hacer tantas paginas de proyecto como proyectos tengamos o queramos hacer. Otra ventaja que tiene al respecto, es que aquí si que funcionan las URLs relativas, asi que nada de tener que reescribirlas al subir elementos adjuntos como css o imagenes.

Voy a poner como caso de ejemplo el Conversor de imagenes a base64. Antes de continuar, es importante recordar que es igual que con Dropbox, tan solo podemos hospedar paginas estáticas (HTML, CSS y Javascript).

Instrucciones:
  1. Nos registramos en Github, y descargamos el cliente para Windows. Instalamos el cliente, lo iniciamos y nos logueamos en el con las claves de nuestro usuario de Github. 
  2. Creamos un nuevo repositorio con el nombre de nuestro proyecto, en este caso "base64". Si hemos dejado las opciones por defecto, en la carpeta "Documentos" ha aparecido la carpeta "Github" y en su interior otra con el nombre del repositorio/proyecto. 

  3. Dentro de dicha carpeta, copiamos todos los archivos de la pagina web. (Importante: la pagina principal ha de llamarse "index.html"), y hacemos "commit". 
  4. Después publicamos el proyecto. 
  5. Creamos una rama ("branch") con el nombre "gh-pages", que sera la encargada de mostrar la web. 
  6. Y por ultimo, publicamos los cambios.
 Nota: Ya que en este caso el proyecto es una web en si, no ha hecho falta hacer mas cambios. Si queremos hacer una pagina web de un proyecto que tenemos Github, que no utilizara el código de este o un proyecto que no fuera una web en si, habría que borrar el contenido de la rama "gh-pages" y cargar en ella únicamente los archivos de la pagina web.

Referencias:
http://www.evaristogz.com/pagina-web-estatica-github-pages/

Comentarios

Publicar un comentario

Entradas populares de este blog

Obtener provincia a traves del codigo postal con Javascript

Imagen
Hoy quiero compartir un pequeña utilidad que hice, en Javascript, para obtener la provincia española de un determinado codigo postal. Es muy util para formularios de contacto. Por ejemplo, puede utilizarse para confirmar que la provincia y codigo postal introducido se corresponden correctamente o, como en este ejemplo, para rellenar automaticamente el campo de provincia introduciendo tan solo el codigo postal. Ejemplo: Introduzca un codigo postal valido: Codigo postal: Provincia: Código: <form> Codigo postal: <input type= 'text' id= 'entradacp' > Provincia: <input type= 'text' id= 'salidaprovincia' > </form> <script type= "text/javascript" > function darProvincia ( cpostal ){ var cp_provincias = { 1 : "\u00C1lava" , 2 : "Albacete" , 3 : "Alicante" , 4 : "Almer\u00EDa" , 5 : "\u00C1vila" , 6 : "Bada...
Leer más

GUI en Python con Glade

Imagen
Este es un pequeño ejemplo para realizar un programa en Python con una interfaz gráfica de usuario (GUI) clásica; que funcione tanto en Windows como Linux. He utilizado esto: Python 2.7 PyGTK 2.24 , un conjunto de módulos para crear GUI en Python Glade , un diseñador de interfaces de usuario Como lo he hecho desde Windows he utilizado los instalables disponibles en los enlaces de arriba. Para quien quiera hacerlo desde Linux: sudo apt-get install python2.7 sudo apt-get install python-gtk2 sudo apt-get install python-glade2 Para empezar, lo mas sencillo es diseñar la interfaz de usuario con Glade. Las diferentes partes del entorno son: Paleta de componentes: los diferentes elementos u objetos que se pueden utilizar (botones, combobox, diálogos, etc) Panel de edición: donde se van poniendo y distribuyendo los elementos Panel inspector: aquí aparecen organizados en forma de árbol los diferentes elementos según estén unos dentro de otros Panel de propieda...
Leer más

Conversor de imagenes a Base64

Imagen
He creado una pequeña utilidad para convertir imágenes png en base64. Este es un sistema que permite incrustar imágenes en una pagina web directamente codificadas en forma de texto, en vez de tenerlo en un archivo a parte. Hablando "en código", seria algo como esto: <!--- Imagen en archivo aparte ---> <img src= "./image.png" alt= "image" /> <!--- Imagen en base64 ---> <img src= "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtA AAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABoSURBVFhH7dixDYAwDABBhwEYLgshFkIMRY +UBaBxQ5HqJeTir4nLlyI3bvd1PlHYkm9ZBlIGUtMt3o81p39sfeT05RdTBlIGUgZSBlIGUgZSBl IGUgZSBlIGUgZS5QO9sFIGUgYyES9xhA3UXdTL/AAAAABJRU5ErkJggg==" alt= "image" /> Dando como resultado esto: Imagen en archivo aparte Imagen en base64 Como se puede ver el resultado es el mismo en ambos casos. Su principal ventaja es que al no cargar las imágenes de un archivo externo se reduce el n...
Leer más