Using Ruby Gem "StaticMatic" to create static HTML websites with Ruby, HAML and SASS

1. StaticMatic
Statische Websites
mit Ruby, HAML und SASS
Georg Ledermann
@ledermann
github.com/ledermann

2. Einstieg
• Eine Website steht an?
• Ein CMS wäre der Overkill?
• Du beherrschst Ruby und HAML?
Willkommen bei
StaticMatic!

3. Was ist das?
• Generator für statische HTML-Seiten
• Ein RubyGem
• Verwendung von HAML, SASS, Partials,
Layouts, Helper
Kein Rails, schmeckt aber so ähnlich.

4. Turnaround-Zyklus
• Verwendet Mongrel zum lokalen Entwickeln
• Arbeiten wie mit Rails:
1. Lokalen Server starten („Preview“)
2. HAML/SASS/Ruby-Code bearbeiten
3. Browser-Refresh
4. Goto 2

5. Vorteile
• Geringe Serveranforderungen: Nur Web-
Server benötigt. Kein Ruby, kein Rails, keine
Datenbank notwendig.
• Schnelle Ergebnisse
• HAML & SASS
• Steile Lernkurve für Rails-Entwickler

6. Noch mehr Vorteile
• Einfache Versionierung auch des Content
• Sehr flexibel. Fehlt was? Helper schreiben
mit Ruby.
• Kein schlechtes Gewissen, weil man
WordPress verwendet.

7. Navigation
• Es gibt einen Ruby-Helper
• Breadcrumbs, Sitemaps, Menus
• Funktioniert über Auslesen der
Dateistruktur

8. Coding
• gem install staticmatic
• staticmatic setup railscamp
• cd railscamp
• staticmatic preview .
• http://localhost:3000

9. Datei-Struktur
• src: Pages, Layouts, Helper, SASS,
configuration
• site: Images, JavaScript, HTML
(generiert), CSS (generiert)

10. DEMO!

11. Deployment mit rsync
RakeFile
ssh_user = "deploy@myserver.de"
remote_root = "/var/www/my-site/"
desc "Clears styles, builds and deploys"
task do
system "rm -rfv site/stylesheets/*"
system "staticmatic build ."
system "rsync -avz --exclude='.DS_Store' --delete site/ #{ssh_user}:#{remote_root}"
end
rake deploy

12. Einschränkungen
StaticMatic ist keine gute Wahl, wenn...
• ... es dynamische Bestandteile gibt (z.B.
Kommentare in einem Weblog)
• ... Inhalte von einem Non-Rubyist
bearbeitet werden sollen

13. Links
• StaticMatic & Friends
• http://www.staticmatic.net/
• http://github.com/staticmatic/staticmatic
• http://github.com/adamstac/staticmatic-bootstrap
• Beispiele
• hagenburger.net
• georg-ledermann.de