SlideShare ist ein Scribd-Unternehmen logo
JAMstack / STATIC SITE GENERATORS
Dietrich Rordorf
INHALT
↣ JAMstack
↣ JAMstack + Content Management
↣ Hugo Static Site Generator
Vue vs. React
JAMstack
↣ JavaScript
↣ reusable APIs
↣ prebuilt Mark-up
Matt Biilmann
GRUNDGEDANKEN
↣ keine Datenbank
↣ Statischer Markup
↣ Serverless / Cloud-basiert / CDN
↣ Daten über reusable APIs / Multi-API
↣ komplexe Operationen über FaaS
STATISCH bzw. PRE-BUILT?
↣ Static Site Generators!
↣ Content + Frontmatter als Markdown
↣ Templates
↣ Content + Templates + SSG à HTML
ALLES ZIEMLICH KOMPLIZIERT
Marketing-Mensch braucht ein einfaches CMS…
JAMstack UND CONTENT MANAGEMENT
↣ Templates + Content im git Repo
↣ git-basierter Workflow (Hooks)
↣ Content Editing mit CMS Apps via API
JAMstack CYCLE
DNS-basierter
Traffic Director
API
Build + Deploy
ABGRENZUNG
↣ Server-seitiges CMS
↣ Headless CMS
↣ App in PHP, Python, Ruby, etc.
↣ Server-seitig gerenderte SPA
CMS Welt
Klassisch Flat-File Static Site Generator
Vertreter WordPress,
Drupal, Typo3, …
Kirby CMS,
Craft CMS, Grav
Hugo, Gatsby, Jekyll
Datenbank ☑ - -
Backend ☑ ☑ -
Distribution Server Server Serverless / CDN
Content Text & HTML in DB Markdown Markdown
Versionierung Schwierig zu erreichen Möglich mit git Alles in git
CMS integriert integriert CMS App / git Workflow
WHY?
VORTEILE JAMstack
↣ Serverless: Performant + Skalierbar
↣ kein Backend: Sicherheit
↣ keine Updates / Patches
↣ Git-basierter Workflow, Automatismen
↣ Komplette, kongruente Versionierung
↣ Inhalt-Version passt immer zu Template-Version
NACHTEILE JAMstack
↣ CMS App: kein Live-Preview
↣ CMS App: Time Lag zwischen Save und Deploy
↣ Mindshift für den Entwickler und Redaktor
↣ z.B. Formulare via SaaS (Typeform o.ä.)
↣ Bilder-Thumbs im Frontend erstellen
↣ usw.
Aktuelle Version: 0.42
PROJEKTSTRUKTUR
• archetypes Content Typisierung und Defaults
• content Inhalte in Mark Down
• layouts where the magic happens
• static Assets: Bilder, PDFs
• config.toml Parametrierung / Globals
ARCHETYPE
---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: "{{ .Date }}"
draft: true
author: "Firstname Lastname"
tags: ["x", "y"]
thumbimage: ""
fullimage: ""
---
tl;dr
<!--more-->
archetype/posts.md
CONTENT
---
title: "My first post with Hugo"
date: "2018-06-20"
draft: false
author: "Dietrich Rordorf"
tags: ["hugo", "post"]
thumbimage: ""
fullimage: ""
---
Teaser / intro text für den Blog Post.
<!--more-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
content/posts/2018-first-post.md
LAYOUT
↣ Default Layout
↣ pro Archetype
↣ immer ein single und ein list Layout
MINIMAL LAYOUT single
<!doctype html>
<html>
<title>{{ .Title }}</title>
<body>
<article>
<h1>{{ .Title }}</h1>
{{ if .Params.author }}
<h3>{{ .Params.author }}</h3>
{{ end }}
{{ .Content }}
</article>
</body>
</html>
layout/posts/single.html
MINIMAL LAYOUT list
...
{{ range first 10 .Data.Pages }}
<h3>{{ .Title }}</h3>
<p>
{{ .Summary }}
</p>
{{ end }}
...
layout/posts/list.html
PAGINATION
https://glennmccomb.com/articles/how-to-build-custom-hugo-pagination/
LAYOUTS IN BELIBIGEM FORMAT
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{{ range .Data.Pages }}
<url>
<loc>{{ .Site.Params.appSitemapUrl }}{{ .Permalink }}</loc>
{{ if not .Lastmod.IsZero }}
<lastmod>{{ safeHTML ( dateFormat "2006-01-02" .Lastmod ) }}</lastmod>
{{ end }}
{{ with .Sitemap.ChangeFreq }}
<changefreq>{{ . }}</changefreq>
{{ end }}
</url>
{{ end }}
</urlset>
layout/sitemap.xml
DANKE !
Dietrich Rordorf
GitHub github.com/rordi
Work www.ditoy.com
Weiterführende Links
jamstack.org
www.netlifycms.org
gohugo.io
gohugo.io/tools/starter-kits/
www.netlify.com

Weitere ähnliche Inhalte

Ähnlich wie JAMstack / Static Site Generators

Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
Christian Keuerleber
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015
Bastian Grimm
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
Jürg Stuker
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
Alexander Schmidt
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
Bastian Grimm
 
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013Performance Optimierung mit Mod_Pagespeed - WP Camp 2013
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013Bernhard Kau
 
HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014
Markus Greve
 
Data Vault DWH Automation
Data Vault DWH AutomationData Vault DWH Automation
Data Vault DWH Automation
Torsten Glunde
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017
Bastian Grimm
 
Clickstream Analysis with Spark
Clickstream Analysis with Spark Clickstream Analysis with Spark
Clickstream Analysis with Spark
Josef Adersberger
 
Clickstream Analysis with Spark - Understanding Visitors in Real Time
Clickstream Analysis with Spark - Understanding Visitors in Real TimeClickstream Analysis with Spark - Understanding Visitors in Real Time
Clickstream Analysis with Spark - Understanding Visitors in Real Time
QAware GmbH
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Sebastian Springer
 
Von Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein MigrationsberichtVon Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein Migrationsbericht
Andreas Schiweck
 
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Manfred Steyer
 
Globetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HHGlobetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HH
Sebastian Heuer
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny Linden
Danny Linden
 
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaOffline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaStephan Hochdörfer
 
Business Platform 3DEXPERIENCE 2019
Business Platform 3DEXPERIENCE 2019Business Platform 3DEXPERIENCE 2019
Business Platform 3DEXPERIENCE 2019
SQL Projekt AG
 

Ähnlich wie JAMstack / Static Site Generators (20)

Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
 
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013Performance Optimierung mit Mod_Pagespeed - WP Camp 2013
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013
 
HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014
 
Data Vault DWH Automation
Data Vault DWH AutomationData Vault DWH Automation
Data Vault DWH Automation
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017
 
Clickstream Analysis with Spark
Clickstream Analysis with Spark Clickstream Analysis with Spark
Clickstream Analysis with Spark
 
Clickstream Analysis with Spark - Understanding Visitors in Real Time
Clickstream Analysis with Spark - Understanding Visitors in Real TimeClickstream Analysis with Spark - Understanding Visitors in Real Time
Clickstream Analysis with Spark - Understanding Visitors in Real Time
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
Von Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein MigrationsberichtVon Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein Migrationsbericht
 
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
 
Globetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HHGlobetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HH
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny Linden
 
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaOffline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmka
 
Business Platform 3DEXPERIENCE 2019
Business Platform 3DEXPERIENCE 2019Business Platform 3DEXPERIENCE 2019
Business Platform 3DEXPERIENCE 2019
 

JAMstack / Static Site Generators