[Pippo](http://pippo.ro) site repository.

How to build

Requirements:

- [Git](http://git-scm.com/)

- [Jekyll](http://jekyllrb.com/)

Steps:

- create a local clone of this repository (with `git clone https://github.com/decebals/pippo-site.git`)

- go to project's folder (with `cd pippo-site`)

- make some modifications

- test on your computer the modifications (see below section)

- commit and push the modifications on github

Install Jekyll (Ubuntu 12.04 LTS)

- `sudo apt-get install ruby1.9.3 ruby1.9.1-dev nodejs`

- `sudo gem install jekyll`

Be sure that ruby 1.8 is not installed on your system, if so you have to remove it from the system.

Create a new page

We are using [jekyll-docs-template](https://github.com/bruth/jekyll-docs-template) to generate the site.

The template follows a very simple convention of defining categories that correspond to sections in the navigation. Here are the default ones (they are listed in the `_config.yml`):

- `doc` - Documentation

- `ref` - Reference

- `tut` - Tutorial

- `dev` - Developers

- `post` - Posts

Since Jekyll is more geared towards blog posts, specifiying a date and setting up the front-matter can get tedious. Supplied in the `bin` directory is a simple Ruby scripy for creating a new _page_:

ruby bin/jekyll-page title category [filename] [--edit]

where `title` is the title of page, `category` is one of the categories defined in the `_config.yml`. By default the `filename` will be derived from the `title`, but you can specify an explicit filename (without the date) by passing the third agument. Finally the `--edit` (or just `-e`) will launch the editor defined by the `$EDITOR` environment variable.

./bin/jekyll-page "My New Page" ref

Will produce a file `_posts/2013-06-05-my-new-page.md` with the [front-matter](http://jekyllrb.com/docs/frontmatter/) already defined:

---

layout: page

title: "My New Page"

category: ref

date: 2013-06-05 12:00:00

---

Simply add an `order` attribute to the front-matter of the page and the navigation links will be sorted accordingly (within it's section).

---

layout: page

title: "My New Page"

category: ref

date: 2013-06-05 12:00:00

order: 1

---

For convenience, a new directory will be created called `_pages` which contains symlinks to the posts without the data prefix, e.g. `2013-04-13-foo.md` → `foo.md`. This makes it a tad easier when opening files to edit.

Start the server

Start the server with: `jekyll serve &; jekyll build -watch`

title: 'Pippo'

subtitle: 'Micro Java Web Framework'

disqus_shortname: ''

google_analytics_id: ''

navigation: 2

codeurl: 'https://github.com/decebals/pippo'

sections: [

['doc', 'Documentation'],

['tut', 'Tutorial'],

['ref', 'Reference'],

['dev', 'Developers'],

['post', 'Posts']

baseurl: ''

permalink: none

highlighter: pygments

future: true

exclude: ['bin', 'README.md']

markdown: redcarpet

redcarpet:

extensions: [

'no_intra_emphasis',

'fenced_code_blocks',

'autolink',

'strikethrough',

'superscript',

'with_toc_data',

'tables',

'hardwrap'

]

<div id="disqus_thread"></div>

<script type="text/javascript">

/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

var disqus_shortname = '{{ site.disqus_shortname }}'; // 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 = '//' + disqus_shortname + '.disqus.com/embed.js';

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);

})();

<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Documentation for <a href="{% if site.codeurl %}{{ site.codeurl }}{% else %}{{ site.baseurl }}{% endif %}">{{ site.title }}</a>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', '{{ site.google_analytics_id }}', 'auto');

ga('send', 'pageview');

<h4><a class=brand href="{{ site.baseurl }}/">{{ site.title }}</a>

{% if site.subtitle %}<small>{{ site.subtitle }}</small>{% endif %}

<ul class="nav nav-list">

<li><a href="{{ site.baseurl }}/">Home</a></li>

{% for section in site.sections %}

{% assign attr = section[0] %}

{% assign label = section[1] %}

{% for page in site.categories[attr] %}

{% if forloop.first %}

<li class=nav-header>{{ label }}</li>

{% endif %}

<li data-order="{{ page.order }}"><a href="{{ site.baseurl }}{{ page.url }}">{{ page.title }}</a></li>

{% endfor %}

{% endfor %}

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width">

<title>{{ site.title }}{% if page.title %} : {{ page.title }}{% endif %}</title>

<meta name="description" content="{{ site.subtitle }}">

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

<link rel="stylesheet" href="{{ site.baseurl }}/css/syntax.css">

<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">

</head>

<body>

<div class="container">

<div class=row-fluid>

<div id=header class=span12>

{% include header.html %}

</div>

</div>

<div class=row-fluid>

{% assign post_count = site.posts|size %}

{% if site.navigation != 0 and site.navigation == 1 or post_count > 0 %}

<div id=navigation class=span2>

{% include navigation.html %}

</div>

<div id=content class=span10>

{{ content }}

</div>

{% else %}

<div id=content class=span12>

{{ content }}

</div>

{% endif %}

</div>

{% if page.disqus == 1 %}

<div class=row-fluid>

{% if site.navigation == 1 or post_count > 0 %}

<div id=navigation class=span2></div>

<div id=disqus class=span10>

{% include disqus.html %}

</div>

{% else %}

<div id=disqus class=span12>

{% include disqus.html %}

</div>

{% endif %}

</div>

{% endif %}

<div class=row-fluid>

<div id=footer class=span12>

{% include footer.html %}

</div>

</div>

</div>

<script>

function orderNav() {

var list,

section,

header,

sections = [],

lists = {},

headers = {};

var navUl = document.querySelectorAll('#navigation ul')[0],

navLis = document.querySelectorAll('#navigation ul li');

if (!navUl) return;

for (var i = 0; i < navLis.length; i++) {

var order, li = navLis[i];

if (li.classList.contains('nav-header')) {

section = li.textContent || li.innerText;

sections.push(section);

headers[section] = li;

continue;

}

if (!lists[section]) {

lists[section] = [];

}

order = parseFloat(li.getAttribute('data-order'))

lists[section].push([order, li]);

}

for (var i = 0; i < sections.length; i++) {

section = sections[i];

list = lists[section].sort(function(a, b) {

return a[0] - b[0];

});

if (header = headers[section]) {

navUl.appendChild(header);

}

for (var j = 0; j < list.length; j++) {

navUl.appendChild(list[j][1]);

}

}

}

if (document.querySelectorAll) orderNav();

</script>

{% if site.google_analytics_id != "" %}

{% include google_analytics.html %}

{% endif %}

</body>

---

layout: default

---

<div class=page-header>

<h2>{{ page.title }}

{% if page.subtitle %}<small>{{ page.subtitle }}</small>{% endif %}

</h2>

{{ content }}