Creando nuestra pagina web en GitHub

53941fb8-643d-11e3-919a-ca5f9608537c

Hoy en día alojar nuestra pagina web es bastante sencillo, pues contamos con muchos servicios gratuitos que nos ofrecen este tipo de servicio, aunque claro no todos nos ofrecen estar online todo el tiempo, así como muchas veces restringen el ancho de banda, el espacio de almacenaje, etc. por ello hoy en día les hablare de el servicio de alojamiento web de GitHub.

cabe destacar que no es compatible con algunos scripts ya que esta pensada mas que nada para alojar paginas en HTML fijas, aun así si sigues este tutorial podrás crear un Blog o una Wiki de forma fácil, aunque deberás usar la consola de linux muchas veces.

Pasos a Seguir:

1- Primero que nada nos registraremos en GitHub y crearemos un nuevo repositorio haciendo click en el botón que dice “New Repository” .

Screenshot from 2013-12-19 18:06:32En el Formulario que nos saldrá a continuación solo debemos cambiar el nombre de el repositorio por cualquiera de las siguientes opciones:

  • Subdirectorio: si colocas un nombre en esta parte, tu pagina web estará alojada como un sub directorio, es decir que si  por ejemplo en el nombre colocas iftux, tu pagina web al terminar este tutorial sera TuUsuario.github.io/iftux/
  • Pagina Principal: si en cambio colocas como nombre TuUsuario.github.io al terminar este tutorial tu pagina sera TuUsuario.github.io

Screenshot from 2013-12-19 18:07:07*En esta imagen el resultado seria TuUsuario.github.io/pbpsys/

2- Luego de crear el repositorio nos iremos a nuestra carpeta personal y crearemos una carpeta con el nombre del repositorio que elegimos anteriormente.  abrimos la consola y nos situamos con el comando cd dentro de esta carpeta (en el ejemplo que se muestra en la imagen anterior el comando seria cd pbpsys)

Bien desde la consola ejecutaremos los siguientes comandos:

Primero crearemos el primer archivo de nuestro repositorio con:

touch README.md

Creamos los archivos necesarios para que esta carpeta sea reconocida como un repositorio

git init

subimos el archivo README.md con los comandos:

git add --all
git commit -m "testeando todo"
git remote add origin https://github.com/tu_usuario/nombre_de_el_repositorio.git
git push -u origin master

luego de eso deberás ingresar tu usuario y clave de GitHub

Screenshot from 2013-12-19 18:09:38

si todo salio bien el archivo README.md se habrá subido a nuestro repositorio en GitHub y en la consola obtendrás un mensaje parecido al siguiente:

Counting objects: 3, done.
Writing objects: 100% (3/3), 214 bytes, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/iftux/pbpsys.git
* [new branch] master -> master
Branch master set up to track remote branch master from origin.

Ahora Probaremos nuestra web, para ello vamos a crear un archivo llamado index.html con el comando:

echo "Hola Mundo" > index.html

y lo subimos con los comandos:

git add --all
git commit -m "testeando todo"
git push -u origin master

pero acá nos encontraremos con un problema, este es que nosotros estamos subiendo los archivos al Branch llamado master y para que se suba correctamente debemos subirlo a gh-pages, por lo cual primero desde la web de nuestro repositorio crearemos el branch llamado gh-pages como se ve en la siguiente imagen:

Screenshot from 2013-12-19 18:22:59

y lo habilitamos en la carpeta de nuestra computadora con el comando:

git checkout --orphan gh-pages

Volvemos a subir todo, pero esta vez en el ultimo comando remplazamos master por gh-pages

git add --all
git commit -a -m "testeando todo"
git push -u origin gh-pages

si luego de ejecutar este comando les sale el siguiente error:

! [rejected] gh-pages -> gh-pages (non-fast-forward)

Solamente ejecuten el siguiente comando:

git pull -u origin gh-pages

esto luego de unos segundos les abrirá un archivo con nano, sin editar nada simplemente lo cierran con CTRL+X y luego colocan el comando:

git push -u origin gh-pages

ahora desde nuestro navegador entramos a la pagina de nuestro repositorio y luego en donde dice Settings acá cambiaremos Default Branch por gh-pages y luego bajaremos hasta donde dice GitHub Pages y hay obtendrás la url de tu pagina web.

Screenshot from 2013-12-19 18:23:39

Con esto ya tendremos funcionando nuestra pagina web, yo en lo personal les recomiendo usar cualquiera de los siguientes script si desean una web dinámica:

  • MDWiki: Para crear Wiki fácilmente (es la que uso en mi wiki personal: PBPsys)
  • MDWiki Blog:  El mismo script mencionado anteriormente pero editado para darle el funcionamiento de un blog
  • Jekyll: Sistema de Blog escrito en Ruby

Nota 1: Recuerda que cada vez que actualices un archivo en tu directorio local deberás ejecutar los siguientes comandos estando ubicados en el directorio local de nuestro repositorio:
git add –all
git commit -a -m “testeando todo”
git push -u origin gh-pages

Nota 2: Para colocar un dominio personalizado solo debes ejecutar el siguiente comando:

echo "tudominio.com" > CNAME

y luego subirlo a tu repositorio, ademas debes agregar los siguientes DNS a tu dominio:

Registro A para el dominio tudominio.com = 204.232.175.78
Registro CNAME para el subdominio http://www.tudominio.com = tuusuario.github.io (esto solo funciona si en el paso de crear el repositorio como nombre colocaste tuusuario.github.io)

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s