Web editing with GitHub connection

I'm quite new to web dev and I was wondering whether you could recommend any coding environment which can - code (e.g on the left) - preview page (on the right) - and now comes the tricky part, automatically sync my pages with my github project does anybody know a open source solution capable of doing that?

optional but also awesome would be if that tool could also directly upload my files to my webspace but I guess that'd be to luxorious eh:)

Thanks everyone