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

Building Static Websites with Sculpin

Oliver Davies
August 28, 2024
Technology
0
1.6k

Building Static Websites with Sculpin

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

Oliver Davies

August 28, 2024
Tweet

More Decks by Oliver Davies

See All by Oliver Davies
Taking Flight with Tailwind CSS
opdavies
0
4.9k
TDD - Test Driven Drupal
opdavies
0
3.7k
Building "Build Configs"
opdavies
0
400
Communities and contribution
opdavies
0
170
Working without Workspace
opdavies
0
220
Things you should know about PHP
opdavies
1
720
An Introduction to Mob Programming
opdavies
0
240
Deploying PHP applications with Ansible, Ansible Vault and Ansistrano
opdavies
0
6.1k
Upgrading to Drupal 9
opdavies
0
760

Other Decks in Technology

See All in Technology
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.5k
ネットワーク可視化の世界
likr
6
4.4k
レンジャーシステムズ | 会社紹介（採用ピッチ）
rssytems
0
310
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
1
4.8k
成果を出しながら成長する、アウトプット駆動のキャッチアップ術 / Output-driven catch-up techniques to grow while producing results
aiandrox
0
400
ハイテク休憩
sat
PRO
2
180
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
190
re:Invent をおうちで楽しんでみた ～CloudWatch のオブザーバビリティ機能がスゴい！/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
140
生成AIのガバナンスの全体像と現実解
fnifni
1
230
いまからでも遅くないコンテナ座学
nomu
0
150
社内イベント管理システムを1週間でAKSからACAに移行した話し
shingo_kawahara
0
220
Google Cloud で始める Cloud Run 〜AWSとの比較と実例デモで解説〜
risatube
PRO
0
120

Featured

See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Faster Mobile Websites
deanohume
305
30k
Navigating Team Friction
lara
183
15k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Being A Developer After 40
akosma
89
590k
Into the Great Unknown - MozCon
thekraken
34
1.5k
Automating Front-end Workflow
addyosmani
1366
200k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.6k
Mobile First: as difficult as doing things right
swwweet
222
9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k

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