Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Static Websites with Sculpin

71c9ebde850996d2533c5df4df2c93c6?s=47 Oliver Davies
September 07, 2021

Building Static Websites with Sculpin

71c9ebde850996d2533c5df4df2c93c6?s=128

Oliver Davies

September 07, 2021
Tweet

Transcript

  1. Building static websites with Sculpin Oliver Davies (@opdavies)

  2. @opdavies

  3. @opdavies

  4. What is Sculpin? • Static site generator • CLI tool

    • Built on Symfony's HttpKernel • HTML + Markdown + Twig = Static site @opdavies
  5. What do I use it for? • My personal website

    • Some client websites • HTML prototypes and testing • Learning YAML and Twig (and some Symfony) @opdavies
  6. Installation composer require sculpin/sculpin composer create-project sculpin/blog-skeleton my-blog composer create-project

    opdavies/sculpin-skeleton my-site @opdavies
  7. Using Sculpin • Configuration lives in app/config • Source files

    live in source. @opdavies
  8. Generate a site • vendor/bin/sculpin generate • --server • --watch

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

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

  11. 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
  12. Using on pages <!DOCTYPE html> <head> <title>{{ site.name }}</title> </head>

    @opdavies
  13. YAML front matter --- layout: post title: New blog post

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

    draft: yes tags: - drupal - php - sculpin --- # My new blog post @opdavies
  15. 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
  16. 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
  17. 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
  18. Layouts {# source/_layouts/default.html.twig #} {% extends 'app' %} {% block

    body %} {% block content %}{% endblock %} {% endblock %} @opdavies
  19. Includes {% include 'about-author' with { avatar: site.avatar, work: site.work,

    } only %} {% for link in links %} {% include 'menu-link' with { link } only %} {% endfor %} @opdavies
  20. Content types # app/config/sculpin_kernel.yml sculpin_content_types: projects: permalink: projects/:slug_title/ @opdavies

  21. Accessing custom content types --- title: My Projects layout: default

    use: - projects --- {% for project in data.projects %} <h2>{{ project.title }}</h2> {% endfor %} @opdavies
  22. Demo @opdavies

  23. Extending Sculpin # app/config/sculpin_kernel.yml ... services: App\TwigExtension\TalkExtension: tags: - {

    name: twig.extension } @opdavies
  24. @opdavies

  25. // 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
  26. 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