Introduzione ai generatori di siti statici

di Andrea Scarpino


Linux Day Bari 2015 - 24/10/2015

Pagine statiche vs dinamiche


ma… dov'è la differenza?!

Pagina HTML statica:

<html>
    <head>
        <title>Pagina statica</title>
    </head>
    <body>
        <p>Sono una pagina statica.</p>
    </body>
</html>

Pagina HTML dinamica in PHP:

<?php require_once("data.php"); ?>
<html>
    <head>
	<title><?php echo "$titolo"; ?></title>
    </head>
    <body>
	<?php echo "<p>$testo</p>"; ?>
    </body>
</html>

Architettura statica vs dinamica

Perché statico?

  • Sicurezza
  • Nessun interprete
  • Nessun applicativo sul server
  • Velocità nel rispondere alle richieste
  • Scalabilità
  • Facilità nel deploy

Dov'è l'inghippo?

  • Nessuna "dinamicità"
    • Gestione dei commenti affidata a servizi esterni (Disqus, Discourse, Kaiju, …)
  • I post si scrivono offline e sono "solo sul tuo pc"
    • Copia su servizi esterni (Dropbox, GitHub, …)
  • Bisogna conoscere il Markdown

Generatori di siti statici

Ad oggi esistono circa 400 generatori di siti statici.

I più popolari sono:

  • Jekyll (Ruby, MIT)
  • GitBook (JavaScript, Apache)
  • Octopress (Ruby, MIT)
  • Hexo (JavaScript, MIT)
  • Hugo (Go, SimPL)
  • Pelican (Python, AGPL)
  • Brunch (JavaScript, MIT)
  • Middleman (Ruby, MIT)

Fonte staticgen.com

Jekyll

Nasce nel 2008, sviluppato da Tom Preston-Werner

Caratteristiche:

  • Orientato per la scrittura di blog
  • Articoli scritti in Markdown o Textile
  • Offre degli script di import per molti CMS
  • Sintassi colorata per gli snippet di codice
  • Paginazione
  • Supporto ai plugin

Installazione

Requisiti: Ruby

$ gem install jekyll

Creiamo il blog:

$ jekyll new mioBlog
$ cd mioBlog
$ ls
about.md
css
feed.xml
index.html
_config.yml
_includes
_layouts
_posts
_sass
$ cat _config.yml
title: Linux Day Blog
email: info@linuxday.it
description: Un blog sul Linux Day
baseurl: /blog
url: "http://linuxday.it"
twitter_username: linuxday
github_username:  ld15bari
markdown: kramdown
highlighter: pygments

Creazione di un post

$ touch _posts/2015-10-24-linux-day-2015-bari.markdown
$ cat _posts/2015-10-24-linux-day-2015-bari.markdown
---
layout: post
title: Linux Day 2015 Bari
date: 2015-10-24 12:00:00
categories: [linux, linuxday]
---
*Ciao a tutti!*

Benvenuti al __Linux Day 2015__ di Bari!

Per info [ld15bari.github.io](https://ld15bari.github.io).
$ ls _layouts
default.html  page.html  post.html
$ cat _layouts/default.html
<!DOCTYPE html>
<html>
  {% include head.html %}
  <body>
    {% include header.html %}
    <div class="page-content">
      <div class="wrapper">
        {{ content }}
      </div>
    </div>
    {% include footer.html %}
  </body>
</html>
$ cat _layouts/post.html
---
layout: default
---
<div class="post">
  <header class="post-header">
    <h1 class="post-title">{{ page.title }}</h1>
    <p class="post-meta">{{ page.date | date: "%b %-d, %Y" }}
	{% if page.author %} • {{ page.author }} {% endif %}
	{% if page.meta %} • {{ page.meta }} {% endif %}</p>
  </header>
  <article class="post-content">
    {{ content }}
  </article>
</div>

Generazione del sito

$ jekyll build
$ ls _site
about  css  feed.xml  index.html  linux day
$ ls _site/about
index.html
$ ls _site/linux/linux\ day/2015/10/24/
linux-day-2015-bari.html

Per generare il sito e rigenerarlo ad ogni cambiamento:

$ jekyll build --watch

Per generare il sito e avviare un server HTTP sulla porta 4000:

$ jekyll serve
jekyllthemes.org

References






Andrea Scarpino

Software Developer involved in FOSS

http://www.andreascarpino.it

@ilpianista_ | git{hub,lab}.com/ilpianista