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

Building Static Websites with Sculpin

Oliver Davies
September 07, 2021

Building Static Websites with Sculpin

Oliver Davies

September 07, 2021
Tweet

More Decks by Oliver Davies

Other Decks in Technology

Transcript

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

    View Slide

  2. @opdavies

    View Slide

  3. @opdavies

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. output_dev/index.html




    Hello, World!

    @opdavies

    View Slide

  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

    View Slide

  12. Using on pages


    {{ site.name }}

    @opdavies

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  16. Using on pages
    ---
    ...
    testimonials:
    - { name: ..., role: ..., text: ..., url: ... }
    - { name: ..., role: ..., text: ..., url: ... }
    - { name: ..., role: ..., text: ..., url: ... }
    ---
    {% for testimonial in page.testimonials %}
    {{ testimonial.name }} - {{ testimonial.role }}
    {{ testimonial.text }}
    {% endfor %}
    @opdavies

    View Slide

  17. Layouts
    {# source/_layouts/app.html.twig #}



    {{ site.name|default('Sculpin Skeleton') }}


    {% block body %}{% endblock %}


    @opdavies

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  22. Demo
    @opdavies

    View Slide

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

    View Slide

  24. @opdavies

    View Slide

  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

    View Slide

  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

    View Slide