How to deploy your website with Git to your web-hosting and use Github or Bitbucket instead!

For a long time, i was searching for a good solution to automatically deploy my websites to my web-hosting (Webfaction) via Git. I use Git (Github or Bitbucket) with all my Web-Dev projects, i was searching for a solution to setup my personal Continuous Deployment/Delivery work-flow.

Before you follow this guid

In my guide, i assume that you are already familiar with Git. So i’m not gonna explain all the Git basics. If you want to learn Git? Follow this free course on CodeSchool. Good luck!

Install Git on your webhosting

I don’t know what kind of web-hosting you have, but if you have SSH authorization it will be good (i think). The great think about the developer web-hosting on Webfaction is, that you can easily install Git with a few clicks.

If you don’t use Webfaction, checkout this manual SSH installation. Otherwise i would advice you to transfer everything to Webfaction.

Create a local Git Repository

    $ mkdir projectfolder
    $ cd projectfolder
    $ git init

initialized local project
When you initialized your local “projectfolder” with Git, you can add your files to the project. It is also possible to initialize Git in an existing project folder.

Commit files to local Git Repository

    $ git add index.html
    $ git commit -m "Initial commit"

After these commands your files (in my case the index.html) are stored in the local repository.

Create a Git Repository on your server/web-hosting

In my case, i have to login on my hosting via SSH. (Git is already installed on my webfaction hosting) For every web-hosting that could be different. So you have to check that with your hosting or on your server.

    $ cd webapps/raymon_git
    $ mkdir myprojectrepo.git
    $ cd myprojectrepo.git
    $ git init --bare

What does $ git init --bare
Bare repositories contain only the .git folder and no working copies of your source files. A bare repository strictly contains the version history of your code. $ git init normal repositories contains also your files (working copy). source: saintjsd.com

Now you created your project repository on your hosting. In the “myprojectrepo.git” has all kinds of folders in it. One of the is “hooks”, there are the Git hooks stored. Git hooks are scripts that run automatically every time a special event occurs in a Git repository (read the good explanation of Atlassian).

Create a Git Hook to deploy your code.

    $ cd hooks
    $ vi post-receive

Your console will show an empty file (in the VI editor). Add the code below to the document & save it.

    GIT_WORK_TREE=/path/to/deploy/code git checkout -f develop

(check this tutorial for basics of the VI editor)

With this command, the code (from the develop branch) will be deployed to the specified location (every push on the develop branch). You can replace the path that i defined, for yours.

On Webfaction i needed to give the post-receive file some write permissions. So i added chmod +x post-receive, so it can write to the specified location. I don’t know if your web-hosting need this, but you can try it if it doesn’t work.

Connect to post-receive hook

To connect you local repository to the remote on your server, you need to add it as en remote. And after that you can push it to that specific remote git repository.

    $ git remote add devlocation ssh://location/to/home/git/repo/myprojectrepo.git
    $ git push devlocation +develop:refs/heads/develop

The path on webfaction hosting is [email protected]. The servername your account use, is displayed in the dashboard.

Future commit’s and pushes

In the future, when you made changes to your repo. You can just push that with the normal git push command.

    $ git push devlocation

But i have my code already on Github and / or Bitbucket

If your repository already exists on Github or Bitbucket, the only thing you have to change on your local repository is. Add the new remote of your server. Because Github / Bitbucket is already defined as “origin”.

Adding a new remote to your git repo will also work with Sourcetree (like me). I prefer working with Sourcetree. Even than it’s pretty
easy. The only thing you need to changes is the remote:

Change remote repository for Git in Sourcetree

If you haven’t pushed your code to Github and / or Bitbucket

If you haven’t pushed it yet to Github / Bitbucket? You can do this with adding the git url as “origin” remote.

    $ git remote add origin [email protected]:username/gitrepository.git
    $ git push -u origin master
  • In GIT_WORK_TREE=/path/to/deploy/code git checkout -f develop how would the path look in terms of Webfaction apps?

  • Hi @zzarazza:disqus this is an example of one of my files: “GIT_WORK_TREE=/home/raymonsschouwenaar/webapps/personal_website git checkout -f master”. So at webfaction you start at home and then your username. In the webapps folder you find all the folders of allready created applications.

    In my case it will move the files to the application folder “personal_website”. Hope this will help you. If something is not clear, please ask! 🙂

    • developermode

      Ehm except GIT_WORK_TREE is not working GIT_WORKING_TREE is.

  • yavou

    Great guide. Thank you, Raymon!

  • Interesting. Did you create a rails app on your shared host via the automated installers first and then overwrite its contents with your git repo or did you just create a directory under username/webapps manually?

    • Hi Mark, for this I just created a static html website. But I created the folder with the static application 🙂

    • Hi Mark, for this I just created a static html website. But I created the folder with the static application

  • Neill Hanna

    when executng this
    $ git push devlocation +develop:refs/heads/develop
    I get an error
    error: src refspec develop does not match any.
    error: failed to push some refs

    • Neill Hanna

      UPDATE

      I changed where it said develop to master and also in the hook file and then it worked

  • Константин Полынцов