update pages

This commit is contained in:
Daniel Kummer 2012-08-06 19:33:03 +02:00
parent 3e1238e957
commit 351ce4c3af
4 changed files with 346 additions and 151 deletions

View File

@ -80,10 +80,10 @@ a, a:visited {
ul {
list-style: none;
text-align: left;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
text-shadow: 0 2px 1px #fff;
}
ul li:before {
@ -96,24 +96,38 @@ ul li:before {
/** coding block */
blockquote {
color: white;
text-align: left;
margin: 10px auto;
background: #131420;
border-bottom: 2px solid #30334F;
border-right: 2px solid #30334F;
border-radius: 7px;
padding: 5px 30px;
font-size: 0.8em;
border-radius: 10px;
padding: 5px 20px;
}
code {
font-style: normal;
padding-left: 5px;
border-radius: 10px;
color: white;
padding: 5px 15px;
font-family: menlo, monospace;
background: #131420;
text-shadow: none;
font-size: 0.8em;
}
/*---------------------------------------- Images */
div#git-repo {
background: url("../img/git-repo.png") no-repeat scroll center center transparent;
height: 275px;
width: 257px;
position: relative;
z-index: 99;
}
div#init-img {
background: url("../img/init.png") no-repeat scroll center center transparent;
height: 122px;
@ -171,6 +185,10 @@ div#violet-line-img {
margin-left: 30px;
}
/*.col-2:after {
clear: both;
}*/
#main {
margin: 0 auto;
position: relative;
@ -211,9 +229,9 @@ div#violet-line-img {
opacity: .8;
}
#title {
margin: 80px auto 0;
margin: auto;
padding-top: 40px;
width: 1150px;
position: relative;
z-index: 99;
@ -243,6 +261,11 @@ div#violet-line-img {
width: 100%;
}
#head-img {
position: relative;
top: 200px;
}
#download {
position: absolute;
top: 380px;
@ -282,6 +305,8 @@ div#violet-line-img {
font-style: italic;
}
#disqus_thread { width: 800px; text-align: left; margin-left: auto; margin-right: auto; }
/*---------------------------------------- Banner */
#banner {
height: 149px;

BIN
img/download.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
img/git-flow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@ -59,159 +59,304 @@
as pdf</a>
<span class="accent">&bigstar;</span>
</p>-->
<img id="head-img" src="/img/git-flow.png" alt="git flow"/>
</div>
</header>
<div id="main">
<div class="scrollblock">
<h2>About</h2>
<div class="scrollblock">
<h2 id="animate1">About</h2>
<p>
git-flow are a set of git extensions to provide high-level repository operations for Vincent
Driessen's branching model.
<small><a href="http://nvie.com/posts/a-successful-git-branching-model/">more</a></small>
</p>
<p class="divider">&#9733; &#9733; &#9733;</p>
<p>
git-flow are a set of git extensions to provide high-level repository operations for Vincent
Driessen's branching model.
<small><a href="http://nvie.com/posts/a-successful-git-branching-model/">more</a></small>
</p>
<p class="divider">&#9733; &#9733; &#9733;</p>
<p>This cheatsheet shows the basic usage and effect of git-flow operations</p>
<p class="divider">&#9733; &#9733; &#9733;</p>
</div>
<div class="scrollblock">
<h2>Basic tips</h2>
<ul>
<li>git flow provides excellent command line help and output. Read it carefully to see what's happening...</li>
</ul>
<p class="divider">&#9733; &#9733; &#9733;</p>
</div>
<div class="scrollblock">
<h2>Initialize</h2>
<div class="col-1">
<h3>git flow init</h3>
<p>Start using git-flow by initializing it inside a git repository</p>
<blockquote>
<code>
git flow init
</code>
</blockquote>
<p>
You'll have to answer a few questions regarding the naming conventions for your branches.<br/>
I strongly recommend using the default values.
</p>
</div>
<div class="col-2">
<div id="init-img"></div>
<div id="blue-line-img"></div>
</div>
</div>
<div class="scrollblock">
<h2>Features</h2>
<div class="col-1">
<h3>Start a new feature</h3>
<p>
Development of new features starting from the develop branch.
</p>
<p>Start developing a new feature with</p>
<blockquote>
<code>
git-flow feature start MYFEATURE
</code>
</blockquote>
</div>
<div class="col-2">
<div id="feature-start-img"></div>
<div id="violet-line-img"></div>
</div>
</div>
<div class="scrollblock">
<div class="col-1">
<h3>Finish up a feature</h3>
<p>
Finish the development of a feature.
This action performs the following
</p>
<ul>
<li>Merged MYFEATURE into develop</li>
<li>Removes the feature branch</li>
<li>Switches back to develop branch</li>
</ul>
<blockquote>
<code>
git-flow feature finish MYFEATURE
</code>
</blockquote>
</div>
<div class="col-2">
<div id="feature-finish-img"></div>
</div>
</div>
<div class="scrollblock">
<div class="col-1">
<h3>Publish a feature</h3>
<p>
Publish a feature to the remote server so it can be used by other users.
</p>
<blockquote>
<code>
git-flow feature publish MYFEATURE
</code>
</blockquote>
</div>
<div class="col-2">
<div id="feature-publish-img"></div>
</div>
</div>
<div class="scrollblock">
<div class="col-1">
<h3>Getting a published feature</h3>
<p>
Getting a published feature from the remote server and tracking remote changes.
</p>
<blockquote>
<code>
git-flow feature pull MYFEATURE
</code>
</blockquote>
</div>
<div class="col-2">
<div id="feature-publish-img"></div>
</div>
</div>
<div class="scrollblock">
<h2>git-flow release</h2>
</div>
<div class="scrollblock">
<h2>git-flow hotfix</h2>
</div>
<p>This cheatsheet shows the basic usage and effect of git-flow operations</p>
<p class="divider">&#9733; &#9733; &#9733;</p>
</div>
<script>
<div class="scrollblock">
<h2 id="animate2">Basic tips</h2>
<ul>
<li>Git flow provides excellent command line help and output. Read it carefully to see what's happening...</li>
<li>The OSX Client <a href="http://www.sourcetreeapp.com/">Sourcetree</a> is an excellent git gui and provides
git-flow support
</li>
</ul>
<p class="divider">&#9733; &#9733; &#9733;</p>
</div>
<div class="scrollblock" style="height: 800px;">
<h2>Setup</h2>
<div class="col-1">
<h3>OSX</h3>
<blockquote>
<code>$ brew install git-flow</code>
</blockquote>
<h3>Linux</h3>
<blockquote>
<code>$ apt-get install git-flow</code>
</blockquote>
<h3>Windows (Cygwin)</h3>
<blockquote>
<code>
$ wget -q -O - --no-check-certificate
https://github.com/nvie/gitflow/raw/develop/contrib/gitflow-installer.sh | bash
</code>
</blockquote>
</div>
<div class="col-2">
<p>
You need a working git installation as prerequirement.<br/>
For detailed instructions please visit the <a href="https://github.com/nvie/gitflow/wiki/Windows">git flow
wiki</a>.
</p>
<img src="img/download.png" alt="install git-flow"/>
</div>
</div>
<div class="scrollblock">
<h2 id="animate3">Getting started</h2>
<div class="col-1">
<h3>Initialize</h3>
<p>Start using git-flow by initializing it inside an existing git repository:</p>
<blockquote>
<code>
git flow init
</code>
</blockquote>
<p>
You'll have to answer a few questions regarding the naming conventions for your branches.<br/>
It's recommended to use the default values.
</p>
</div>
<div class="col-2">
<!--<div id="init-img"></div>
<div id="blue-line-img"></div>-->
</div>
</div>
<div class="scrollblock" style="height: 900px;">
<h2 id="animate4">Features</h2>
<ul class="narrow">
<li>Develop new features for upcoming releases</li>
<li>Typically exist in developers repos only</li>
</ul>
<div class="col-1">
<h3>Start a new feature</h3>
<p>Development of new features starting from the 'develop' branch.</p>
<p>Start developing a new feature with</p>
<blockquote>
<code>
git-flow feature start MYFEATURE
</code>
</blockquote>
<p>This action creates a new feature branch based on 'develop' and switches to it</p>
</div>
<div class="col-2">
<div id="feature-start-img"></div>
<div id="violet-line-img"></div>
</div>
</div>
<div class="scrollblock">
<div class="col-1">
<h3>Finish up a feature</h3>
<p>
Finish the development of a feature.
This action performs the following
</p>
<ul>
<li>Merged MYFEATURE into 'develop'</li>
<li>Removes the feature branch</li>
<li>Switches back to 'develop' branch</li>
</ul>
<blockquote>
<code>
git-flow feature finish MYFEATURE
</code>
</blockquote>
</div>
<div class="col-2">
<div id="feature-finish-img"></div>
</div>
</div>
<div class="scrollblock">
<div class="col-1">
<h3>Publish a feature</h3>
<p>
Are you developing a feature in collaboration? <br/>
Publish a feature to the remote server so it can be used by other users.
</p>
<blockquote>
<code>
git-flow feature publish MYFEATURE
</code>
</blockquote>
</div>
<div class="col-2">
<div id="feature-publish-img"></div>
</div>
</div>
<div class="scrollblock">
<div class="col-1">
<h3>Getting a published feature</h3>
<p>
Get a feature published by another user and track remote changes.
</p>
<blockquote>
<code>
git-flow feature pull MYFEATURE
</code>
</blockquote>
</div>
<div class="col-2">
<div id="feature-publish-img"></div>
</div>
</div>
<div class="scrollblock" style="height: 900px;">
<h2 id="animate5">Make a release</h2>
<ul>
<li>Support preparation of a new production release</li>
<li>Allow for minor bug fixes and preparing meta-data for a release</li>
</ul>
<div class="col-1">
<h3>Start a release</h3>
<p>To start a release, use the git flow release command. It</p>
creates a release branch created from the 'develop' branch.
</p>
<blockquote>
<code>
git flow release start RELEASE [BASE]
</code>
</blockquote>
<p>You can optionally supply a <code>[BASE]</code> commit sha-1 hash to start the release from. The commit must
be on the
'develop' branch.</p>
</div>
<div class="col-2">
<div id="release-start-img"></div>
</div>
</div>
<div class="scrollblock" style="height: 900px;">
<div class="col-1">
<h3>Finish up a release</h3>
<p>Finishing a release is one of the big steps in git branching. It performs several actions:</p>
<ul>
<li>Merges the release branch back into 'master'</li>
<li>Tags the release with it's name</li>
<li>Back-merges the release into 'develop'</li>
<li>Removes the release branch</li>
</ul>
<blockquote>
<code>
git flow release finish RELEASE
</code>
</blockquote>
<p>It's wise to publish a finished release after finishing it. Do it similar to feature publishing with the
command:</p>
<blockquote>
<code>
git flow release publish RELEASE
</code>
</blockquote>
</div>
<div class="col-2">
<div id="release-finish-img"></div>
<p>(You can track a remote release with the <code>git flow release track RELEASE</code> command)</p>
</div>
</div>
<div class="scrollblock" style="height: 800px;">
<h2 id="animate6">Hotfixes</h2>
<ul>
<li>Hotfixes arise from the necessity to act immediately upon an undesired state of a live production version
</li>
<li>May be branched off from the corresponding tag on the master branch that marks the production version.</li>
</ul>
<div class="col-1">
<h3>git flow hotfix start</h3>
<p>Like the other git flow commands, a hotfix is started with</p>
<blockquote>
<code>
git flow hotfix start RELEASE
</code>
</blockquote>
<p>The release argument hereby marks the faulty production release</p>
</div>
<div class="col-2">
<div id="hotfix-start-img"></div>
</div>
</div>
<div class="scrollblock">
<div class="col-1">
<h3>Finish a hotfix</h3>
<p>TODO</p>
</div>
<div class="col-2">
<div id="hotfix-finish-img"></div>
</div>
</div>
<div class="scrollblock">
<h2>Backlog</h2>
<ul>
<li>Not all available commands are covered here, only the most important ones</li>
<li>You can still use git and all its commands normally as you know them, git flow is only a tooling
collection
</li>
<li>The 'support' feature is still beta, using it is not advised</li>
</ul>
</div>
</div>
<div class="scrollblock">
<h2>Comments</h2>
<div id="disqus_thread"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
var scrollorama = $.scrollorama({
blocks:'.scrollblock',
enablePin:false
});
var colorClassMatcher = function (index, classname) {
var matches = classname.match(/color\d+/g) || [];
@ -227,9 +372,18 @@
});
/*
var animationOptions = { delay:300, duration:250, property:'left', start:-1400, end:0 };
scrollorama.animate('#animate1', animationOptions);
scrollorama.animate('#animate2', animationOptions);
scrollorama.animate('#animate3', animationOptions);
scrollorama.animate('#animate4', animationOptions);
scrollorama.animate('#animate5', animationOptions);
scrollorama.animate('#animate6', animationOptions);
/*
scrollorama.animate('.fly-in', { delay:300, duration:200, property:'left', start:-1400, end:0 });
scrollorama.animate('#zoom-in', { delay:200, duration:600, property:'zoom', start:0 });
scrollorama.animate('#animate', { delay:200, duration:600, property:'zoom', start:0 });
// animate some examples
scrollorama.animate('#unpin', { duration:500, property:'padding-top', start:400, pin:true });
scrollorama.animate('#fade-in', { delay:400, duration:300, property:'opacity', start:0 });
@ -244,7 +398,23 @@
scrollorama.animate('#parallax3', { delay:200, duration:1200, property:'top', start:500, end:-500 });*/
});
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'gitflowcheatsheet'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</body>