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

Building Static Websites with Sculpin

Avatar for Oliver Davies Oliver Davies
August 28, 2024
Technology
0
1.6k

Building Static Websites with Sculpin

https://www.oliverdavies.uk/talks/building-static-websites-sculpin
Avatar for Oliver Davies

Oliver Davies

August 28, 2024
Tweet

More Decks by Oliver Davies

See All by Oliver Davies
Taking Flight with Tailwind CSS
Avatar for Oliver Davies opdavies
0
5.1k
TDD - Test Driven Drupal
Avatar for Oliver Davies opdavies
0
4k
Building "Build Configs"
Avatar for Oliver Davies opdavies
0
470
Communities and contribution
Avatar for Oliver Davies opdavies
0
220
Working without Workspace
Avatar for Oliver Davies opdavies
0
260
Things you should know about PHP
Avatar for Oliver Davies opdavies
1
790
An Introduction to Mob Programming
Avatar for Oliver Davies opdavies
0
300
Deploying PHP applications with Ansible, Ansible Vault and Ansistrano
Avatar for Oliver Davies opdavies
0
6.3k
Upgrading to Drupal 9
Avatar for Oliver Davies opdavies
0
810

Other Decks in Technology

See All in Technology
テスト設計チュートリアル ちびこん編 ’25
Avatar for k.i. omn
0
140
スプリントゴールで価値を駆動しよう
Avatar for Taku Fujii takufujii
3
1.5k
Lakehouse в Лемана Тех. От архитектуры до оптимизации
Avatar for Elena Meremyanina emeremyanina1234
0
510
Microsoft Fabric のライセンスについて
Avatar for Ryoma Nagata ryomaru0825
2
3.5k
VueUseから学ぶ実践TypeScript #TSKaigi #TSKaigi2025
Avatar for 弁護士ドットコム bengo4com
1
270
人間性を捧げる生成AI時代の技術選定
Avatar for yo4raw yo4raw
2
1.2k
SRE/インフラエンジニアの市場価値とキャリアパス/Market value and career path for SRE-infrastructure engineers
Avatar for Takuma Kume takumakume
1
230
SONiCで構築・運用する生成AI向けパブリッククラウドネットワーク
Avatar for SONiC Users Group Japan sonic
1
550
SaaS公式MCPサーバーをリリースして得た学び
Avatar for ryo kawamataryo
5
1.5k
Software Delivery Observability CI・CD , DORA metrics も Datadog で可視化しよう / datadog-ci-cd-observability
Avatar for Annosuke Yokoo parupappa2929
0
200
LLMベースAIの基本 / basics of LLM based AI
Avatar for Naoki Kishida kishida
9
2.3k
Cline&CursorによるAIコーディング徹底活用―Live Vibe Coding付き
Avatar for PharmaX（旧YOJO Technologies）開発チーム pharma_x_tech
2
500

Featured

See All Featured
Designing for Performance
Avatar for Lara Hogan lara
608
69k
Building Applications with DynamoDB
Avatar for Matt Wood mza
94
6.4k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
6
560
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
177
9.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.3k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.7k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
268
20k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
19
1.2k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
35
2.7k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
23
1.6k

Transcript

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

  2. @opdavies

  3. @opdavies

  4. What is a static website? .htaccess assets/images/od-logo.jpg build/tailwind.css call/index.html daily/2024/03/18/automated-drupal-11-compatibility-fixes/index.html

    drupal-upgrade/index.html favicon.ico index.html phpberks/index.html podcast/19-sam-mortenson/index.html pricing/index.html talks/taking-flight-with-tailwind-css/index.html talks/tdd-test-driven-drupal/index.html @opdavies

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

    • Built on Symfony components • Markdown + Twig = Static HTML @opdavies

  6. Why use a static site generator? • Rapid development. •

    Templating. • Security. • Performance. • Easy and cheap to host. @opdavies

  7. What do I use it for? • My personal website

    and Zettelkasten. • Some client websites. • HTML prototypes and testing. • Learning YAML and Twig (and some Symfony). @opdavies

  8. Installation composer require sculpin/sculpin composer create-project sculpin/blog-skeleton my-blog composer create-project

    opdavies/sculpin-skeleton my-site @opdavies

  9. Using Sculpin • Configuration in app/config • Source files in

    source. • Templates in source/_templates or source/_layouts. • Includes in source/_includes or source/_partials. @opdavies

  10. app/ config/ sculpin_kernel.yml sculpin_site.yml composer.json composer.lock output_dev/ output_prod/ source/ _includes/

    _templates/ index.md vendor/ @opdavies

  11. app/ config/ sculpin_kernel.yml sculpin_site.yml composer.json composer.lock output_dev/ output_prod/ source/ _includes/

    _templates/ index.md vendor/ @opdavies

  12. app/ config/ sculpin_kernel.yml sculpin_site.yml composer.json composer.lock output_dev/ output_prod/ source/ _includes/

    _templates/ index.md vendor/ @opdavies

  13. app/ config/ sculpin_kernel.yml sculpin_site.yml composer.json composer.lock output_dev/ output_prod/ source/ _includes/

    _templates/ index.md vendor/ @opdavies

  14. app/ config/ sculpin_kernel.yml sculpin_site.yml composer.json composer.lock output_dev/ output_prod/ source/ _includes/

    _templates/ index.md vendor/ @opdavies

  15. Generate a site • vendor/bin/sculpin generate • --server • --watch

    • --env @opdavies

  16. source/index.md 1 --- 2 layout: default 3 title: Hello! 4

    --- 5 6 Hello, World! @opdavies

  17. source/index.md 1 --- 2 layout: default 3 title: Hello! 4

    --- 5 6 Hello, World! @opdavies

  18. source/index.md 1 --- 2 layout: default 3 title: Hello! 4

    --- 5 6 Hello, World! @opdavies

  19. source/index.md 1 --- 2 layout: default 3 title: Hello! 4

    --- 5 6 Hello, World! @opdavies

  20. source/index.md 1 --- 2 layout: default 3 title: Hello! 4

    --- 5 6 Hello, World! @opdavies

  21. output_dev/index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Hello!</title>

    5 </head> 6 <body> 7 <p>Hello, World!</p> 8 </body> 9 </html> @opdavies

  22. output_dev/index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Hello!</title>

    5 </head> 6 <body> 7 <p>Hello, World!</p> 8 </body> 9 </html> @opdavies

  23. output_dev/index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Hello!</title>

    5 </head> 6 <body> 7 <p>Hello, World!</p> 8 </body> 9 </html> @opdavies

  24. Configuration • Stored in app/config • sculpin_site.yml • sculpin_site_{env}.yml •

    Key-value pairs 1 --- 2 name: oliverdavies.uk 3 menu_links: 4 - { title: Home, href: / } 5 - { title: About, href: /about } @opdavies

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

    </head> </html> @opdavies

  26. YAML front matter --- layout: post title: New blog post

    draft: yes --- @opdavies

  27. YAML front matter 1 --- 2 layout: post 3 title:

    New blog post 4 draft: yes 5 --- @opdavies

  28. YAML front matter 1 --- 2 layout: post 3 title:

    New blog post 4 draft: yes 5 --- @opdavies

  29. YAML front matter 1 --- 2 layout: post 3 title:

    New blog post 4 draft: yes 5 --- @opdavies

  30. More front matter 1 --- 2 layout: post 3 title:

    New blog post 4 draft: yes 5 tags: 6 - drupal 7 - php 8 - sculpin 9 --- @opdavies

  31. Even more front matter 1 --- 2 layout: post 3

    title: New blog post 4 draft: yes 5 tags: 6 - drupal 7 - php 8 - sculpin 9 tweets: yes 10 foo: bar 11 --- @opdavies

  32. Using on pages 1 --- 2 ... 3 testimonials: 4

    - { name: ..., role: ..., text: ..., url: ... } 5 - { name: ..., role: ..., text: ..., url: ... } 6 - { name: ..., role: ..., text: ..., url: ... } 7 --- 8 9 {% for testimonial in page.testimonials %} 10 <h2>{{ testimonial.name }} - {{ testimonial.role }}</h2> 11 <p>{{ testimonial.text }}</p> 12 {% endfor %} @opdavies

  33. Using on pages 1 --- 2 ... 3 testimonials: 4

    - { name: ..., role: ..., text: ..., url: ... } 5 - { name: ..., role: ..., text: ..., url: ... } 6 - { name: ..., role: ..., text: ..., url: ... } 7 --- 8 9 {% for testimonial in page.testimonials %} 10 <h2>{{ testimonial.name }} - {{ testimonial.role }}</h2> 11 <p>{{ testimonial.text }}</p> 12 {% endfor %} @opdavies

  34. Using on pages 1 --- 2 ... 3 testimonials: 4

    - { name: ..., role: ..., text: ..., url: ... } 5 - { name: ..., role: ..., text: ..., url: ... } 6 - { name: ..., role: ..., text: ..., url: ... } 7 --- 8 9 {% for testimonial in page.testimonials %} 10 <h2>{{ testimonial.name }} - {{ testimonial.role }}</h2> 11 <p>{{ testimonial.text }}</p> 12 {% endfor %} @opdavies

  35. Using on pages 1 --- 2 ... 3 testimonials: 4

    - { name: ..., role: ..., text: ..., url: ... } 5 - { name: ..., role: ..., text: ..., url: ... } 6 - { name: ..., role: ..., text: ..., url: ... } 7 --- 8 9 {% for testimonial in page.testimonials %} 10 <h2>{{ testimonial.name }} - {{ testimonial.role }}</h2> 11 <p>{{ testimonial.text }}</p> 12 {% endfor %} @opdavies

  36. Using on pages 1 --- 2 ... 3 testimonials: 4

    - { name: ..., role: ..., text: ..., url: ... } 5 - { name: ..., role: ..., text: ..., url: ... } 6 - { name: ..., role: ..., text: ..., url: ... } 7 --- 8 9 {% for testimonial in page.testimonials %} 10 <h2>{{ testimonial.name }} - {{ testimonial.role }}</h2> 11 <p>{{ testimonial.text }}</p> 12 {% endfor %} @opdavies

  37. Using on pages 1 --- 2 ... 3 testimonials: 4

    - { name: ..., role: ..., text: ..., url: ... } 5 - { name: ..., role: ..., text: ..., url: ... } 6 - { name: ..., role: ..., text: ..., url: ... } 7 --- 8 9 {% for testimonial in page.testimonials %} 10 <h2>{{ testimonial.name }} - {{ testimonial.role }}</h2> 11 <p>{{ testimonial.text }}</p> 12 {% endfor %} @opdavies

  38. Layouts 1 {# source/_layouts/base.html.twig #} 2 3 <!DOCTYPE html> 4

    <html lang="{{ site.locale|default('en') }}"> 5 <head> 6 <title>{{ site.name|default('Sculpin Skeleton') }}</title> 7 </head> 8 <body> 9 {% block body %}{% endblock %} 10 </body> 11 </html> @opdavies

  39. Layouts 1 {# source/_layouts/base.html.twig #} 2 3 <!DOCTYPE html> 4

    <html lang="{{ site.locale|default('en') }}"> 5 <head> 6 <title>{{ site.name|default('Sculpin Skeleton') }}</title> 7 </head> 8 <body> 9 {% block body %}{% endblock %} 10 </body> 11 </html> @opdavies

  40. Layouts 1 {# source/_layouts/base.html.twig #} 2 3 <!DOCTYPE html> 4

    <html lang="{{ site.locale|default('en') }}"> 5 <head> 6 <title>{{ site.name|default('Sculpin Skeleton') }}</title> 7 </head> 8 <body> 9 {% block body %}{% endblock %} 10 </body> 11 </html> @opdavies

  41. Layouts 1 {# source/_layouts/page.html.twig #} 2 3 {% extends 'base'

    %} 4 5 {% block body %} 6 {% block content %}{% endblock %} 7 {% endblock %} @opdavies

  42. Layouts 1 {# source/_layouts/page.html.twig #} 2 3 {% extends 'base'

    %} 4 5 {% block body %} 6 {% block content %}{% endblock %} 7 {% endblock %} @opdavies

  43. Layouts 1 {# source/_layouts/page.html.twig #} 2 3 {% extends 'base'

    %} 4 5 {% block body %} 6 {% block content %}{% endblock %} 7 {% endblock %} @opdavies

  44. Layouts 1 {# source/_layouts/page.html.twig #} 2 3 {% extends 'base'

    %} 4 5 {% block body %} 6 {% block content %}{% endblock %} 7 {% endblock %} @opdavies

  45. Includes {% include 'about-author' with { avatar: site.avatar, work: site.work,

    } only %} {% for link in links %} {% include 'menu-link' with { link } only %} {% endfor %} @opdavies

  46. Content types # app/config/sculpin_kernel.yml sculpin_content_types: daily_emails: permalink: daily/:slug_title/ @opdavies

  47. Accessing custom content types 1 --- 2 title: My Daily

    Email Archive 3 layout: default 4 use: 5 - daily_email 6 --- 7 8 {% for email in data.daily_emails %} 9 <p>{{ email.title }}</p> 10 {% endfor %} @opdavies

  48. Accessing custom content types 1 --- 2 title: My Daily

    Email Archive 3 layout: default 4 use: 5 - daily_email 6 --- 7 8 {% for email in data.daily_emails %} 9 <p>{{ email.title }}</p> 10 {% endfor %} @opdavies

  49. Accessing custom content types 1 --- 2 title: My Daily

    Email Archive 3 layout: default 4 use: 5 - daily_email 6 --- 7 8 {% for email in data.daily_emails %} 9 <p>{{ email.title }}</p> 10 {% endfor %} @opdavies

  50. Making things more dynamic @opdavies

  51. {{ 'today' }} {{ 'today'|date }} {{ 'today'|date('Y') }} {{

    'today'|date('Y') - 2007 }} # 17 (years of experience) @opdavies

  52. {{ 'today' }} {{ 'today'|date }} {{ 'today'|date('Y') }} {{

    'today'|date('Y') - 2007 }} # 17 (years of experience) @opdavies

  53. {{ 'today' }} {{ 'today'|date }} {{ 'today'|date('Y') }} {{

    'today'|date('Y') - 2007 }} # 17 (years of experience) @opdavies

  54. 1 {{ 'today' }} 2 3 {{ 'today'|date }} 4

    5 {{ 'today'|date('Y') }} 6 7 {{ 'today'|date('Y') - 2007 }} # 17 (years of experience) @opdavies

  55. 1 --- 2 title: Daily Email Archive 3 use: [daily_emails]

    4 --- 5 6 This is an archive of the {{ data.daily_emails|length }} 7 email messages I have sent to my daily email list 8 since the 12th of August, 2022. This is an archive of the 599 email messages I have sent to my daily email list since the 12th of August, 2022. @opdavies

  56. 1 --- 2 title: Building Static Websites with Sculpin 3

    events: 4 - name: PHP Berkshire 5 date: 2024-08-28 6 location: Reading, UK 7 url: https://www.meetup.com/php-berkshire/events/301850284 8 - name: BrumPHP 9 date: 2024-05-23 10 location: Birmingham, UK 11 url: https://www.eventbrite.com/e/brumphp-23rd-may-2024-tickets-803037766577 12 --- 13 @opdavies

  57. 1 {% set talkCount = 0 %} 2 3 {%

    for talk in data.talks %} 4 {% for event in talk.events if 'today'|date('U') >= event.date|date('U') %} 5 {% set talkCount = talkCount + 1 %} 6 {% endfor %} 7 {% endfor %} 8 9 <p>I have given {{ talkCount }} talks.</p> 10 @opdavies

  58. 1 {% set talkCount = 0 %} 2 3 {%

    for talk in data.talks %} 4 {% for event in talk.events if 'today'|date('U') >= event.date|date('U') %} 5 {% set talkCount = talkCount + 1 %} 6 {% endfor %} 7 {% endfor %} 8 9 <p>I have given {{ talkCount }} talks.</p> 10 @opdavies

  59. 1 {% set talkCount = 0 %} 2 3 {%

    for talk in data.talks %} 4 {% for event in talk.events if 'today'|date('U') >= event.date|date('U') %} 5 {% set talkCount = talkCount + 1 %} 6 {% endfor %} 7 {% endfor %} 8 9 <p>I have given {{ talkCount }} talks.</p> 10 @opdavies

  60. 1 {% set talkCount = 0 %} 2 3 {%

    for talk in data.talks %} 4 {% for event in talk.events if 'today'|date('U') >= event.date|date('U') %} 5 {% set talkCount = talkCount + 1 %} 6 {% endfor %} 7 {% endfor %} 8 9 <p>I have given {{ talkCount }} talks.</p> 10 @opdavies

  61. 1 {% set talkCount = 0 %} 2 3 {%

    for talk in data.talks %} 4 {% for event in talk.events if 'today'|date('U') >= event.date|date('U') %} 5 {% set talkCount = talkCount + 1 %} 6 {% endfor %} 7 {% endfor %} 8 9 <p>I have given {{ talkCount }} talks.</p> 10 @opdavies

  62. 1 {% set talkCount = 0 %} 2 3 {%

    for talk in data.talks %} 4 {% for event in talk.events if 'today'|date('U') >= event.date|date('U') %} 5 {% set talkCount = talkCount + 1 %} 6 {% endfor %} 7 {% endfor %} 8 9 <p>I have given {{ talkCount }} talks.</p> 10 @opdavies

  63. 1 {% set talks = site.talks|filter(talk => talk.speaker == page.name)

    %} 2 3 {% if talks is not empty %} 4 <section> 5 <h2>Talks by {{ page.name }}</h2> 6 7 <div> 8 <ul> 9 {% for talk in talks %} 10 <li><a href="#0">{{ talk.title }}</a></li> 11 {% endfor %} 12 </ul> 13 </div> 14 </section> 15 {% endif %} @opdavies

  64. 1 {% set talks = site.talks|filter(talk => talk.speaker == page.name)

    %} 2 3 {% if talks is not empty %} 4 <section> 5 <h2>Talks by {{ page.name }}</h2> 6 7 <div> 8 <ul> 9 {% for talk in talks %} 10 <li><a href="#0">{{ talk.title }}</a></li> 11 {% endfor %} 12 </ul> 13 </div> 14 </section> 15 {% endif %} @opdavies

  65. 1 {% set talks = site.talks|filter(talk => talk.speaker == page.name)

    %} 2 3 {% if talks is not empty %} 4 <section> 5 <h2>Talks by {{ page.name }}</h2> 6 7 <div> 8 <ul> 9 {% for talk in talks %} 10 <li><a href="#0">{{ talk.title }}</a></li> 11 {% endfor %} 12 </ul> 13 </div> 14 </section> 15 {% endif %} @opdavies

  66. 1 {% set talks = site.talks|filter(talk => talk.speaker == page.name)

    %} 2 3 {% if talks is not empty %} 4 <section> 5 <h2>Talks by {{ page.name }}</h2> 6 7 <div> 8 <ul> 9 {% for talk in talks %} 10 <li><a href="#0">{{ talk.title }}</a></li> 11 {% endfor %} 12 </ul> 13 </div> 14 </section> 15 {% endif %} @opdavies

  67. 1 {% set talks = site.talks|filter(talk => talk.speaker == page.name)

    %} 2 3 {% if talks is not empty %} 4 <section> 5 <h2>Talks by {{ page.name }}</h2> 6 7 <div> 8 <ul> 9 {% for talk in talks %} 10 <li><a href="#0">{{ talk.title }}</a></li> 11 {% endfor %} 12 </ul> 13 </div> 14 </section> 15 {% endif %} @opdavies

  68. Demo @opdavies

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

    name: twig.extension } @opdavies

  70. @opdavies

  71. // 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

  72. Thanks! References: https://www.oliverdavies.uk/phpberks Me: • https://www.oliverdavies.uk • @opdavies @opdavies