Cmo usar Git para hacer deploy de nuestro website http://www.jaimeolmo.com/2015/02/como-usar-git...

Jaime Olmo
programador y adicto a la tecnologa.

ACERCA DE PROYECTOS

PROGRAMACIN

CMO USAR GIT PARA HACER DEPLOY DE

NUESTRO WEBSITE
3 DE FEBRERO DE 2015

No hay duda de las ventajas de un sistema de version control en nuestro

ujo de trabajo. Servicios como Github y Bitbucket son eco de cmo ha
evolucionado la manera en que escribimos y compartimos cdigo entre
colegas. Inclusive si eres un desarrollador solitario estos servicios son de
gran ayuda a la hora de crear nuestros proyectos.

De eso se trata precisamente esta nota, vamos a congurar un ambiente de

desarrollo en donde podamos utilizar Git para realizar el deployment de
nuestro proyecto. Antes de comenzar a presionarteclas a diestra y siniestra
vamos a detenernos a pensar en lo que vamos a congurar.

Vamos a crear un repositorio vaco en nuestro web hosting. Luego

crearemosun repositorio en nuestro ambiente local y lo sincronizaremos al
repositorio remoto. Por ltimo crearemos la lgica para que cada vez que
publiquemos un cambio, el mismo se actualice automticamente en
nuestro repositorio principal y a su vez en el folder pblico de nuestro
website. La siguiente grca nos presenta un panorama de lo que
acabamos de describir.

1 of 12 9/1/17, 11:29 PM
Cmo usar Git para hacer deploy de nuestro website http://www.jaimeolmo.com/2015/02/como-usar-git...

Para poder simplicar el proceso hay algunas cosas que vamos a asumir.

1. Voy asumir que ya tenemos instalado Git y Git Bash en nuestro

ambiente local. Git Bash lo vamos a utilizar para realizar los
comandos de SSH.
2. Voy asumir que tenemos acceso a nuestro provedor de hosting a
travs de SSH. Para este tutorial voy a utilizar Dreamhost como
hosting. Antes de proseguir te recomiendo que veriques y te
empapes sobre como accesar tu hosting server usando SSH.
3. Voy asumir que ya tenemos instalado Git en nuestro hosting server.
Aunque para estar 100% seguros vamos a vericarlo.

Vamos a realizar una conexin SSH a nuestro servidor. Para eso vamos a

2 of 12 9/1/17, 11:29 PM
Cmo usar Git para hacer deploy de nuestro website http://www.jaimeolmo.com/2015/02/como-usar-git...

usar el Git Bash.

Normalmente podemos hacer una conexin SSH usando el siguiente
comando:

ssh <tu-username>@<tu-domain-name>

Una vez autentiquemos con el hosting server procedamos a vericar si Git

est instalado.

$ git --version
git version 1.7.9.5

Si puedes ver el nmero de versin estamos ms que seguro que tenemos

instalado Git. De no tenerlo te recomiendo que visitesel siguiente
tutorialantes de proseguir con los pasos aqu mencionaos.

Vamos a comenzar creando el repositorio en nuestro hosting server. Este

repositorio fungir como repositorio principal. Para tener cierto control
sobre los cambios que ocurrirn en este repositorio vamos a utilizar el ag
bare junto al comando git init. Adms,por conveniencia vamos a terminar
el nombre del repositorio usando .git.

$ git init --bare website.git

Est instruccinva a devolver el siguiente mensaje:

Initialized empty Git repository in /home/<tu-username>/website.git/

Hemos utilizadowebsite como nombre para el repositorio. O sea que el

repositorio se llamar webiste.git. Cabe destacar que este repositorio debe
ser creado en el directorio home y no en el public folder. La intencin de
esto es mantener segura y privada la conguracin de nuestro repositorio.
Hasta el momento hemos creado un repositorio en el home folder de

3 of 12 9/1/17, 11:29 PM
Cmo usar Git para hacer deploy de nuestro website http://www.jaimeolmo.com/2015/02/como-usar-git...

nuestro hosting.
Para vericar que todo est en orden vamos a entrar a nuestro repositorio y
vericar el status.

$ cd website.git/
$ git status

Si vemos la siguiente lnea, no te asuste, es lo que debemos ver ya que el

repositorio esta vacio y es tipo bare.

fatal: This operation must be run in a work tree

Antes de continuar con nuestro repositorio local vamos a congurar un

server-side hookcomo parte de nuestro repositorio remotopara congurar
la actualizacin de nuestro public-folder. Aqu es donde tcnicamente
ocurre toda la magia. Loshooks son rutinas que se ejecutan
automticamente cada vez que ocurre un evento particular en el
repositorio. A travs de estas rutinas podemos extender las
funcionalidades de Git y adaptarlas a nuestro ambiente de desarrollo. En
este caso vamos a congurar un hook para que cada vez que ocurra un git
push a nuestro repositorio remoto se publiquen los cambios al public-
folder. Para lograr eso vamos utilizar el siguiente comando:

$ nano > hooks/post-receive

Y escribimos el siguiente script la ventana de nano:

#!/bin/sh
GIT_WORK_TREE=/home/<tu-username>/<tu-dominio.com>/public-folder git checkout

Para terminar presionamos Ctrl+X y guardamos el archivo. Ahora

aplicamos el siguiente permiso al archivo del script que acabamos de crear:

4 of 12 9/1/17, 11:29 PM
Cmo usar Git para hacer deploy de nuestro website http://www.jaimeolmo.com/2015/02/como-usar-git...

$ chmod +x hooks/post-receive

Ahora pasamosa trabajar en nuestro repositorio local. Te recomiendo que

abras otra ventana de Git Bash para trabajar localmente. Lo primero que
vamos hacer es ir a nuestro working folder. En mi caso mi working folder se
llama code y se encuentra dentro de Documents.

$ cd /c/users/<tu-username>/Documents/code

Ahora aprovechando que tenemos Git vamos a utiliza la funcin degit init
para crear un proyecto a nuestro folder local. Para este tutorial voy a crear
un folder llamado website-project.

$ git init website-project

Atencin, si ya tienes un proyecto que deseas utilizar como para este

tutorial, lo nico que tienes que hacer es utilizar el comando de git init en tu
folder de tu proyecto. Por el momento vamos a seguir trabajando dentro del
folder website-project.

$ cd website-project

Como estamos usando Git vamos a clonar un repositorio localizado en

Github. Vamos a usarel template de HTML 5 Boilerplatecomo base para
nuestro website.

$ git clone https://github.com/h5bp/html5-boilerplate.git

Vamos a mover el cdigo que nos interesa al working folder o sea al

folderwebsite-project. Como estamos en el Git Bash hagmoslo usandoel
siguiente comando:

5 of 12 9/1/17, 11:29 PM
Cmo usar Git para hacer deploy de nuestro website http://www.jaimeolmo.com/2015/02/como-usar-git...

$ mv html5-boilerplate/dist/* ./

El resto del cdigo que no vamos a utilizar lo vamos a borrar.

$ rm -r -f html5-boilerplate/

Ahora nuestro repositorio local est casi listo para hacer commits.
Actualmentenuestros archivos estn listos para ser aadidos al version
control. Si ejecutamos el comando git status vamos a ver que el siguiente
mensaje:

Untracked files:
(use "git add ..." to include in what will be committed) etc
404.html
apple-touch-icon.png
browserconfig.xml
crossdomain.xml
css/
doc/
favicon.ico
humans.txt
img/
index.html
js/
robots.txt
tile-wide.png
tile.png

nothing added to commit but untracked files present (use "git add" to track

Vamos bien. Procedamosa aadir los les al version control del

repositorio. Para esto vamos a realizar la siguiente instruccin:

$ git add *

6 of 12 9/1/17, 11:29 PM
Cmo usar Git para hacer deploy de nuestro website http://www.jaimeolmo.com/2015/02/como-usar-git...

Ahora cuando hagamos git status vamos a ver que nuestros les estn en
la fase staged, o sea listos para commit. Para realizar nuestro commit
vamos a utilizar el siguiente comando:

$ git commit -m Configuracin inicial.

Si revisamos el repositorio usando git status veremos lo siguiente:

On branch master
nothing to commit, working directory clean

Ahora vamos a aadir la conexin de nuestro repositorio remoto al

repositorio local. Pasemos a crear la conexin usando el siguiente
comando:

$ git remote add <nombre-creativo> ssh://<tu-username>@<tu-domain-name

El nombre creativo puede ser algo tan sencillo como deploy. Ya con esta
conguracin podemos hacer nuestro primer push. Este push ser
elresponsable de sincronizar el repositorio local con el remoto.

$ git push <nombre-creativo> +master:refs/heads/master

Listo!
Ahora cada vez que hagamos un cambio a nuestro projecto lo nico que
tenemos que hacer es utilizar la instruccin de push usando el nombre que
hayamos asignado:

$ git push <nombre-creativo>

Recuerda que antes de hacer el push debe hacer commit del cambio. Una
atajo para aadir el cambio y hacer el commit es a travs del siguiente
comando:

7 of 12 9/1/17, 11:29 PM
Cmo usar Git para hacer deploy de nuestro website http://www.jaimeolmo.com/2015/02/como-usar-git...

$ git commit -a -m <descripcin-del-commit>

Esto es todo por el momento. Cabe destacar que el 80% de los problemas
que puedas encontrar siguienteeltutorial probablemente sea relacionado a
SSH y a la conguracin de tu hosting server. Recuerda que para este
tutorial se utiliz como hosting provider Dreamhost y es muy probable que
tu proveedor tenga otra conguracin similiar a la que aqu se mencion.

Gran parte de este tutorial est inspirado en el trabajo de Abhijit Menon-

Sen, Using Git to manage a web site. Si deseas profundizar en el tema de
Git te recomiendo la gua Getting Git Right muy elegantemente mantenida
por Atlassian que es la compaa detrs de Bitbucket.

9 Comentarios Twitter Facebook Google+

GIT

PREVIO
Cuando se mezcla el User Experience con la
fsica

SIGUIENTE
Micro notas #8

8 of 12 9/1/17, 11:29 PM
Cmo usar Git para hacer deploy de nuestro website http://www.jaimeolmo.com/2015/02/como-usar-git...

9 Comments Jaime Olmo: programador y adicto a la tecnologa

1 Login

ordenar por el mejor

Recomendar 1 Compartir

nete a la discusin...
INICIAR SESIN CON
O REGISTRARSE CON DISQUS ?

Name

Albert hace un ao
Hola muy bueno el articulo, el unico que me funciono y explican todo en detalles, una
sugerencia por favor utilizar otro color para el code highlighting ya que no se puede
apreciar a simple vista los comandos
2 Reply Compartir

vagostep hace 2 aos

Hola Jaime, un saludo. Excelente el artculo, estuve buscando por varios das como
hacer un auto deploy y cada respuesta que encontraba era mas complicada que otra.
Permiteme decirte que, usando este articulo como base, me anime a llevarlo mas all,
y hacer un auto deploy directamente en un gitlab instalado en el servidor de la
empresa donde trabajo. No comprendo mucho como realizar un webhook basado en
mis necesidades asi que, me fui a la "Fontaneria de Git". Siguiendo tu principio, el
repositorio bare remoto, en mi caso, es el repositorio de GitLab del servidor, mi Repo
local est en mi pc y la carpeta publica se encuentra en WWW del servidor. Segui
todos los pasos que comentas pero, al momento de colocar el hook en el lado del
servidor fue donde me las ingeni un poco.

GitLab, en los repositorios .git le coloca 2 carpetas dentro, una llamada hooks.old, que
asumo se refiere a los hooks del lado del cliente que se copian aca (solo lo asumo,
basndome que en esta carpeta estn todos los .samples que vemos en nuestro
repositorio); y otra carpeta llamada hooks, que en realidad es un symlink que apunta a
gitlab-shell/hooks, aqui, se encuentran unos hooks comunes a todos los proyectos
(post-receive y update). Debia colocar el post-receive dentro de esta carpeta hooks
pero sin modificar los hooks comunes a los demas proyectos, por que, el post-receive
que se realiza aqu es personalizado para cada uno. Asi que, cree una nueva carpeta
Hooks, y le agregu el post-receive personalizado, y el mismo update comn. Y
funciona perfectamente, aunque se que no es lo mas optimo, cumple con su tarea, de
realizar un auto-deploy desde el repositorio de GitLab, a la carpeta publica.
1 Reply Compartir

9 of 12 9/1/17, 11:29 PM
Cmo usar Git para hacer deploy de nuestro website http://www.jaimeolmo.com/2015/02/como-usar-git...

ARTCULOS POPULARES

Componentes Vue.js en espaol

Primeros pasos usando TypeScript

Cmo usar Git para hacer deploy de nuestro website

Primeros pasos usando Vue.js

Construir un ambiente de desarrollo para Vue.js usando Webpack

Qu es Redux?

Conectar Vue.js a una base de datos

HTTP Routing a travs de Laravel

PuPHPet: como construir fcilmente una mquina virtual usando Vagrant y

Puppet

Cmo instalar Laravel Homestead en Windows

ARCHIVOS

Julio 2017

Abril 2017

10 of 12 9/1/17, 11:29 PM
Cmo usar Git para hacer deploy de nuestro website http://www.jaimeolmo.com/2015/02/como-usar-git...

Febrero 2017

Enero 2017

Diciembre 2016

Agosto 2016

Febrero 2016

Enero 2016

Noviembre 2015

Agosto 2015

Julio 2015

Junio 2015

Mayo 2015

Marzo 2015

Febrero 2015

Enero 2015

Diciembre 2014

11 of 12 9/1/17, 11:29 PM
Cmo usar Git para hacer deploy de nuestro website http://www.jaimeolmo.com/2015/02/como-usar-git...

Noviembre 2014

Marzo 2014

Febrero 2014

Enero 2014

Diciembre 2013

Septiembre 2013

TAGS
blogs c# cintiq companion code colors colors palette css
accesibilidad architecture arte automation azure Bill Gates
design dilbert diseo web espacio facebook fotografa git Git Bash Github high scalability html https IIS

Instagram iPhone javascript joke open source php programacin

refactoring SASS seguridad TypeScript user interface vagrant virtual box vue.js vuejs web
components web design Windows

2017 Jaime Olmo Hecho en Puerto Rico

12 of 12 9/1/17, 11:29 PM