JAMstack / Static Site Generators

JAMstack / STATIC SITE GENERATORS
Dietrich Rordorf

INHALT
↣ JAMstack
↣ JAMstack + Content Management
↣ Hugo Static Site Generator

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

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.

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

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.

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

JAMstack / Static Site Generators

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie JAMstack / Static Site Generators

Ähnlich wie JAMstack / Static Site Generators (20)

JAMstack / Static Site Generators