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

Written by Raymon Schouwenaar on

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 username@servername.webfaction.com. 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 git@github.com:username/gitrepository.git
    $ git push -u origin master

    

Latest posts

What is the JavaScript Set in ES2015 and when should you use it?

The ES2015 spec is full of new features that continuously be introduced in all the new browsers. The Set collection is one of those new things.

My first thought was, well I could just use a normal Array! But I will show you what you can do with the Set collection.

CSS Grid Layout Metro design blocks

The times have come that we don’t have to fiddle around with Floats and Tables anymore! Flexbox is already an established term in the industry of Frontend Developers.