Deploying a website with git on uberspace

21 November, 2013

Are you using git yet? Are you deploying your website via git push? - You should!

The goal of this post is to give you a short overview of my way to get git automatically deploy a website via git push on uberspace.de.

I will use metalmatze.de as domain and metalmatze as examples (my site is not hosted on uberspace).


What we want to do

  1. git push uberspace master - This will push new commits to uberspace and deploy your site.
  2. Check metalmatze.de to see the changes we just pushed.

Installation

Connect with ssh to uberspace.

$ ssh metalmatze@pictor.uberspace.de

Create a new folder in your home directory (you should be there after connecting) called metalmatze.de.git

$ mkdir metalmatze.de.git

Change into this directory with cd metalmatze.de.git.

Next we want to create a bare git repository

$ git init --bare
Initialized empty Git repository in /home/metalmatze/metalmatze.de.git/

The following steps will take place in your local repository!

Now we want to add uberspace as a remote repository to our local repository

$ git remote add uberspace ssh://metalmatze@pictor.uberspace.de/home/metalmatze/metalmatze.de.git

The following steps will take place on uberspace in the bare git repository!

To get git to deploy our website into a specified folder we'll use a post-receive hook.

Open hooks/post-receive with an editor like vim or nano.

$ vim hooks/post-receive

Into this file we'll paste a simple bash script that will deploy the master branch into /home/metalmatze/html/metalmatze.de

#!/bin/bash
path="/home/metalmatze/html/metalmatze.de/"

echo "========= GIT CHECKOUT ========="
GIT_WORK_TREE=$path git checkout -f master

echo "============= DONE ============="

Save and exit the editor.

Don't forget to change the file permissions to be executable.

$ chmod u+x hooks/post-receive

At last we need to link metalmatze.de to our folder where we deployed metalmatze.de's into.

$ cd /var/www/virtual/metalmatze

$ ln -s html/metalmatze.de/public/ metalmatze.de

Now go on metalmatze.de with your browser and check out your automatically deployed website!

Isn't that awesome?!

Benefits

We are now able to deploy our changes with only one git command, or even with a GUI.


Do you have any questions or comments? Please leave them below. Thanks!


Good video tutorials on Max-Heap

16 September, 2013

Introduction to a Heap , Part 1 - The Structure of Heap , How to Add an Item

Introduction to a Heap , Part 2 - How to Remove an Item from a Heap

Introduction to a Heap , Part 3 - Describing a Heap as an Array


git push all branches

10 September, 2013

If you use git branches a lot, you'll often push each branch after each commit.

This takes time...

Instead of pushing every single branch you can do git push --all origin.
This will push all commits of all branches to origin. That really simple!

Pushing all branches to default remote

Maybe you're even renaming your git remotes like I do.
git remote rename origin github and you will have a remote called github.
Now you would have to push all commits of all branches with git push --all github.

To simplify that aswell you can run git push --all github -u once and now all you'll have to do is git push. This will now by default push all branches to the default remote github.

Checkout http://stackoverflow.com/questions/1914579/set-up-git-to-pull-and-push-all-branches for even more information.

Pretty fancy, right?


Bootstrap's carousel transition won't animate

06 September, 2013

Twitter Bootstrap's carousel seems like a easy way to create a simple carousel animation on your website.

Bootstrap 3 Carousel

Since I'm using bower and grunt I decided to manually import bootstrap's javascript.

I started by concatenating bootstrap/js/carousel.js to my remaining javascript.
Simple as that it worked after adding the css and creating the HTML.

Sadly to say the sliding transition didn't work.

I spend almost an hour trying to figure out what was wrong in my HTML.
There wasn't anything wrong.
The CSS was imported from bootstrap so it shouldn't have been the problem.

While taking a look at all the available javascript files from bootstrap I saw that there is a file called bootstrap/js/transition.js.

After concatenating this bootstrap/js/transition.js aswell as bootstrap/js/carousel.js to my javascript files, the carousel worked with the expected sliding animation.



Installing a specific commit, branch or version from a git repository with bower

27 August, 2013

Installing packages via bower is awesome.

It's even more awesome that you're able to install git repositories with bower.
This will become handy if you have private repositories.

Installing git repositories with bower:

bower install --save https://github.com/jquery/jquery.git

This will clone the jquery git repository from github to your local machine and then checkout the master branch to your bower folder.

It could only become a problem in the future, since you would get all the changes from the master branch.

Specifing a commit, branch or version of your git repository is thankfully not that hard.

To install a specific commit:

bower install --save https://github.com/jquery/jquery.git#42cd19fb8f29db6fb06f49e5b94829ea7036c3c5

To install a specific branch:

bower install --save https://github.com/jquery/jquery.git#develop

To install a specific version:

bower install --save https://github.com/jquery/jquery.git#1.10.2

Hopefully you're now more safe to updates in the future.



Dateien größer als 1GB finden

23 August, 2012

Soeben ist eine log-Datei im Home-Verzeichnis extrem groß geworden, so groß, dass am Ende auf der Partition 0 Byte frei waren.

Um den Übeltäter zu finden habe ich nach einer Möglichkeit gegoogelt große Dateien aufzuspüren.

Folgender Befehl findet alle Dateien größer als 1GB auf der /home Partition

find /home -size +1G

Der Übeltäter wurde gefunden und gelöscht! :)



Schneller den Chrome Cache löschen

25 July, 2012

Ich habe soeben durch Zufall eine Methode entdeckt, die ich nicht vorenthalten möchte.

Für alle die mit den Chromium (Chrome) Developer Tools arbeiten gibt es eine schnelle Möglichkeit den Browser Cache zu leeren, wenn man gerade die Netzwerkaktivitäten einer Website beobachtet.

Dazu reicht lediglich ein Rechtsklick und dann Clear Browser Cache auswählen. Sehr schön! :)

Clearing Browser Cache in Chrome


Redactor - WYSIWYG editor

24 July, 2012

Ich habe einen vermutlich neuen lieblings WYSIWYG Editor fürs Web - Redactor!

Wie gewünscht ist er ein jQuery Plugin, wodurch er sehr einfach ein zu binden ist.
Mit gerade mal 40kb ist er auch sehr klein, doch der Funktionsumfang ist genau richtig!
Des Weiteren sieht er tatsächlich sehr sehr schick aus.

Ich empfehle jedem sich diesen Editor mal anzusehen: http://redactorjs.com


Dateikodierung mit vim ändern

18 July, 2012

Um die Kodierung einer Datei mit vim zu ändern beim speichern einfach folgendes hinzufügen:

:write ++enc=iso-8859-1


CodeIgniter Controller in Unterverzeichnis

13 July, 2012

CodeIgniter, ein quelloffenes PHP-Web-Framework, mein lieblings PHP Framework. Neben den ganzen nützlichen Funktionen gibt es eine wirklich gute Sache, die ich noch nicht all zu lange weiß.

Es ist möglich Controller in Unterverzeichnisse zu sortieren.
Das trägt wesentlich zu übersichtlichen Projekten auf Quellcode Ebene bei.

Angenommen wir möchten einen Login Bereich erstellen:

  1. /application/controllers/login.php wird erstellt
  2. /application/controllers/login.php wird mit sämtlichen gewünschten Funktionen voll geschrieben
  3. Der Controller wird schnell sehr sehr unübersichtlich, ich würde sagen ab 5 Funktionen aufwärts
  4. Kein Überblick, zu viel Code. CHAOS

Stattdessen kann man aber auch Sub-Controller verwenden:

  1. /application/controllers/login/ Verzeichnis erstellen
  2. /application/controllers/login/user.php erstellen
  3. /application/controllers/login/pics.php erstellen
  4. /application/controllers/login/some.php erstellen

Nun hat man für den Login Bereich anstatt einem Controller viele Einzelne.

Link zum UserGuide