Building Static Websites with Sculpin

Building static websites with Sculpin Oliver Davies (@opdavies)

@opdavies

What is Sculpin? • Static site generator • CLI tool
• Built on Symfony's HttpKernel • HTML + Markdown + Twig = Static site @opdavies

What do I use it for? • My personal website
• Some client websites • HTML prototypes and testing • Learning YAML and Twig (and some Symfony) @opdavies

Installation composer require sculpin/sculpin composer create-project sculpin/blog-skeleton my-blog composer create-project
opdavies/sculpin-skeleton my-site @opdavies

Using Sculpin • Configuration lives in app/config • Source files
live in source. @opdavies

Generate a site • vendor/bin/sculpin generate • --server • --watch
• --env @opdavies

source/index.md --- layout: default title: Hello! --- Hello, World! @opdavies

output_dev/index.html <!DOCTYPE html> <head> </head> <body> <p>Hello, World!</p> </body> @opdavies

Configuration • Stored in app/config • sculpin_site.yml • sculpin_site_{env}.yml •
Key-value pairs --- name: My talk menu_links: - { title: Home, href: / } - { title: About, href: /about } @opdavies

Using on pages <!DOCTYPE html> <head> <title>{{ site.name }}</title> </head>
@opdavies

YAML front matter --- layout: post title: New blog post
draft: yes --- # My new blog post @opdavies

More front matter --- layout: post title: New blog post
draft: yes tags: - drupal - php - sculpin --- # My new blog post @opdavies

Even more front matter --- layout: post title: New blog
post draft: yes tags: - drupal - php - sculpin tweets: yes foo: bar --- # My new blog post @opdavies

Using on pages --- ... testimonials: - { name: ...,
role: ..., text: ..., url: ... } - { name: ..., role: ..., text: ..., url: ... } - { name: ..., role: ..., text: ..., url: ... } --- {% for testimonial in page.testimonials %} <h2>{{ testimonial.name }} - {{ testimonial.role }}</h2> <p>{{ testimonial.text }}</p> {% endfor %} @opdavies

Layouts {# source/_layouts/app.html.twig #} <!DOCTYPE html> <html lang="{{ site.locale|default('en') }}">
<head> <title>{{ site.name|default('Sculpin Skeleton') }}</title> </head> <body> {% block body %}{% endblock %} </body> </html> @opdavies

Layouts {# source/_layouts/default.html.twig #} {% extends 'app' %} {% block
body %} {% block content %}{% endblock %} {% endblock %} @opdavies

Includes {% include 'about-author' with { avatar: site.avatar, work: site.work,
} only %} {% for link in links %} {% include 'menu-link' with { link } only %} {% endfor %} @opdavies

Content types # app/config/sculpin_kernel.yml sculpin_content_types: projects: permalink: projects/:slug_title/ @opdavies

Accessing custom content types --- title: My Projects layout: default
use: - projects --- {% for project in data.projects %} <h2>{{ project.title }}</h2> {% endfor %} @opdavies

Demo @opdavies

Extending Sculpin # app/config/sculpin_kernel.yml ... services: App\TwigExtension\TalkExtension: tags: - {
name: twig.extension } @opdavies

@opdavies

// app/SculpinKernel.php use Opdavies\Sculpin\Bundle\TwigMarkdownBundle\SculpinTwigMarkdownBundle; use Sculpin\Bundle\SculpinBundle\HttpKernel\AbstractKernel; final class SculpinKernel extends
AbstractKernel { protected function getAdditionalSculpinBundles(): array { return [ SculpinTwigMarkdownBundle::class, ]; } } @opdavies

Thanks! References: • https://sculpin.io • https://github.com/opdavies/sculpin-talk-demo • https://github.com/opdavies/oliverdavies.uk • https://github.com/opdavies/docker-image-sculpin-serve
Me: • https://www.oliverdavies.uk @opdavies

Building Static Websites with Sculpin

Building Static Websites with Sculpin

Oliver Davies

More Decks by Oliver Davies

Other Decks in Technology

Featured

Transcript