Building Static Websites with Sculpin

https://www.oliverdavies.uk/talks/building-static-websites-sculpin

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