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
1.7k
0

Building Static Websites with Sculpin

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

Avatar for Oliver Davies

Oliver Davies

August 28, 2024

More Decks by Oliver Davies

See All by Oliver Davies
Taking Flight with Tailwind CSS
Avatar for Oliver Davies opdavies
0
5.5k
TDD - Test Driven Drupal
Avatar for Oliver Davies opdavies
0
4.3k
Building "Build Configs"
Avatar for Oliver Davies opdavies
0
590
Communities and contribution
Avatar for Oliver Davies opdavies
0
320
Working without Workspace
Avatar for Oliver Davies opdavies
0
350
Things you should know about PHP
Avatar for Oliver Davies opdavies
1
890
An Introduction to Mob Programming
Avatar for Oliver Davies opdavies
0
420
Deploying PHP applications with Ansible, Ansible Vault and Ansistrano
Avatar for Oliver Davies opdavies
0
6.6k
Upgrading to Drupal 9
Avatar for Oliver Davies opdavies
0
890

Other Decks in Technology

See All in Technology
実装は速くなった、レビューはどうする？ ― 自身のレビューをAIで再現させるサーヴァントエンジニアリングのすゝめ / Implementation got faster. So what about reviews? — An invitation to Servant Engineering: Recreating your own code reviews with AI
Avatar for nrs nrslib
8
4.6k
小さくはじめるSLI/SLO ～育てながら組織に定着させる実践知～ / Starting Small with SLI/SLOs: Building Adoption Through Continuous Growth
Avatar for Narimichi Takamura nari_ex
3
1.4k
非エンジニアがClaudeと挑んだ「1ヶ月間プロダクト30本ノック」
Avatar for kinako askokc
0
270
中期計画、2回作ってみた　～業務委託と正社員、両方の視点から～
Avatar for 株式会社出前館 demaecan
1
650
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.9k
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.9k
生成 AI × MCP で切り拓く次世代 SRE！自律型運用への挑戦と開発者体験の進化
Avatar for _awache _awache
0
190
2026 TECHFRESH 畢業分享會 - 開發日常大解密！從領域驅動到企業級上線
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
720
Agent Skills設計で柔軟性と硬さのバランスが難しい話
Avatar for nassy nassy20
0
110
なぜ Platform Engineering の土台に Kubernetes を選ぶのか
Avatar for Ray r4ynode
1
560
AAIFに入ってみた ～内から見えるコミュニティ動向～
Avatar for Satoshi Ito sato4
0
140
「エンジニア進化論」2028年の開発完全自動化、エンジニアはどう進化するか
Avatar for CyberAgent cyberagentdevelopers
PRO
4
4.4k

Featured

See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
23k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
140
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
830
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.2k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
160
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
360
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
65
55k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k

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